docs/animated-flowchart.svg

<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 283.25 446.28125" style="max-width: 283.25px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg 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;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-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"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-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"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0" d="M145.531,34L145.531,39.75C145.531,45.5,145.531,57,145.531,67.617C145.531,78.233,145.531,87.967,145.531,92.833L145.531,97.7"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-C" id="L-B-C-0" d="M145.531,137L145.531,141.167C145.531,145.333,145.531,153.667,145.597,161.2C145.663,168.734,145.795,175.467,145.861,178.834L145.927,182.201"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;stroke-width:2px;stroke-dasharray:3;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-C LE-D" id="L-C-D-0" d="M109.552,291.302L96.649,303.049C83.746,314.795,57.939,338.288,45.036,354.901C32.133,371.515,32.133,381.248,32.133,386.115L32.133,390.981"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;stroke-width:2px;stroke-dasharray:3;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-C LE-E" id="L-C-E-0" d="M146.031,327.781L145.948,333.448C145.865,339.115,145.698,350.448,145.615,360.981C145.531,371.515,145.531,381.248,145.531,386.115L145.531,390.981"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;stroke-width:2px;stroke-dasharray:3;" class="edge-thickness-normal edge-pattern-dotted flowchart-link LS-C LE-F" id="L-C-F-0" d="M180.458,293.355L191.448,304.759C202.438,316.164,224.418,338.972,235.408,355.244C246.398,371.515,246.398,381.248,246.398,386.115L246.398,390.981"/></g><g class="edgeLabels"><g transform="translate(145.53125, 68.5)" class="edgeLabel"><g transform="translate(-38.96875, -9.5)" class="label"><foreignObject height="19" width="77.9375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Get money</span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g transform="translate(32.1328125, 361.78125)" class="edgeLabel"><g transform="translate(-14.125, -9.5)" class="label"><foreignObject height="19" width="28.25"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">One</span></div></foreignObject></g></g><g transform="translate(145.53125, 361.78125)" class="edgeLabel"><g transform="translate(-13.7890625, -9.5)" class="label"><foreignObject height="19" width="27.578125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Two</span></div></foreignObject></g></g><g transform="translate(246.3984375, 361.78125)" class="edgeLabel"><g transform="translate(-20.8515625, -9.5)" class="label"><foreignObject height="19" width="41.703125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel">Three</span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(145.53125, 17)" data-id="A" data-node="true" id="flowchart-A-0" class="node default default flowchart-label"><rect height="34" width="85.078125" y="-17" x="-42.5390625" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-35.0390625, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="70.078125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Christmas</span></div></foreignObject></g></g><g transform="translate(145.53125, 120)" data-id="B" data-node="true" id="flowchart-B-1" class="node default default flowchart-label"><rect height="34" width="102.203125" y="-17" x="-51.1015625" ry="5" rx="5" style="" class="basic label-container"/><g transform="translate(-43.6015625, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="87.203125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Go shopping</span></div></foreignObject></g></g><g transform="translate(145.53125, 257.140625)" data-id="C" data-node="true" id="flowchart-C-3" class="node default default flowchart-label"><polygon style="" transform="translate(-70.140625,70.140625)" class="label-container" points="70.140625,0 140.28125,-70.140625 70.140625,-140.28125 0,-70.140625"/><g transform="translate(-45.640625, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="91.28125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Let me think</span></div></foreignObject></g></g><g transform="translate(32.1328125, 413.28125)" data-id="D" data-node="true" id="flowchart-D-5" class="node default default flowchart-label"><rect height="34" width="64.265625" y="-17" x="-32.1328125" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-24.6328125, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="49.265625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Laptop</span></div></foreignObject></g></g><g transform="translate(145.53125, 413.28125)" data-id="E" data-node="true" id="flowchart-E-7" class="node default default flowchart-label"><rect height="34" width="62.53125" y="-17" x="-31.265625" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-23.765625, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="47.53125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">iPhone</span></div></foreignObject></g></g><g transform="translate(246.3984375, 413.28125)" data-id="F" data-node="true" id="flowchart-F-9" class="node default default flowchart-label"><rect height="34" width="39.203125" y="-17" x="-19.6015625" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-12.1015625, -9.5)" style="" class="label"><rect/><foreignObject height="19" width="24.203125"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">Car</span></div></foreignObject></g></g></g></g></g><style>.flowchart-link {
  animation: dash 30s linear infinite;
}

.label {
  /*
   * If you want to override mermaid's `themeCSS`, it's recommended to instead
   * set `themeCSS` in your mermaid `configFile.json`
   *
   * However, sometimes `!important` can also be used to override `themeCSS`.
   */
  font-family: "fantasy" !important;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  10% {
    /* No animation for the first 10% for consistent visual testing screenshots */
    stroke-dashoffset: 1000;
  }
  100% {
  }
}
</style></svg>