docs/animated-flowchart.svg

<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 417 521.28125" style="max-width: 417px; background-color: white;" class="flowchart" 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:1px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#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 p{margin:0;}#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{color:#333;}#my-svg .cluster-label span p{background-color:transparent;}#my-svg .label text,#my-svg span{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 .rough-node .label text,#my-svg .node .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:rgba(232,232,232, 0.8);text-align:center;}#my-svg .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#my-svg .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#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{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="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="my-svg_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"/></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="my-svg_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"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="my-svg_flowchart-v2-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-v2" id="my-svg_flowchart-v2-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-v2" id="my-svg_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"/></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="my-svg_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"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_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,95.917C221.031,105.167,221.031,111.333,221.031,116.833C221.031,122.333,221.031,127.167,221.031,129.583L221.031,132"/><path marker-end="url(#my-svg_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.073,212.958C221.115,219.25,221.198,223.5,221.268,227.083C221.338,230.667,221.396,233.584,221.424,235.042L221.453,236.501"/><path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted 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,412.127C62.633,428.448,62.633,434.615,62.633,440.115C62.633,445.615,62.633,450.448,62.633,452.865L62.633,455.281"/><path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_E_3" d="M221.531,385.781L221.448,391.865C221.365,397.948,221.198,410.115,221.115,419.281C221.031,428.448,221.031,434.615,221.031,440.115C221.031,445.615,221.031,450.448,221.031,452.865L221.031,455.281"/><path marker-end="url(#my-svg_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-dotted edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_F_4" d="M263.001,344.311L280.317,357.306C297.634,370.301,332.266,396.291,349.582,412.37C366.898,428.448,366.898,434.615,366.898,440.115C366.898,445.615,366.898,450.448,366.898,452.865L366.898,455.281"/></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(221.03125, 422.28125)" class="edgeLabel"><g transform="translate(-13.7890625, -12)" class="label"><foreignObject height="24" width="27.578125"><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(366.8984375, 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><g class="nodes"><g transform="translate(221.03125, 35)" id="flowchart-A-0" class="node default"><rect height="54" width="130.078125" y="-27" x="-65.0390625" data-et="node" data-id="abc" style="" class="basic label-container"/><g transform="translate(-35.0390625, -12)" style="" class="label"><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-1" class="node default"><rect height="54" width="117.203125" y="-27" x="-58.6015625" ry="5" data-et="node" data-id="abc" rx="5" style="" class="basic label-container"/><g transform="translate(-43.6015625, -12)" style="" class="label"><rect/><foreignObject height="24" width="87.203125"><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-3" 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"/><g transform="translate(-45.640625, -12)" style="" class="label"><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-5" class="node default"><rect height="54" width="109.265625" y="-27" x="-54.6328125" data-et="node" data-id="abc" style="" class="basic label-container"/><g transform="translate(-24.6328125, -12)" style="" class="label"><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-7" class="node default"><rect height="54" width="107.53125" y="-27" x="-53.765625" data-et="node" data-id="abc" style="" class="basic label-container"/><g transform="translate(-23.765625, -12)" style="" class="label"><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(366.8984375, 486.28125)" id="flowchart-F-9" class="node default"><rect height="54" width="84.203125" y="-27" x="-42.1015625" data-et="node" data-id="abc" style="" class="basic label-container"/><g transform="translate(-12.1015625, -12)" style="" class="label"><rect/><foreignObject height="24" width="24.203125"><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>Car</p></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>