[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 20, 2024 0:42am

[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!