Skip to content

Instantly share code, notes, and snippets.

@awwaiid

awwaiid/constraint_ false demo.html

Created March 2, 2026 02:03
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save awwaiid/5b7303a1faf638cd5ff0afc6f7a7d145 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-1772416964525" 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-1772416964525{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-1772416964525 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964525 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964525 .error-icon{fill:#552222;}#mermaid-1772416964525 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964525 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964525 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964525 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964525 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964525 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964525 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964525 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964525 .marker.cross{stroke:#333333;}#mermaid-1772416964525 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964525 p{margin:0;}#mermaid-1772416964525 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964525 .cluster-label text{fill:#333;}#mermaid-1772416964525 .cluster-label span{color:#333;}#mermaid-1772416964525 .cluster-label span p{background-color:transparent;}#mermaid-1772416964525 .label text,#mermaid-1772416964525 span{fill:#333;color:#333;}#mermaid-1772416964525 .node rect,#mermaid-1772416964525 .node circle,#mermaid-1772416964525 .node ellipse,#mermaid-1772416964525 .node polygon,#mermaid-1772416964525 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964525 .rough-node .label text,#mermaid-1772416964525 .node .label text,#mermaid-1772416964525 .image-shape .label,#mermaid-1772416964525 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964525 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964525 .rough-node .label,#mermaid-1772416964525 .node .label,#mermaid-1772416964525 .image-shape .label,#mermaid-1772416964525 .icon-shape .label{text-align:center;}#mermaid-1772416964525 .node.clickable{cursor:pointer;}#mermaid-1772416964525 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964525 .arrowheadPath{fill:#333333;}#mermaid-1772416964525 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964525 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964525 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964525 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964525 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964525 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964525 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964525 .cluster text{fill:#333;}#mermaid-1772416964525 .cluster span{color:#333;}#mermaid-1772416964525 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-1772416964525 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964525 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964525 .icon-shape,#mermaid-1772416964525 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964525 .icon-shape p,#mermaid-1772416964525 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964525 .icon-shape .label rect,#mermaid-1772416964525 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964525 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964525 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964525 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964525_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-1772416964525_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-1772416964525_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-1772416964525_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-1772416964525_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-1772416964525_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-1772416964525_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-1772416964525_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-1772416964525_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-1772416964735" 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-1772416964735{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-1772416964735 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964735 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964735 .error-icon{fill:#552222;}#mermaid-1772416964735 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964735 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964735 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964735 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964735 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964735 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964735 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964735 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964735 .marker.cross{stroke:#333333;}#mermaid-1772416964735 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964735 p{margin:0;}#mermaid-1772416964735 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964735 .cluster-label text{fill:#333;}#mermaid-1772416964735 .cluster-label span{color:#333;}#mermaid-1772416964735 .cluster-label span p{background-color:transparent;}#mermaid-1772416964735 .label text,#mermaid-1772416964735 span{fill:#333;color:#333;}#mermaid-1772416964735 .node rect,#mermaid-1772416964735 .node circle,#mermaid-1772416964735 .node ellipse,#mermaid-1772416964735 .node polygon,#mermaid-1772416964735 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964735 .rough-node .label text,#mermaid-1772416964735 .node .label text,#mermaid-1772416964735 .image-shape .label,#mermaid-1772416964735 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964735 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964735 .rough-node .label,#mermaid-1772416964735 .node .label,#mermaid-1772416964735 .image-shape .label,#mermaid-1772416964735 .icon-shape .label{text-align:center;}#mermaid-1772416964735 .node.clickable{cursor:pointer;}#mermaid-1772416964735 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964735 .arrowheadPath{fill:#333333;}#mermaid-1772416964735 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964735 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964735 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964735 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964735 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964735 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964735 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964735 .cluster text{fill:#333;}#mermaid-1772416964735 .cluster span{color:#333;}#mermaid-1772416964735 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-1772416964735 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964735 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964735 .icon-shape,#mermaid-1772416964735 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964735 .icon-shape p,#mermaid-1772416964735 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964735 .icon-shape .label rect,#mermaid-1772416964735 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964735 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964735 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964735 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964735_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-1772416964735_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-1772416964735_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-1772416964735_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-1772416964735_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-1772416964735_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-1772416964735_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-1772416964735_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-1772416964735_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-1772416964790" 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-1772416964790{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-1772416964790 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964790 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964790 .error-icon{fill:#552222;}#mermaid-1772416964790 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964790 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964790 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964790 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964790 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964790 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964790 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964790 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964790 .marker.cross{stroke:#333333;}#mermaid-1772416964790 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964790 p{margin:0;}#mermaid-1772416964790 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964790 .cluster-label text{fill:#333;}#mermaid-1772416964790 .cluster-label span{color:#333;}#mermaid-1772416964790 .cluster-label span p{background-color:transparent;}#mermaid-1772416964790 .label text,#mermaid-1772416964790 span{fill:#333;color:#333;}#mermaid-1772416964790 .node rect,#mermaid-1772416964790 .node circle,#mermaid-1772416964790 .node ellipse,#mermaid-1772416964790 .node polygon,#mermaid-1772416964790 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964790 .rough-node .label text,#mermaid-1772416964790 .node .label text,#mermaid-1772416964790 .image-shape .label,#mermaid-1772416964790 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964790 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964790 .rough-node .label,#mermaid-1772416964790 .node .label,#mermaid-1772416964790 .image-shape .label,#mermaid-1772416964790 .icon-shape .label{text-align:center;}#mermaid-1772416964790 .node.clickable{cursor:pointer;}#mermaid-1772416964790 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964790 .arrowheadPath{fill:#333333;}#mermaid-1772416964790 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964790 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964790 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964790 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964790 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964790 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964790 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964790 .cluster text{fill:#333;}#mermaid-1772416964790 .cluster span{color:#333;}#mermaid-1772416964790 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-1772416964790 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964790 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964790 .icon-shape,#mermaid-1772416964790 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964790 .icon-shape p,#mermaid-1772416964790 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964790 .icon-shape .label rect,#mermaid-1772416964790 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964790 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964790 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964790 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964790_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-1772416964790_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-1772416964790_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-1772416964790_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-1772416964790_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-1772416964790_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-1772416964790_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-1772416964790_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-1772416964827" 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-1772416964827{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-1772416964827 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964827 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964827 .error-icon{fill:#552222;}#mermaid-1772416964827 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964827 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964827 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964827 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964827 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964827 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964827 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964827 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964827 .marker.cross{stroke:#333333;}#mermaid-1772416964827 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964827 p{margin:0;}#mermaid-1772416964827 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964827 .cluster-label text{fill:#333;}#mermaid-1772416964827 .cluster-label span{color:#333;}#mermaid-1772416964827 .cluster-label span p{background-color:transparent;}#mermaid-1772416964827 .label text,#mermaid-1772416964827 span{fill:#333;color:#333;}#mermaid-1772416964827 .node rect,#mermaid-1772416964827 .node circle,#mermaid-1772416964827 .node ellipse,#mermaid-1772416964827 .node polygon,#mermaid-1772416964827 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964827 .rough-node .label text,#mermaid-1772416964827 .node .label text,#mermaid-1772416964827 .image-shape .label,#mermaid-1772416964827 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964827 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964827 .rough-node .label,#mermaid-1772416964827 .node .label,#mermaid-1772416964827 .image-shape .label,#mermaid-1772416964827 .icon-shape .label{text-align:center;}#mermaid-1772416964827 .node.clickable{cursor:pointer;}#mermaid-1772416964827 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964827 .arrowheadPath{fill:#333333;}#mermaid-1772416964827 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964827 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964827 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964827 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964827 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964827 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964827 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964827 .cluster text{fill:#333;}#mermaid-1772416964827 .cluster span{color:#333;}#mermaid-1772416964827 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-1772416964827 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964827 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964827 .icon-shape,#mermaid-1772416964827 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964827 .icon-shape p,#mermaid-1772416964827 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964827 .icon-shape .label rect,#mermaid-1772416964827 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964827 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964827 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964827 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964827_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-1772416964827_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-1772416964827_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-1772416964827_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-1772416964827_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-1772416964827_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-1772416964827_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-1772416964827_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-1772416964859" 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-1772416964859{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-1772416964859 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964859 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964859 .error-icon{fill:#552222;}#mermaid-1772416964859 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964859 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964859 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964859 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964859 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964859 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964859 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964859 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964859 .marker.cross{stroke:#333333;}#mermaid-1772416964859 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964859 p{margin:0;}#mermaid-1772416964859 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964859 .cluster-label text{fill:#333;}#mermaid-1772416964859 .cluster-label span{color:#333;}#mermaid-1772416964859 .cluster-label span p{background-color:transparent;}#mermaid-1772416964859 .label text,#mermaid-1772416964859 span{fill:#333;color:#333;}#mermaid-1772416964859 .node rect,#mermaid-1772416964859 .node circle,#mermaid-1772416964859 .node ellipse,#mermaid-1772416964859 .node polygon,#mermaid-1772416964859 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964859 .rough-node .label text,#mermaid-1772416964859 .node .label text,#mermaid-1772416964859 .image-shape .label,#mermaid-1772416964859 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964859 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964859 .rough-node .label,#mermaid-1772416964859 .node .label,#mermaid-1772416964859 .image-shape .label,#mermaid-1772416964859 .icon-shape .label{text-align:center;}#mermaid-1772416964859 .node.clickable{cursor:pointer;}#mermaid-1772416964859 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964859 .arrowheadPath{fill:#333333;}#mermaid-1772416964859 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964859 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964859 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964859 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964859 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964859 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964859 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964859 .cluster text{fill:#333;}#mermaid-1772416964859 .cluster span{color:#333;}#mermaid-1772416964859 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-1772416964859 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964859 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964859 .icon-shape,#mermaid-1772416964859 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964859 .icon-shape p,#mermaid-1772416964859 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964859 .icon-shape .label rect,#mermaid-1772416964859 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964859 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964859 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964859 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964859_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-1772416964859_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-1772416964859_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-1772416964859_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-1772416964859_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-1772416964859_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-1772416964859_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-1772416964859_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-1772416964888" 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-1772416964888{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-1772416964888 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964888 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964888 .error-icon{fill:#552222;}#mermaid-1772416964888 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964888 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964888 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964888 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964888 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964888 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964888 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964888 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964888 .marker.cross{stroke:#333333;}#mermaid-1772416964888 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964888 p{margin:0;}#mermaid-1772416964888 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964888 .cluster-label text{fill:#333;}#mermaid-1772416964888 .cluster-label span{color:#333;}#mermaid-1772416964888 .cluster-label span p{background-color:transparent;}#mermaid-1772416964888 .label text,#mermaid-1772416964888 span{fill:#333;color:#333;}#mermaid-1772416964888 .node rect,#mermaid-1772416964888 .node circle,#mermaid-1772416964888 .node ellipse,#mermaid-1772416964888 .node polygon,#mermaid-1772416964888 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964888 .rough-node .label text,#mermaid-1772416964888 .node .label text,#mermaid-1772416964888 .image-shape .label,#mermaid-1772416964888 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964888 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964888 .rough-node .label,#mermaid-1772416964888 .node .label,#mermaid-1772416964888 .image-shape .label,#mermaid-1772416964888 .icon-shape .label{text-align:center;}#mermaid-1772416964888 .node.clickable{cursor:pointer;}#mermaid-1772416964888 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964888 .arrowheadPath{fill:#333333;}#mermaid-1772416964888 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964888 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964888 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964888 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964888 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964888 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964888 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964888 .cluster text{fill:#333;}#mermaid-1772416964888 .cluster span{color:#333;}#mermaid-1772416964888 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-1772416964888 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964888 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964888 .icon-shape,#mermaid-1772416964888 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964888 .icon-shape p,#mermaid-1772416964888 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964888 .icon-shape .label rect,#mermaid-1772416964888 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964888 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964888 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964888 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}#mermaid-1772416964888 .hidden&gt;*{display:none!important;}#mermaid-1772416964888 .hidden span{display:none!important;}</style><g><marker id="mermaid-1772416964888_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-1772416964888_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-1772416964888_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-1772416964888_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-1772416964888_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-1772416964888_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-1772416964888_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-1772416964888_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>
<h2>Cross-link with horizontal edge</h2>
<div class="row">
<div class="diagram">
<h3>Without constraint</h3>
<div class="src">flowchart TB
graph TD
A --&gt; C
A --&gt; D
B --&gt; C
B --&gt; D
A o--o B
</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416964923" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 218.65835571289062px;" viewBox="0 0 218.65835571289062 278" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416964923{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-1772416964923 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964923 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964923 .error-icon{fill:#552222;}#mermaid-1772416964923 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964923 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964923 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964923 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964923 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964923 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964923 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964923 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964923 .marker.cross{stroke:#333333;}#mermaid-1772416964923 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964923 p{margin:0;}#mermaid-1772416964923 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964923 .cluster-label text{fill:#333;}#mermaid-1772416964923 .cluster-label span{color:#333;}#mermaid-1772416964923 .cluster-label span p{background-color:transparent;}#mermaid-1772416964923 .label text,#mermaid-1772416964923 span{fill:#333;color:#333;}#mermaid-1772416964923 .node rect,#mermaid-1772416964923 .node circle,#mermaid-1772416964923 .node ellipse,#mermaid-1772416964923 .node polygon,#mermaid-1772416964923 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964923 .rough-node .label text,#mermaid-1772416964923 .node .label text,#mermaid-1772416964923 .image-shape .label,#mermaid-1772416964923 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964923 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964923 .rough-node .label,#mermaid-1772416964923 .node .label,#mermaid-1772416964923 .image-shape .label,#mermaid-1772416964923 .icon-shape .label{text-align:center;}#mermaid-1772416964923 .node.clickable{cursor:pointer;}#mermaid-1772416964923 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964923 .arrowheadPath{fill:#333333;}#mermaid-1772416964923 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964923 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964923 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964923 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964923 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964923 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964923 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964923 .cluster text{fill:#333;}#mermaid-1772416964923 .cluster span{color:#333;}#mermaid-1772416964923 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-1772416964923 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964923 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964923 .icon-shape,#mermaid-1772416964923 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964923 .icon-shape p,#mermaid-1772416964923 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964923 .icon-shape .label rect,#mermaid-1772416964923 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964923 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964923 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964923 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964923_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-1772416964923_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-1772416964923_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-1772416964923_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-1772416964923_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-1772416964923_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.608333587646484,61.12322368447458L17.53721423966138,80.39855293199393Q8.608333587646484,87 8.608333587646484,98.10423401633862L8.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="W3sieCI6NDMuNjA4MzMzNTg3NjQ2NDg0LCJ5Ijo2MS4xMjMyMjM2ODQ0NzQ1OH0seyJ4Ijo4LjYwODMzMzU4NzY0NjQ4NCwieSI6ODd9LHsieCI6OC42MDgzMzM1ODc2NDY0ODQsInkiOjEzOX0seyJ4Ijo4LjYwODMzMzU4NzY0NjQ4NCwieSI6MTkxfSx7IngiOjI1LjUxNTM4NTQ4MTAyNzQ1OCwieSI6MjE2fV0=" marker-end="url(#mermaid-1772416964923_flowchart-v2-pointEnd)"></path><path d="M114.27500534057617,61.12322368447458L140.34612468856128,80.39855293199393Q149.27500534057617,87 149.27500534057617,98.10423401633862L149.27500534057617,139L149.27500534057617,179.0664260836268Q149.27500534057617,191 154.54725526825555,201.70577260722587L159.81950519593494,212.41154521445173" id="L_A_D_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_D_0" data-points="W3sieCI6MTE0LjI3NTAwNTM0MDU3NjE3LCJ5Ijo2MS4xMjMyMjM2ODQ0NzQ1OH0seyJ4IjoxNDkuMjc1MDA1MzQwNTc2MTcsInkiOjg3fSx7IngiOjE0OS4yNzUwMDUzNDA1NzYxNywieSI6MTM5fSx7IngiOjE0OS4yNzUwMDUzNDA1NzYxNywieSI6MTkxfSx7IngiOjE2MS41ODY3MDQxODA3OTA4MywieSI6MjE2fV0=" marker-end="url(#mermaid-1772416964923_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-1772416964923_flowchart-v2-pointEnd)"></path><path d="M114.27500534057617,156.34287815993483L177.4885127528846,187.37035207144964Q184.88333892822266,191 183.3276925670979,199.08936107784874L180.83103619513085,212.0719742120774" id="L_B_D_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_D_0" data-points="W3sieCI6MTE0LjI3NTAwNTM0MDU3NjE3LCJ5IjoxNTYuMzQyODc4MTU5OTM0ODN9LHsieCI6MTg0Ljg4MzMzODkyODIyMjY2LCJ5IjoxOTF9LHsieCI6MTgwLjA3NTY0NjYyMDUzMDM0LCJ5IjoyMTZ9XQ==" marker-end="url(#mermaid-1772416964923_flowchart-v2-pointEnd)"></path><path d="M78.94166946411133,62L78.94166946411133,87L78.94166946411133,112" 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="W3sieCI6NzguOTQxNjY5NDY0MTExMzMsInkiOjYyfSx7IngiOjc4Ljk0MTY2OTQ2NDExMTMzLCJ5Ijo4N30seyJ4Ijo3OC45NDE2Njk0NjQxMTEzMywieSI6MTEyfV0=" marker-start="url(#mermaid-1772416964923_flowchart-v2-circleStart)" marker-end="url(#mermaid-1772416964923_flowchart-v2-circleEnd)"></path></g><g class="edgeLabels"><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_A_D_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 class="edgeLabel"><g class="label" data-id="L_B_D_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_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><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(78.94166946411133, 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-C-1" 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 class="node default" id="flowchart-D-3" transform="translate(174.88333892822266, 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>D</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-4" 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></g></g></svg></pre>
</div>
<div class="diagram">
<h3>With constraint: false</h3>
<div class="src">flowchart TB
graph TD
A --&gt; C
A --&gt; D
B --&gt; C
B --&gt; D
A e1@o--o B
e1@{ constraint: false }
</div>
<pre class="mermaid" data-processed="true"><svg id="mermaid-1772416964969" width="100%" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 228.2166748046875px;" viewBox="0 0 228.2166748046875 174" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-1772416964969{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-1772416964969 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1772416964969 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1772416964969 .error-icon{fill:#552222;}#mermaid-1772416964969 .error-text{fill:#552222;stroke:#552222;}#mermaid-1772416964969 .edge-thickness-normal{stroke-width:1px;}#mermaid-1772416964969 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1772416964969 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1772416964969 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1772416964969 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1772416964969 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1772416964969 .marker{fill:#333333;stroke:#333333;}#mermaid-1772416964969 .marker.cross{stroke:#333333;}#mermaid-1772416964969 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1772416964969 p{margin:0;}#mermaid-1772416964969 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-1772416964969 .cluster-label text{fill:#333;}#mermaid-1772416964969 .cluster-label span{color:#333;}#mermaid-1772416964969 .cluster-label span p{background-color:transparent;}#mermaid-1772416964969 .label text,#mermaid-1772416964969 span{fill:#333;color:#333;}#mermaid-1772416964969 .node rect,#mermaid-1772416964969 .node circle,#mermaid-1772416964969 .node ellipse,#mermaid-1772416964969 .node polygon,#mermaid-1772416964969 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1772416964969 .rough-node .label text,#mermaid-1772416964969 .node .label text,#mermaid-1772416964969 .image-shape .label,#mermaid-1772416964969 .icon-shape .label{text-anchor:middle;}#mermaid-1772416964969 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1772416964969 .rough-node .label,#mermaid-1772416964969 .node .label,#mermaid-1772416964969 .image-shape .label,#mermaid-1772416964969 .icon-shape .label{text-align:center;}#mermaid-1772416964969 .node.clickable{cursor:pointer;}#mermaid-1772416964969 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1772416964969 .arrowheadPath{fill:#333333;}#mermaid-1772416964969 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-1772416964969 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1772416964969 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964969 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1772416964969 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964969 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1772416964969 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1772416964969 .cluster text{fill:#333;}#mermaid-1772416964969 .cluster span{color:#333;}#mermaid-1772416964969 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-1772416964969 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1772416964969 rect.text{fill:none;stroke-width:0;}#mermaid-1772416964969 .icon-shape,#mermaid-1772416964969 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1772416964969 .icon-shape p,#mermaid-1772416964969 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1772416964969 .icon-shape .label rect,#mermaid-1772416964969 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1772416964969 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1772416964969 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1772416964969 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker id="mermaid-1772416964969_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-1772416964969_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-1772416964969_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-1772416964969_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-1772416964969_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-1772416964969_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.39038614126352,62L37.62650266679802,76.9860970336103Q33.775001525878906,87 35.80115289242481,97.5359871060387L37.82730425897071,108.07197421207741" 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="W3sieCI6NDMuMzkwMzg2MTQxMjYzNTIsInkiOjYyfSx7IngiOjMzLjc3NTAwMTUyNTg3ODkwNiwieSI6ODd9LHsieCI6MzguNTgyNjkzODMzNTcxMjEsInkiOjExMn1d" marker-end="url(#mermaid-1772416964969_flowchart-v2-pointEnd)"></path><path d="M89.10833740234375,61.12322368447458L110.32079433336634,76.80636663038283Q124.10833740234375,87 137.09658046586685,98.19428636742529L150.08482352938998,109.38857273485058" id="L_A_D_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_D_0" data-points="W3sieCI6ODkuMTA4MzM3NDAyMzQzNzUsInkiOjYxLjEyMzIyMzY4NDQ3NDU4fSx7IngiOjEyNC4xMDgzMzc0MDIzNDM3NSwieSI6ODd9LHsieCI6MTUzLjExNDc0ODg4MTQxMzQsInkiOjExMn1d" marker-end="url(#mermaid-1772416964969_flowchart-v2-pointEnd)"></path><path d="M139.10833740234375,61.12322368447458L117.89588047132116,76.80636663038283Q104.10833740234375,87 91.12009433882065,98.19428636742529L78.13185127529754,109.38857273485058" 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="W3sieCI6MTM5LjEwODMzNzQwMjM0Mzc1LCJ5Ijo2MS4xMjMyMjM2ODQ0NzQ1OH0seyJ4IjoxMDQuMTA4MzM3NDAyMzQzNzUsInkiOjg3fSx7IngiOjc1LjEwMTkyNTkyMzI3NDExLCJ5IjoxMTJ9XQ==" marker-end="url(#mermaid-1772416964969_flowchart-v2-pointEnd)"></path><path d="M184.82628866342398,62L190.59017213788948,76.9860970336103Q194.4416732788086,87 192.4155219122627,97.5359871060387L190.3893705457168,108.07197421207741" id="L_B_D_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_D_0" data-points="W3sieCI6MTg0LjgyNjI4ODY2MzQyMzk4LCJ5Ijo2Mn0seyJ4IjoxOTQuNDQxNjczMjc4ODA4NiwieSI6ODd9LHsieCI6MTg5LjYzMzk4MDk3MTExNjI3LCJ5IjoxMTJ9XQ==" marker-end="url(#mermaid-1772416964969_flowchart-v2-pointEnd)"></path><path d="M89.10833740234375,35L139.10833740234375,35" 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="W3sieCI6ODkuMTA4MzM3NDAyMzQzNzUsInkiOjM1fSx7IngiOjEzOS4xMDgzMzc0MDIzNDM3NSwieSI6MzV9XQ==" marker-start="url(#mermaid-1772416964969_flowchart-v2-circleStart)" marker-end="url(#mermaid-1772416964969_flowchart-v2-circleEnd)"></path></g><g class="edgeLabels"><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_A_D_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 class="edgeLabel"><g class="label" data-id="L_B_D_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(53.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-C-1" transform="translate(43.775001525878906, 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 class="node default" id="flowchart-D-3" transform="translate(184.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>D</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-4" transform="translate(174.4416732788086, 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>B</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