Skip to content

Instantly share code, notes, and snippets.

@awwaiid

awwaiid/constraint_ false demo.html

Created March 2, 2026 01:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save awwaiid/be066a30aa569ffd6ef84cece5a648cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save awwaiid/be066a30aa569ffd6ef84cece5a648cf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
constraint_ false demo.html
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>constraint: false demo</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.row { display: flex; gap: 2em; flex-wrap: wrap; }
.diagram { flex: 1; min-width: 300px; }
h3 { margin-bottom: 0.2em; }
pre.mermaid { border: 1px solid #ccc; border-radius: 4px; padding: 0.5em; }
.src { background: #f5f5f5; border-radius: 4px; padding: 0.5em; font-size: 0.85em; white-space: pre; }
</style>
</head>
<body>
<h1>Edge <code>constraint: false</code> demo</h1>
<h2>Triangle — 3 nodes, 2 ranks</h2>
<div class="row">
<div class="diagram">
<h3>Without constraint (3 ranks)</h3>
<div class="src">flowchart TB
A --&gt; B
A --&gt; C
B --&gt; C</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416048943" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 122.27500915527344px;" viewBox="0 0 122.27500915527344 278" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416048943{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1772416048943 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416048943 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416048943 .error-icon{fill:#552222;}#mermaid-1772416048943 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416048943 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416048943 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416048943 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416048943 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416048943 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416048943 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416048943 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416048943 .marker.cross{stroke:#333333;}#mermaid-1772416048943 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416048943 p{margin:0;}#mermaid-1772416048943 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416048943 .cluster-label text{fill:#333;}#mermaid-1772416048943 .cluster-label span{color:#333;}#mermaid-1772416048943 .cluster-label span p{background-color:transparent;}#mermaid-1772416048943 .label text,#mermaid-1772416048943 span{fill:#333;color:#333;}#mermaid-1772416048943 .node rect,#mermaid-1772416048943 .node circle,#mermaid-1772416048943 .node ellipse,#mermaid-1772416048943 .node polygon,#mermaid-1772416048943 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416048943 .rough-node .label text,#mermaid-1772416048943 .node .label text,#mermaid-1772416048943 .image-shape .label,#mermaid-1772416048943 .icon-shape .label{text-anchor:middle;}#mermaid-1772416048943 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416048943 .rough-node .label,#mermaid-1772416048943 .node .label,#mermaid-1772416048943 .image-shape .label,#mermaid-1772416048943 .icon-shape .label{text-align:center;}#mermaid-1772416048943 .node.clickable{cursor:pointer;}#mermaid-1772416048943 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416048943 .arrowheadPath{fill:#333333;}#mermaid-1772416048943 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416048943 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416048943 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416048943 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416048943 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416048943 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416048943 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416048943 .cluster text{fill:#333;}#mermaid-1772416048943 .cluster span{color:#333;}#mermaid-1772416048943 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1772416048943 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416048943 rect.text{fill:none;stroke-width:0;}#mermaid-1772416048943 .icon-shape,#mermaid-1772416048943 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416048943 .icon-shape p,#mermaid-1772416048943 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416048943 .icon-shape .label rect,#mermaid-1772416048943 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416048943 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416048943 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416048943 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416048943_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416048943_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416048943_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416048943_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416048943_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416048943_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M62.034617570730354,62L73.05954602761972,78.30226328991984Q78.94166946411133,87 78.94166946411133,97.5L78.94166946411133,108" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NjIuMDM0NjE3NTcwNzMwMzU0LCJ5Ijo2Mn0seyJ4Ijo3OC45NDE2Njk0NjQxMTEzMywieSI6ODd9LHsieCI6NzguOTQxNjY5NDY0MTExMzMsInkiOjExMn1d" marker-end="url(#mermaid-1772416048943_flowchart-v2-pointEnd)"></path><path d="M25.515385481027458,62L17.06185953433697,74.5Q8.608333587646484,87 8.608333587646484,102.09013256838287L8.608333587646484,139L8.608333587646484,177.90986743161713Q8.608333587646484,191 15.941455070243332,201.843288245699L23.27457655284018,212.68657649139803" id="L_A_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_C_0" data-points="W3sieCI6MjUuNTE1Mzg1NDgxMDI3NDU4LCJ5Ijo2Mn0seyJ4Ijo4LjYwODMzMzU4NzY0NjQ4NCwieSI6ODd9LHsieCI6OC42MDgzMzM1ODc2NDY0ODQsInkiOjEzOX0seyJ4Ijo4LjYwODMzMzU4NzY0NjQ4NCwieSI6MTkxfSx7IngiOjI1LjUxNTM4NTQ4MTAyNzQ1OCwieSI6MjE2fV0=" marker-end="url(#mermaid-1772416048943_flowchart-v2-pointEnd)"></path><path d="M78.94166946411133,166L78.94166946411133,178.5Q78.94166946411133,191 71.93914156352608,201.35444846438116L64.27542649891764,212.68657649139803" id="L_B_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_C_0" data-points="W3sieCI6NzguOTQxNjY5NDY0MTExMzMsInkiOjE2Nn0seyJ4Ijo3OC45NDE2Njk0NjQxMTEzMywieSI6MTkxfSx7IngiOjYyLjAzNDYxNzU3MDczMDM1NCwieSI6MjE2fV0=" marker-end="url(#mermaid-1772416048943_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_A_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_B_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(43.775001525878906, 35)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(78.94166946411133, 139)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>B</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(43.775001525878906, 243)"><rect class="basic label-container" style="" x="-35.775001525878906" y="-27" width="71.55000305175781" height="54"></rect><g class="label" style="" transform="translate(-5.775001525878906, -12)"><rect></rect><foreignObject width="11.550003051757812" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>C</p></span></div></foreignObject></g></g></g></g></g></svg></pre>
</div>
<div class="diagram">
<h3>With constraint: false (2 ranks — triangle)</h3>
<div class="src">flowchart TB
A --&gt; B
A --&gt; C
B e1@--&gt; C
e1@{ constraint: false }</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416049184" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 208.2166748046875px;" viewBox="0 0 208.2166748046875 174" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416049184{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1772416049184 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416049184 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416049184 .error-icon{fill:#552222;}#mermaid-1772416049184 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416049184 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416049184 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416049184 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416049184 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416049184 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416049184 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416049184 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416049184 .marker.cross{stroke:#333333;}#mermaid-1772416049184 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416049184 p{margin:0;}#mermaid-1772416049184 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416049184 .cluster-label text{fill:#333;}#mermaid-1772416049184 .cluster-label span{color:#333;}#mermaid-1772416049184 .cluster-label span p{background-color:transparent;}#mermaid-1772416049184 .label text,#mermaid-1772416049184 span{fill:#333;color:#333;}#mermaid-1772416049184 .node rect,#mermaid-1772416049184 .node circle,#mermaid-1772416049184 .node ellipse,#mermaid-1772416049184 .node polygon,#mermaid-1772416049184 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416049184 .rough-node .label text,#mermaid-1772416049184 .node .label text,#mermaid-1772416049184 .image-shape .label,#mermaid-1772416049184 .icon-shape .label{text-anchor:middle;}#mermaid-1772416049184 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416049184 .rough-node .label,#mermaid-1772416049184 .node .label,#mermaid-1772416049184 .image-shape .label,#mermaid-1772416049184 .icon-shape .label{text-align:center;}#mermaid-1772416049184 .node.clickable{cursor:pointer;}#mermaid-1772416049184 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416049184 .arrowheadPath{fill:#333333;}#mermaid-1772416049184 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416049184 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416049184 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049184 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416049184 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049184 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416049184 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416049184 .cluster text{fill:#333;}#mermaid-1772416049184 .cluster span{color:#333;}#mermaid-1772416049184 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1772416049184 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416049184 rect.text{fill:none;stroke-width:0;}#mermaid-1772416049184 .icon-shape,#mermaid-1772416049184 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049184 .icon-shape p,#mermaid-1772416049184 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416049184 .icon-shape .label rect,#mermaid-1772416049184 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049184 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416049184 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416049184 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416049184_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049184_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049184_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049184_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049184_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049184_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M72.44591698279748,62L51.29925897287756,80.15938093283667Q43.333335876464844,87 43.333335876464844,97.5L43.333335876464844,108" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NzIuNDQ1OTE2OTgyNzk3NDgsInkiOjYyfSx7IngiOjQzLjMzMzMzNTg3NjQ2NDg0NCwieSI6ODd9LHsieCI6NDMuMzMzMzM1ODc2NDY0ODQ0LCJ5IjoxMTJ9XQ==" marker-end="url(#mermaid-1772416049184_flowchart-v2-pointEnd)"></path><path d="M135.32909217247595,62L156.47575018239587,80.15938093283667Q164.4416732788086,87 164.4416732788086,97.5L164.4416732788086,108" id="L_A_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_C_0" data-points="W3sieCI6MTM1LjMyOTA5MjE3MjQ3NTk1LCJ5Ijo2Mn0seyJ4IjoxNjQuNDQxNjczMjc4ODA4NiwieSI6ODd9LHsieCI6MTY0LjQ0MTY3MzI3ODgwODYsInkiOjExMn1d" marker-end="url(#mermaid-1772416049184_flowchart-v2-pointEnd)"></path><path d="M78.66667175292969,139L124.66667175292969,139" id="e1" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="e1" data-points="W3sieCI6NzguNjY2NjcxNzUyOTI5NjksInkiOjEzOX0seyJ4IjoxMjguNjY2NjcxNzUyOTI5NywieSI6MTM5fV0=" marker-end="url(#mermaid-1772416049184_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_A_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="e1" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(103.88750457763672, 35)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(43.333335876464844, 139)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>B</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(164.4416732788086, 139)"><rect class="basic label-container" style="" x="-35.775001525878906" y="-27" width="71.55000305175781" height="54"></rect><g class="label" style="" transform="translate(-5.775001525878906, -12)"><rect></rect><foreignObject width="11.550003051757812" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>C</p></span></div></foreignObject></g></g></g></g></g></svg></pre>
</div>
</div>
<h2>Unranked sibling — node C at rank of A</h2>
<div class="row">
<div class="diagram">
<h3>Without constraint (3 ranks, straight line)</h3>
<div class="src">flowchart TB
A --&gt; B
B --&gt; C</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416049244" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 87.55000305175781px;" viewBox="0 0 87.55000305175781 278" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416049244{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1772416049244 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416049244 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416049244 .error-icon{fill:#552222;}#mermaid-1772416049244 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416049244 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416049244 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416049244 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416049244 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416049244 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416049244 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416049244 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416049244 .marker.cross{stroke:#333333;}#mermaid-1772416049244 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416049244 p{margin:0;}#mermaid-1772416049244 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416049244 .cluster-label text{fill:#333;}#mermaid-1772416049244 .cluster-label span{color:#333;}#mermaid-1772416049244 .cluster-label span p{background-color:transparent;}#mermaid-1772416049244 .label text,#mermaid-1772416049244 span{fill:#333;color:#333;}#mermaid-1772416049244 .node rect,#mermaid-1772416049244 .node circle,#mermaid-1772416049244 .node ellipse,#mermaid-1772416049244 .node polygon,#mermaid-1772416049244 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416049244 .rough-node .label text,#mermaid-1772416049244 .node .label text,#mermaid-1772416049244 .image-shape .label,#mermaid-1772416049244 .icon-shape .label{text-anchor:middle;}#mermaid-1772416049244 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416049244 .rough-node .label,#mermaid-1772416049244 .node .label,#mermaid-1772416049244 .image-shape .label,#mermaid-1772416049244 .icon-shape .label{text-align:center;}#mermaid-1772416049244 .node.clickable{cursor:pointer;}#mermaid-1772416049244 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416049244 .arrowheadPath{fill:#333333;}#mermaid-1772416049244 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416049244 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416049244 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049244 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416049244 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049244 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416049244 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416049244 .cluster text{fill:#333;}#mermaid-1772416049244 .cluster span{color:#333;}#mermaid-1772416049244 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1772416049244 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416049244 rect.text{fill:none;stroke-width:0;}#mermaid-1772416049244 .icon-shape,#mermaid-1772416049244 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049244 .icon-shape p,#mermaid-1772416049244 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416049244 .icon-shape .label rect,#mermaid-1772416049244 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049244 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416049244 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416049244 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416049244_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049244_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049244_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049244_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049244_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049244_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M43.775001525878906,62L43.775001525878906,87L43.775001525878906,108" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5Ijo2Mn0seyJ4Ijo0My43NzUwMDE1MjU4Nzg5MDYsInkiOjg3fSx7IngiOjQzLjc3NTAwMTUyNTg3ODkwNiwieSI6MTEyfV0=" marker-end="url(#mermaid-1772416049244_flowchart-v2-pointEnd)"></path><path d="M43.775001525878906,166L43.775001525878906,191L43.775001525878906,212" id="L_B_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_C_0" data-points="W3sieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5IjoxNjZ9LHsieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5IjoxOTF9LHsieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5IjoyMTZ9XQ==" marker-end="url(#mermaid-1772416049244_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_B_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(43.775001525878906, 35)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(43.775001525878906, 139)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>B</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(43.775001525878906, 243)"><rect class="basic label-container" style="" x="-35.775001525878906" y="-27" width="71.55000305175781" height="54"></rect><g class="label" style="" transform="translate(-5.775001525878906, -12)"><rect></rect><foreignObject width="11.550003051757812" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>C</p></span></div></foreignObject></g></g></g></g></g></svg></pre>
</div>
<div class="diagram">
<h3>With constraint: false (2 ranks — C beside A)</h3>
<div class="src">flowchart TB
A --&gt; B
B e1@--&gt; C
e1@{ constraint: false }</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416049295" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 208.2166748046875px;" viewBox="0 0 208.2166748046875 174" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416049295{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1772416049295 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416049295 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416049295 .error-icon{fill:#552222;}#mermaid-1772416049295 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416049295 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416049295 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416049295 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416049295 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416049295 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416049295 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416049295 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416049295 .marker.cross{stroke:#333333;}#mermaid-1772416049295 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416049295 p{margin:0;}#mermaid-1772416049295 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416049295 .cluster-label text{fill:#333;}#mermaid-1772416049295 .cluster-label span{color:#333;}#mermaid-1772416049295 .cluster-label span p{background-color:transparent;}#mermaid-1772416049295 .label text,#mermaid-1772416049295 span{fill:#333;color:#333;}#mermaid-1772416049295 .node rect,#mermaid-1772416049295 .node circle,#mermaid-1772416049295 .node ellipse,#mermaid-1772416049295 .node polygon,#mermaid-1772416049295 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416049295 .rough-node .label text,#mermaid-1772416049295 .node .label text,#mermaid-1772416049295 .image-shape .label,#mermaid-1772416049295 .icon-shape .label{text-anchor:middle;}#mermaid-1772416049295 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416049295 .rough-node .label,#mermaid-1772416049295 .node .label,#mermaid-1772416049295 .image-shape .label,#mermaid-1772416049295 .icon-shape .label{text-align:center;}#mermaid-1772416049295 .node.clickable{cursor:pointer;}#mermaid-1772416049295 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416049295 .arrowheadPath{fill:#333333;}#mermaid-1772416049295 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416049295 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416049295 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049295 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416049295 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049295 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416049295 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416049295 .cluster text{fill:#333;}#mermaid-1772416049295 .cluster span{color:#333;}#mermaid-1772416049295 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1772416049295 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416049295 rect.text{fill:none;stroke-width:0;}#mermaid-1772416049295 .icon-shape,#mermaid-1772416049295 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049295 .icon-shape p,#mermaid-1772416049295 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416049295 .icon-shape .label rect,#mermaid-1772416049295 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049295 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416049295 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416049295 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416049295_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049295_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049295_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049295_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049295_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049295_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M43.333335876464844,62L43.333335876464844,87L43.333335876464844,108" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NDMuMzMzMzM1ODc2NDY0ODQ0LCJ5Ijo2Mn0seyJ4Ijo0My4zMzMzMzU4NzY0NjQ4NDQsInkiOjg3fSx7IngiOjQzLjMzMzMzNTg3NjQ2NDg0NCwieSI6MTEyfV0=" marker-end="url(#mermaid-1772416049295_flowchart-v2-pointEnd)"></path><path d="M74.77492347130408,112L129.96544831390736,64.60595012082412" id="e1" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="e1" data-points="W3sieCI6NzQuNzc0OTIzNDcxMzA0MDgsInkiOjExMn0seyJ4IjoxMzMuMDAwMDg1NjgzOTY5MzYsInkiOjYyfV0=" marker-end="url(#mermaid-1772416049295_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="e1" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(43.333335876464844, 35)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(43.333335876464844, 139)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>B</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(164.4416732788086, 35)"><rect class="basic label-container" style="" x="-35.775001525878906" y="-27" width="71.55000305175781" height="54"></rect><g class="label" style="" transform="translate(-5.775001525878906, -12)"><rect></rect><foreignObject width="11.550003051757812" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>C</p></span></div></foreignObject></g></g></g></g></g></svg></pre>
</div>
</div>
<h2>Same-rank sibling — node C at rank of B</h2>
<div class="row">
<div class="diagram">
<h3>Without constraint (3 ranks, straight line)</h3>
<div class="src">flowchart TB
A --&gt; B
B --&gt; C</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416049330" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 87.55000305175781px;" viewBox="0 0 87.55000305175781 278" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416049330{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1772416049330 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416049330 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416049330 .error-icon{fill:#552222;}#mermaid-1772416049330 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416049330 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416049330 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416049330 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416049330 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416049330 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416049330 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416049330 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416049330 .marker.cross{stroke:#333333;}#mermaid-1772416049330 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416049330 p{margin:0;}#mermaid-1772416049330 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416049330 .cluster-label text{fill:#333;}#mermaid-1772416049330 .cluster-label span{color:#333;}#mermaid-1772416049330 .cluster-label span p{background-color:transparent;}#mermaid-1772416049330 .label text,#mermaid-1772416049330 span{fill:#333;color:#333;}#mermaid-1772416049330 .node rect,#mermaid-1772416049330 .node circle,#mermaid-1772416049330 .node ellipse,#mermaid-1772416049330 .node polygon,#mermaid-1772416049330 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416049330 .rough-node .label text,#mermaid-1772416049330 .node .label text,#mermaid-1772416049330 .image-shape .label,#mermaid-1772416049330 .icon-shape .label{text-anchor:middle;}#mermaid-1772416049330 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416049330 .rough-node .label,#mermaid-1772416049330 .node .label,#mermaid-1772416049330 .image-shape .label,#mermaid-1772416049330 .icon-shape .label{text-align:center;}#mermaid-1772416049330 .node.clickable{cursor:pointer;}#mermaid-1772416049330 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416049330 .arrowheadPath{fill:#333333;}#mermaid-1772416049330 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416049330 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416049330 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049330 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416049330 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049330 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416049330 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416049330 .cluster text{fill:#333;}#mermaid-1772416049330 .cluster span{color:#333;}#mermaid-1772416049330 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1772416049330 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416049330 rect.text{fill:none;stroke-width:0;}#mermaid-1772416049330 .icon-shape,#mermaid-1772416049330 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049330 .icon-shape p,#mermaid-1772416049330 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416049330 .icon-shape .label rect,#mermaid-1772416049330 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049330 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416049330 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416049330 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416049330_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049330_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049330_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049330_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049330_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049330_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M43.775001525878906,62L43.775001525878906,87L43.775001525878906,108" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5Ijo2Mn0seyJ4Ijo0My43NzUwMDE1MjU4Nzg5MDYsInkiOjg3fSx7IngiOjQzLjc3NTAwMTUyNTg3ODkwNiwieSI6MTEyfV0=" marker-end="url(#mermaid-1772416049330_flowchart-v2-pointEnd)"></path><path d="M43.775001525878906,166L43.775001525878906,191L43.775001525878906,212" id="L_B_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_C_0" data-points="W3sieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5IjoxNjZ9LHsieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5IjoxOTF9LHsieCI6NDMuNzc1MDAxNTI1ODc4OTA2LCJ5IjoyMTZ9XQ==" marker-end="url(#mermaid-1772416049330_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_B_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(43.775001525878906, 35)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(43.775001525878906, 139)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>B</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(43.775001525878906, 243)"><rect class="basic label-container" style="" x="-35.775001525878906" y="-27" width="71.55000305175781" height="54"></rect><g class="label" style="" transform="translate(-5.775001525878906, -12)"><rect></rect><foreignObject width="11.550003051757812" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>C</p></span></div></foreignObject></g></g></g></g></g></svg></pre>
</div>
<div class="diagram">
<h3>With hidden node/edge and constraint: false (2 ranks — C beside B)</h3>
<div class="src">flowchart TB
A --&gt; B
D:::hidden ~~~ C
B e1@--&gt; C
e1@{ constraint: false }</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416049367" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 208.2166748046875px;" viewBox="0 0 208.2166748046875 174" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416049367{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1772416049367 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416049367 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416049367 .error-icon{fill:#552222;}#mermaid-1772416049367 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416049367 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416049367 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416049367 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416049367 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416049367 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416049367 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416049367 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416049367 .marker.cross{stroke:#333333;}#mermaid-1772416049367 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416049367 p{margin:0;}#mermaid-1772416049367 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416049367 .cluster-label text{fill:#333;}#mermaid-1772416049367 .cluster-label span{color:#333;}#mermaid-1772416049367 .cluster-label span p{background-color:transparent;}#mermaid-1772416049367 .label text,#mermaid-1772416049367 span{fill:#333;color:#333;}#mermaid-1772416049367 .node rect,#mermaid-1772416049367 .node circle,#mermaid-1772416049367 .node ellipse,#mermaid-1772416049367 .node polygon,#mermaid-1772416049367 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416049367 .rough-node .label text,#mermaid-1772416049367 .node .label text,#mermaid-1772416049367 .image-shape .label,#mermaid-1772416049367 .icon-shape .label{text-anchor:middle;}#mermaid-1772416049367 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416049367 .rough-node .label,#mermaid-1772416049367 .node .label,#mermaid-1772416049367 .image-shape .label,#mermaid-1772416049367 .icon-shape .label{text-align:center;}#mermaid-1772416049367 .node.clickable{cursor:pointer;}#mermaid-1772416049367 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416049367 .arrowheadPath{fill:#333333;}#mermaid-1772416049367 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416049367 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416049367 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049367 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416049367 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049367 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416049367 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416049367 .cluster text{fill:#333;}#mermaid-1772416049367 .cluster span{color:#333;}#mermaid-1772416049367 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1772416049367 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416049367 rect.text{fill:none;stroke-width:0;}#mermaid-1772416049367 .icon-shape,#mermaid-1772416049367 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416049367 .icon-shape p,#mermaid-1772416049367 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416049367 .icon-shape .label rect,#mermaid-1772416049367 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416049367 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416049367 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416049367 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-1772416049367 .hidden&gt;*{display:none!important;}#mermaid-1772416049367 .hidden span{display:none!important;}</style><g><marker id="mermaid-1772416049367_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049367_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049367_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049367_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1px; stroke-dasharray: 1px, 0px;"></circle></marker><marker id="mermaid-1772416049367_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><marker id="mermaid-1772416049367_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2px; stroke-dasharray: 1px, 0px;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M43.333335876464844,62L43.333335876464844,87L43.333335876464844,108" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NDMuMzMzMzM1ODc2NDY0ODQ0LCJ5Ijo2Mn0seyJ4Ijo0My4zMzMzMzU4NzY0NjQ4NDQsInkiOjg3fSx7IngiOjQzLjMzMzMzNTg3NjQ2NDg0NCwieSI6MTEyfV0=" marker-end="url(#mermaid-1772416049367_flowchart-v2-pointEnd)"></path><path d="M164.4416732788086,35L164.4416732788086,87L164.4416732788086,112" id="L_D_C_0" class="edge-thickness-invisible edge-pattern-solid" style=";" data-edge="true" data-et="edge" data-id="L_D_C_0" data-points="W3sieCI6MTY0LjQ0MTY3MzI3ODgwODYsInkiOjM1fSx7IngiOjE2NC40NDE2NzMyNzg4MDg2LCJ5Ijo4N30seyJ4IjoxNjQuNDQxNjczMjc4ODA4NiwieSI6MTEyfV0="></path><path d="M78.66667175292969,139L124.66667175292969,139" id="e1" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="e1" data-points="W3sieCI6NzguNjY2NjcxNzUyOTI5NjksInkiOjEzOX0seyJ4IjoxMjguNjY2NjcxNzUyOTI5NywieSI6MTM5fV0=" marker-end="url(#mermaid-1772416049367_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_D_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="e1" transform="translate(0, 0)"><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml" class="labelBkg"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(43.333335876464844, 35)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(43.333335876464844, 139)"><rect class="basic label-container" style="" x="-35.333335876464844" y="-27" width="70.66667175292969" height="54"></rect><g class="label" style="" transform="translate(-5.333335876464844, -12)"><rect></rect><foreignObject width="10.666671752929688" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>B</p></span></div></foreignObject></g></g><g class="node default hidden" id="flowchart-D-2" transform="translate(164.4416732788086, 35)"><rect class="basic label-container" style="display:none !important" x="-30" y="-15" width="60" height="30"></rect><g class="label" style="" transform="translate(0, 0)"><rect></rect><foreignObject width="0" height="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>D</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(164.4416732788086, 139)"><rect class="basic label-container" style="" x="-35.775001525878906" y="-27" width="71.55000305175781" height="54"></rect><g class="label" style="" transform="translate(-5.775001525878906, -12)"><rect></rect><foreignObject width="11.550003051757812" height="24"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>C</p></span></div></foreignObject></g></g></g></g></g></svg></pre>
</div>
</div>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true, logLevel: 3 });
</script>
<div class="mermaidTooltip" style="opacity: 0; position: absolute; text-align: center; max-width: 200px; padding: 2px; font-size: 12px; background: rgb(255, 255, 222); border: 1px solid rgb(51, 51, 51); border-radius: 2px; pointer-events: none; z-index: 100;"></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment