[wip] feat: support state diagram

[igorwessel]

Basic example:

Todo

• Support a single state
• Support a transition
• Support a text transition
• Support start and end syntax
  • Working end-inner ellipse not stays in the same groupId as end state
• Support composite states
  • Working in group id when have nested layers - need to ask how to deep nested layers in groupIds (currently only bound for current cluster)
  • Maybe we bind the edges incorrectly when is a parent (feat(state): add from, to ids for edge mermaid-js/mermaid#5503)
• Support choice
  • Inside a composite state
• Support forks
• Support notes
  • working minor fixes when inside a composite state 🔧
  • currently edges for a note is wrong because we don't have from, to ID. maybe we should wait mermaid release feat(state): add from, to ids for edge mermaid-js/mermaid#5503 or try a workaround
• Support concurrency
  • maybe a minor adjusts in arrow label 🔧
• Support specify a direction
  • in some cases edge is not found, this will resolve: feat(state): add from, to ids for edge mermaid-js/mermaid#5503 or try a workaround
• Support styling
• Refactor current code. In the current stage, the focus is mainly on making things work, and I haven't thought much about how to have things in a better way.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
mermaid-to-excalidraw	✅ Ready (Inspect)	Visit Preview	May 30, 2024 0:17am

[dwelle]

Awesome @igorwessel, we'll check soon! ❤️

[igorwessel]

@ad1992 Currently, I'm not sure how to create a "bound" for an example where we have N levels of deep layers between composite states.

I've tried adding a groupid of ["first", "second", "third"] to all elements but it doesn't work well. Don't pay attention to the (state_end inner circle), I'm still working on it while I decipher the notes. (In PR preview is testcase: Composite states in deep layers)

Gravacao.de.Tela.2024-05-03.as.20.18.39.mov

Do you have any suggestions?

[ad1992]

@ad1992 Currently, I'm not sure how to create a "bound" for an example where we have N levels of deep layers between composite states.

I've tried adding a groupid of ["first", "second", "third"] to all elements but it doesn't work well. Don't pay attention to the (state_end inner circle), I'm still working on it while I decipher the notes. (In PR preview is testcase: Composite states in deep layers)

Gravacao.de.Tela.2024-05-03.as.20.18.39.mov
Do you have any suggestions?

Apologies for the delayed response! I promise to review and get back to it this week

[ad1992]

@ad1992 Currently, I'm not sure how to create a "bound" for an example where we have N levels of deep layers between composite states.

I've tried adding a groupid of ["first", "second", "third"] to all elements but it doesn't work well. Don't pay attention to the (state_end inner circle), I'm still working on it while I decipher the notes. (In PR preview is testcase: Composite states in deep layers)

Gravacao.de.Tela.2024-05-03.as.20.18.39.mov
Do you have any suggestions?

@igorwessel probably something like 👇🏻 you mean ? (groups inside group).

{"type":"excalidraw/clipboard","elements":[{"id":"cFwmQFd1bgkQeX2HeUo5G","type":"ellipse","x":83.7421875,"y":6.1796875,"width":14,"height":14,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"#000","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":{"type":3},"seed":586867870,"version":75,"versionNonce":1722581854,"isDeleted":false,"boundElements":[{"id":"AM49IO5o1q-6pnD2boCjo","type":"arrow"}],"updated":1716806140296,"link":null,"locked":false},{"id":"AM49IO5o1q-6pnD2boCjo","type":"arrow","x":90.74240624999999,"y":20.1796875,"width":17.55208723943403,"height":99.88281249999997,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":{"type":2},"seed":1181082206,"version":341,"versionNonce":1371314306,"isDeleted":false,"boundElements":null,"updated":1716806140333,"link":null,"locked":false,"points":[[0,0.5],[0,4.167000000000002],[0,25],[-17.55208723943403,100.38281249999997]],"lastCommittedPoint":null,"startBinding":{"elementId":"cFwmQFd1bgkQeX2HeUo5G","focus":-0.000031249999998245985,"gap":1},"endBinding":{"elementId":"cmrM_He6yDUr_9XxkzsyR","focus":-0.28611582643116024,"gap":2.8203125},"startArrowhead":null,"endArrowhead":"triangle"},{"id":"YjneJSoFvY1UQsIlnBAvq","type":"ellipse","x":116.2265625,"y":525.96484375,"width":4,"height":4,"angle":0,"strokeColor":"black","backgroundColor":"black","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["state-Third_end-197"],"frameId":null,"roundness":{"type":3},"seed":74719938,"version":43,"versionNonce":1229598338,"isDeleted":false,"boundElements":[{"id":"CmEtYhwxYXcSapWO2K2s2","type":"arrow"}],"updated":1716806136232,"link":null,"locked":false},{"id":"cmrM_He6yDUr_9XxkzsyR","type":"rectangle","x":-72.390625,"y":123.3828125,"width":279.3515625,"height":544,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["First","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":1242152002,"version":173,"versionNonce":1788310174,"isDeleted":false,"boundElements":[{"type":"text","id":"e8BhbJt6gcNsno0mXmj9y"},{"id":"AM49IO5o1q-6pnD2boCjo","type":"arrow"}],"updated":1716806136232,"link":null,"locked":false},{"id":"g4nLGXnXNcSoQ36WrppkH","type":"line","x":-72.390625,"y":148.3828125,"width":279.3515625,"height":0,"angle":0,"strokeColor":"black","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["First","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":28352734,"version":171,"versionNonce":1120210498,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0],[279.3515625,0]],"lastCommittedPoint":null,"startBinding":null,"endBinding":null,"startArrowhead":null,"endArrowhead":null},{"id":"E8K_RvMz_yyARWLSGpxfz","type":"ellipse","x":60.28515625,"y":148.3828125,"width":14,"height":14,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"#000","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["First","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":667739138,"version":172,"versionNonce":42692318,"isDeleted":false,"boundElements":[{"id":"uhUHdfemVO5dh_u9pGhsR","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"uhUHdfemVO5dh_u9pGhsR","type":"arrow","x":67.28537499999999,"y":162.3828125,"width":4.063165521375396,"height":75.92187499999997,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["First","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":2},"seed":623278722,"version":696,"versionNonce":1364063746,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0.5],[0,4.167000000000002],[0,25],[4.063165521375396,76.42187499999997]],"lastCommittedPoint":null,"startBinding":{"elementId":"E8K_RvMz_yyARWLSGpxfz","focus":-0.000031249999998245985,"gap":1},"endBinding":{"elementId":"_nOoY-CIM3OHBhbdZ5kKZ","focus":0.019697866499151253,"gap":1.0000000000000284},"startArrowhead":null,"endArrowhead":"triangle"},{"id":"e8BhbJt6gcNsno0mXmj9y","type":"text","x":48.637176513671875,"y":128.3828125,"width":37.29595947265625,"height":20,"angle":0,"strokeColor":"#000","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["First","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":218584862,"version":172,"versionNonce":724951838,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"text":"First","fontSize":16,"fontFamily":1,"textAlign":"center","verticalAlign":"top","baseline":14,"containerId":"cmrM_He6yDUr_9XxkzsyR","originalText":"First","lineHeight":1.25},{"id":"_nOoY-CIM3OHBhbdZ5kKZ","type":"rectangle","x":-18.65625,"y":239.8046875,"width":209.3515625,"height":430,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":853857566,"version":358,"versionNonce":904127938,"isDeleted":false,"boundElements":[{"type":"text","id":"RjB-H0FZmkZWGqnUVT0r5"},{"id":"uhUHdfemVO5dh_u9pGhsR","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"axGp8dEhL_j7mEe_iPL4_","type":"line","x":-18.65625,"y":264.8046875,"width":209.3515625,"height":0,"angle":0,"strokeColor":"black","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":2052395970,"version":357,"versionNonce":1997000542,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0],[209.3515625,0]],"lastCommittedPoint":null,"startBinding":null,"endBinding":null,"startArrowhead":null,"endArrowhead":null},{"id":"ROxf0yWBAhb8IAHrmwZ-b","type":"ellipse","x":79.01953125,"y":264.8046875,"width":14,"height":14,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"#000","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":1342734686,"version":358,"versionNonce":967171458,"isDeleted":false,"boundElements":[{"id":"fed1Mrq_yTDiR8dUVnSuk","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"0M1AJpq0CMnEBdJaGtavH","type":"rectangle","x":39.94921875,"y":328.8046875,"width":92.140625,"height":44,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":1942047618,"version":359,"versionNonce":38941598,"isDeleted":false,"boundElements":[{"type":"text","id":"zhQ1lJm1rZhDGLRuVKrwV"},{"id":"fed1Mrq_yTDiR8dUVnSuk","type":"arrow"},{"id":"LcGxFT0oeWz-SnUXqFiz8","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"IfbAlZIX2O9JRClQo-cGp","type":"rectangle","x":19.58203125,"y":451.453125,"width":139.3515625,"height":222,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":476882334,"version":342,"versionNonce":701685058,"isDeleted":false,"boundElements":[{"type":"text","id":"ppEd-ZKSmxvVmwtHR0k2n"},{"id":"LcGxFT0oeWz-SnUXqFiz8","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"DkZZH5FGoz7_qsGDz3vet","type":"line","x":19.58203125,"y":476.453125,"width":139.3515625,"height":0,"angle":0,"strokeColor":"black","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":709921602,"version":302,"versionNonce":927338462,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0],[139.3515625,0]],"lastCommittedPoint":null,"startBinding":null,"endBinding":null,"startArrowhead":null,"endArrowhead":null},{"id":"MQsS00tseWAnKh4wbdFnb","type":"ellipse","x":82.2578125,"y":476.453125,"width":14,"height":14,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"#000","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":1229079006,"version":303,"versionNonce":1405740290,"isDeleted":false,"boundElements":[{"id":"ycwDCDM8odfQJwolHv-so","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"7faY2MX_T1rWR9QQmpQ2h","type":"rectangle","x":54.58203125,"y":540.453125,"width":69.3515625,"height":44,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":341955330,"version":304,"versionNonce":301229086,"isDeleted":false,"boundElements":[{"type":"text","id":"aIie9Ah7JL4vty6Xhq0Bs"},{"id":"ycwDCDM8odfQJwolHv-so","type":"arrow"},{"id":"CmEtYhwxYXcSapWO2K2s2","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"s_oN7riluLmrQKYRg3Tzh","type":"ellipse","x":82.2578125,"y":634.453125,"width":14,"height":14,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":3},"seed":966415902,"version":303,"versionNonce":17429698,"isDeleted":false,"boundElements":[{"id":"CmEtYhwxYXcSapWO2K2s2","type":"arrow"}],"updated":1716806136233,"link":null,"locked":false},{"id":"fed1Mrq_yTDiR8dUVnSuk","type":"arrow","x":86.01974999999999,"y":278.8046875,"width":0,"height":50,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":2},"seed":41281182,"version":1077,"versionNonce":1682845790,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0.5],[0,4.167000000000002],[0,25],[0,49.5]],"lastCommittedPoint":null,"startBinding":{"elementId":"ROxf0yWBAhb8IAHrmwZ-b","focus":-0.00003124999999824598,"gap":1},"endBinding":{"elementId":"0M1AJpq0CMnEBdJaGtavH","focus":0.000004748177038905951,"gap":1},"startArrowhead":null,"endArrowhead":"triangle"},{"id":"LcGxFT0oeWz-SnUXqFiz8","type":"arrow","x":86.01974999999999,"y":372.8046875,"width":6.254622182953355,"height":75.328125,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":2},"seed":1966594626,"version":1061,"versionNonce":1932659842,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0.5],[0,4.16700000000003],[0,25],[6.254622182953355,75.828125]],"lastCommittedPoint":null,"startBinding":{"elementId":"0M1AJpq0CMnEBdJaGtavH","focus":-0.000004748177038905949,"gap":1},"endBinding":{"elementId":"IfbAlZIX2O9JRClQo-cGp","focus":0.20426810781424118,"gap":2.8203125},"startArrowhead":null,"endArrowhead":"triangle"},{"id":"ycwDCDM8odfQJwolHv-so","type":"arrow","x":89.25803124999999,"y":490.453125,"width":0,"height":50,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":2},"seed":2122015454,"version":910,"versionNonce":438596766,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0.5],[0,4.16700000000003],[0,25],[0,49.5]],"lastCommittedPoint":null,"startBinding":{"elementId":"MQsS00tseWAnKh4wbdFnb","focus":-0.00003124999999824598,"gap":1},"endBinding":{"elementId":"7faY2MX_T1rWR9QQmpQ2h","focus":0.00000630843753484925,"gap":1},"startArrowhead":null,"endArrowhead":"triangle"},{"id":"CmEtYhwxYXcSapWO2K2s2","type":"arrow","x":89.25803124999999,"y":584.453125,"width":0,"height":50,"angle":0,"strokeColor":"#1e1e1e","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":{"type":2},"seed":1132937730,"version":839,"versionNonce":1610689602,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"points":[[0,0.5],[0,4.16700000000003],[0,25],[0,49.5]],"lastCommittedPoint":null,"startBinding":{"elementId":"7faY2MX_T1rWR9QQmpQ2h","focus":-0.000006308437534849246,"gap":1},"endBinding":{"elementId":"s_oN7riluLmrQKYRg3Tzh","focus":0.00003124999999824597,"gap":1},"startArrowhead":null,"endArrowhead":"triangle"},{"id":"RjB-H0FZmkZWGqnUVT0r5","type":"text","x":60.043540954589844,"y":244.8046875,"width":51.95198059082031,"height":20,"angle":0,"strokeColor":"#000","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":109757278,"version":358,"versionNonce":2099785950,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"text":"Second","fontSize":16,"fontFamily":1,"textAlign":"center","verticalAlign":"top","baseline":14,"containerId":"_nOoY-CIM3OHBhbdZ5kKZ","originalText":"Second","lineHeight":1.25},{"id":"zhQ1lJm1rZhDGLRuVKrwV","type":"text","x":60.56354522705078,"y":340.8046875,"width":50.91197204589844,"height":20,"angle":0,"strokeColor":"rgb(0, 0, 0)","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Second","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":223782814,"version":358,"versionNonce":1834374146,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"text":"second","fontSize":16,"fontFamily":1,"textAlign":"center","verticalAlign":"middle","baseline":14,"containerId":"0M1AJpq0CMnEBdJaGtavH","originalText":"second","lineHeight":1.25},{"id":"ppEd-ZKSmxvVmwtHR0k2n","type":"text","x":69.12982940673828,"y":456.453125,"width":40.25596618652344,"height":20,"angle":0,"strokeColor":"#000","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":1369179102,"version":342,"versionNonce":2028627230,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"text":"Third","fontSize":16,"fontFamily":1,"textAlign":"center","verticalAlign":"top","baseline":14,"containerId":"IfbAlZIX2O9JRClQo-cGp","originalText":"Third","lineHeight":1.25},{"id":"aIie9Ah7JL4vty6Xhq0Bs","type":"text","x":71.04183197021484,"y":552.453125,"width":36.43196105957031,"height":20,"angle":0,"strokeColor":"rgb(0, 0, 0)","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":2,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":["Third","QVRUrHLxcL8_hyGvNWJ7s","a9wxhbWp8aKV6k3GbAf8C"],"frameId":null,"roundness":null,"seed":1433131038,"version":303,"versionNonce":758154178,"isDeleted":false,"boundElements":null,"updated":1716806136233,"link":null,"locked":false,"text":"third","fontSize":16,"fontFamily":1,"textAlign":"center","verticalAlign":"middle","baseline":14,"containerId":"7faY2MX_T1rWR9QQmpQ2h","originalText":"third","lineHeight":1.25}],"files":{}}

[igorwessel]

Exactly what I wanted, looking at the output you brought I think I understood how I can have the same behavior. tks @ad1992

For all elements of group 1, there should be something: ["First"]
For group 2 which is inside group 1, there should be: ["Second", "First"]

I should reverse the order of the relationships, I had misunderstood the part of "ordered from deepest to shallowest."

[ad1992]

Exactly what I wanted, looking at the output you brought I think I understood how I can have the same behavior. tks @ad1992

For all elements of group 1, there should be something: ["First"] For group 2 which is inside group 1, there should be: ["Second", "First"]

I should reverse the order of the relationships, I had misunderstood the part of "ordered from deepest to shallowest."

Awesome!

[ad1992]

Hi @igorwessel, just checking if this PR is ready from your end ?

[igorwessel]

just checking if this PR is ready from your end ?

@ad1992 I had stopped because I was waiting for a release of mermaid (mermaid-js/mermaid#5503) to be able to link the edges correctly for each element.
My attempts to do this without having this information always had an edge case to deal with.

But with the release this PR is in the final stages, I just need to resolve a few things like:

• Support concurrency (groupId incorrectly - Concurrency in state diagram example)
• Organize code

[ad1992]

just checking if this PR is ready from your end ?

@ad1992 I had stopped because I was waiting for a release of mermaid (mermaid-js/mermaid#5503) to be able to link the edges correctly for each element. My attempts to do this without having this information always had an edge case to deal with.

But with the release this PR is in the final stages, I just need to resolve a few things like:

• Support concurrency (groupId incorrectly - Concurrency in state diagram example)
• Organize code

I have asked for RC in the same PR, hoping we should be able to get the RC and use it to unblock

[igorwessel]

@ad1992 Mermaid released version v11, but with some breaking-changes between all diagrams. I think it's better to separate this update into another PR.
But I can already finish the implementation thinking that we will be on version v11.

[ad1992]

@ad1992 Mermaid released version v11, but with some breaking-changes between all diagrams. I think it's better to separate this update into another PR. But I can already finish the implementation thinking that we will be on version v11.

yes @igorwessel sounds good. In the meanwhile, I will work on upgrading the project to mermaid v11