Last active
May 4, 2025 22:18
-
-
Save ingo-eichhorst/cd18efd5cbc3dc60cb6095c0affe3e65 to your computer and use it in GitHub Desktop.
Mermaid Animated Dotted Line
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .flowchart-link { | |
| stroke-dasharray: 4, 4 !important; | |
| animation: flow 1s linear infinite; | |
| stroke-width: 2px !important; | |
| } | |
| @keyframes flow { | |
| from { | |
| stroke-dashoffset: 8; | |
| } | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <?xml-stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" type="text/css"?> | |
| <svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 437.8125 521.28125" style="max-width: 100%;" class="flowchart" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-div" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#graph-div .error-icon{fill:#552222;}#graph-div .error-text{fill:#552222;stroke:#552222;}#graph-div .edge-thickness-normal{stroke-width:1px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-thickness-invisible{stroke-width:0;fill:none;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:#333333;stroke:#333333;}#graph-div .marker.cross{stroke:#333333;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div p{margin:0;}#graph-div .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#graph-div .cluster-label text{fill:#333;}#graph-div .cluster-label span{color:#333;}#graph-div .cluster-label span p{background-color:transparent;}#graph-div .label text,#graph-div span{fill:#333;color:#333;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#graph-div .rough-node .label text,#graph-div .node .label text,#graph-div .image-shape .label,#graph-div .icon-shape .label{text-anchor:middle;}#graph-div .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#graph-div .rough-node .label,#graph-div .node .label,#graph-div .image-shape .label,#graph-div .icon-shape .label{text-align:center;}#graph-div .node.clickable{cursor:pointer;}#graph-div .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#graph-div .arrowheadPath{fill:#333333;}#graph-div .edgePath .path{stroke:#333333;stroke-width:2.0px;}#graph-div .flowchart-link{stroke:#333333;fill:none;}#graph-div .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#graph-div .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#graph-div .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#graph-div .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#graph-div .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#graph-div .cluster text{fill:#333;}#graph-div .cluster span{color:#333;}#graph-div 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;}#graph-div .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#graph-div rect.text{fill:none;stroke-width:0;}#graph-div .icon-shape,#graph-div .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#graph-div .icon-shape p,#graph-div .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#graph-div .icon-shape rect,#graph-div .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-div_flowchart-v2-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-div_flowchart-v2-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-div_flowchart-v2-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-div_flowchart-v2-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="graph-div_flowchart-v2-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="graph-div_flowchart-v2-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#graph-div_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_A_B_0" d="M221.031,62L221.031,68.167C221.031,74.333,221.031,86.667,221.031,98.333C221.031,110,221.031,121,221.031,126.5L221.031,132"></path><path marker-end="url(#graph-div_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_B_C_1" d="M221.031,190L221.031,194.167C221.031,198.333,221.031,206.667,221.102,214.417C221.172,222.167,221.312,229.334,221.383,232.917L221.453,236.501"></path><path marker-end="url(#graph-div_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_D_2" d="M178.604,342.854L159.276,356.092C139.947,369.33,101.29,395.806,81.961,414.543C62.633,433.281,62.633,444.281,62.633,449.781L62.633,455.281"></path><path marker-end="url(#graph-div_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_E_3" d="M197.193,361.443L191.959,371.583C186.725,381.723,176.256,402.002,175.909,417.804C175.562,433.605,185.337,444.929,190.224,450.591L195.111,456.253"></path><path marker-end="url(#graph-div_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_F_4" d="M264.221,343.092L283.068,356.29C301.916,369.488,339.61,395.885,358.457,414.583C377.305,433.281,377.305,444.281,377.305,449.781L377.305,455.281"></path><path marker-end="url(#graph-div_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_E_C_5" d="M241.865,459.281L246.623,453.115C251.381,446.948,260.898,434.615,261.54,419.214C262.182,403.813,253.95,385.345,249.834,376.111L245.717,366.877"></path></g><g class="edgeLabels"><g transform="translate(221.03125, 99)" class="edgeLabel"><g transform="translate(-38.96875, -12)" class="label"><foreignObject height="24" width="77.9375"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Get money</p></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(62.6328125, 422.28125)" class="edgeLabel"><g transform="translate(-14.125, -12)" class="label"><foreignObject height="24" width="28.25"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>One</p></span></div></foreignObject></g></g><g transform="translate(165.787109375, 422.28125)" class="edgeLabel"><g transform="translate(-13.78515625, -12)" class="label"><foreignObject height="24" width="27.5703125"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Two</p></span></div></foreignObject></g></g><g transform="translate(377.3046875, 422.28125)" class="edgeLabel"><g transform="translate(-20.8515625, -12)" class="label"><foreignObject height="24" width="41.703125"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>Three</p></span></div></foreignObject></g></g><g transform="translate(270.4140625, 422.28125)" class="edgeLabel"><g transform="translate(-16.65625, -12)" class="label"><foreignObject height="24" width="33.3125"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"><p>back</p></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(221.03125, 35)" id="flowchart-A-374" class="node default"><rect height="54" width="130.078125" y="-27" x="-65.0390625" style="" class="basic label-container"></rect><g transform="translate(-35.0390625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="70.078125"><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>Christmas</p></span></div></foreignObject></g></g><g transform="translate(221.03125, 163)" id="flowchart-B-375" class="node default"><rect height="54" width="117.1953125" y="-27" x="-58.59765625" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-43.59765625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="87.1953125"><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>Go shopping</p></span></div></foreignObject></g></g><g transform="translate(221.03125, 312.640625)" id="flowchart-C-377" class="node default"><polygon transform="translate(-72.640625,72.640625)" class="label-container" points="72.640625,0 145.28125,-72.640625 72.640625,-145.28125 0,-72.640625"></polygon><g transform="translate(-45.640625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="91.28125"><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>Let me think</p></span></div></foreignObject></g></g><g transform="translate(62.6328125, 486.28125)" id="flowchart-D-379" class="node default"><rect height="54" width="109.265625" y="-27" x="-54.6328125" style="" class="basic label-container"></rect><g transform="translate(-24.6328125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="49.265625"><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>Laptop</p></span></div></foreignObject></g></g><g transform="translate(221.03125, 486.28125)" id="flowchart-E-381" class="node default"><rect height="54" width="107.53125" y="-27" x="-53.765625" style="" class="basic label-container"></rect><g transform="translate(-23.765625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="47.53125"><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>iPhone</p></span></div></foreignObject></g></g><g transform="translate(377.3046875, 486.28125)" id="flowchart-F-383" class="node default"><rect height="54" width="105.015625" y="-27" x="-52.5078125" style="" class="basic label-container"></rect><g transform="translate(-22.5078125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="45.015625"><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><i class="fa fa-car"></i> Car</p></span></div></foreignObject></g></g></g></g></g></svg> |
This is cool and it works.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Turn your static Mermaid diagrams in animated diagrams.
How To Use:
Note: