mermaid-diagram-example.svg

<svg id="mermaid-1547340211133" width="100%" xmlns="http://www.w3.org/2000/svg" style="max-width: 362.28125px;" viewBox="0 0 362.28125 405.2453155517578"><style>


#mermaid-1547340211133 .label {
  font-family: 'trebuchet ms', verdana, arial;
  color: #333; }

#mermaid-1547340211133 .node rect,
#mermaid-1547340211133 .node circle,
#mermaid-1547340211133 .node ellipse,
#mermaid-1547340211133 .node polygon {
  fill: #ECECFF;
  stroke: #9370DB;
  stroke-width: 1px; }

#mermaid-1547340211133 .node.clickable {
  cursor: pointer; }

#mermaid-1547340211133 .arrowheadPath {
  fill: #333333; }

#mermaid-1547340211133 .edgePath .path {
  stroke: #333333;
  stroke-width: 1.5px; }

#mermaid-1547340211133 .edgeLabel {
  background-color: #e8e8e8; }

#mermaid-1547340211133 .cluster rect {
  fill: #ffffde !important;
  stroke: #aaaa33 !important;
  stroke-width: 1px !important; }

#mermaid-1547340211133 .cluster text {
  fill: #333; }

#mermaid-1547340211133 div.mermaidTooltip {
  position: absolute;
  text-align: center;
  max-width: 200px;
  padding: 2px;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 12px;
  background: #ffffde;
  border: 1px solid #aaaa33;
  border-radius: 2px;
  pointer-events: none;
  z-index: 100; }

#mermaid-1547340211133 .actor {
  stroke: #CCCCFF;
  fill: #ECECFF; }

#mermaid-1547340211133 text.actor {
  fill: black;
  stroke: none; }

#mermaid-1547340211133 .actor-line {
  stroke: grey; }

#mermaid-1547340211133 .messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: #333; }

#mermaid-1547340211133 .messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: #333; }

#mermaid-1547340211133 #arrowhead {
  fill: #333; }

#mermaid-1547340211133 #crosshead path {
  fill: #333 !important;
  stroke: #333 !important; }

#mermaid-1547340211133 .messageText {
  fill: #333;
  stroke: none; }

#mermaid-1547340211133 .labelBox {
  stroke: #CCCCFF;
  fill: #ECECFF; }

#mermaid-1547340211133 .labelText {
  fill: black;
  stroke: none; }

#mermaid-1547340211133 .loopText {
  fill: black;
  stroke: none; }

#mermaid-1547340211133 .loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  stroke: #CCCCFF; }

#mermaid-1547340211133 .note {
  stroke: #aaaa33;
  fill: #fff5ad; }

#mermaid-1547340211133 .noteText {
  fill: black;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 14px; }

#mermaid-1547340211133 .activation0 {
  fill: #f4f4f4;
  stroke: #666; }

#mermaid-1547340211133 .activation1 {
  fill: #f4f4f4;
  stroke: #666; }

#mermaid-1547340211133 .activation2 {
  fill: #f4f4f4;
  stroke: #666; }


#mermaid-1547340211133 .section {
  stroke: none;
  opacity: 0.2; }

#mermaid-1547340211133 .section0 {
  fill: rgba(102, 102, 255, 0.49); }

#mermaid-1547340211133 .section2 {
  fill: #fff400; }

#mermaid-1547340211133 .section1,
#mermaid-1547340211133 .section3 {
  fill: white;
  opacity: 0.2; }

#mermaid-1547340211133 .sectionTitle0 {
  fill: #333; }

#mermaid-1547340211133 .sectionTitle1 {
  fill: #333; }

#mermaid-1547340211133 .sectionTitle2 {
  fill: #333; }

#mermaid-1547340211133 .sectionTitle3 {
  fill: #333; }

#mermaid-1547340211133 .sectionTitle {
  text-anchor: start;
  font-size: 11px;
  text-height: 14px; }


#mermaid-1547340211133 .grid .tick {
  stroke: lightgrey;
  opacity: 0.3;
  shape-rendering: crispEdges; }

#mermaid-1547340211133 .grid path {
  stroke-width: 0; }


#mermaid-1547340211133 .today {
  fill: none;
  stroke: red;
  stroke-width: 2px; }


#mermaid-1547340211133 .task {
  stroke-width: 2; }

#mermaid-1547340211133 .taskText {
  text-anchor: middle;
  font-size: 11px; }

#mermaid-1547340211133 .taskTextOutsideRight {
  fill: black;
  text-anchor: start;
  font-size: 11px; }

#mermaid-1547340211133 .taskTextOutsideLeft {
  fill: black;
  text-anchor: end;
  font-size: 11px; }


#mermaid-1547340211133 .taskText0,
#mermaid-1547340211133 .taskText1,
#mermaid-1547340211133 .taskText2,
#mermaid-1547340211133 .taskText3 {
  fill: white; }

#mermaid-1547340211133 .task0,
#mermaid-1547340211133 .task1,
#mermaid-1547340211133 .task2,
#mermaid-1547340211133 .task3 {
  fill: #8a90dd;
  stroke: #534fbc; }

#mermaid-1547340211133 .taskTextOutside0,
#mermaid-1547340211133 .taskTextOutside2 {
  fill: black; }

#mermaid-1547340211133 .taskTextOutside1,
#mermaid-1547340211133 .taskTextOutside3 {
  fill: black; }


#mermaid-1547340211133 .active0,
#mermaid-1547340211133 .active1,
#mermaid-1547340211133 .active2,
#mermaid-1547340211133 .active3 {
  fill: #bfc7ff;
  stroke: #534fbc; }

#mermaid-1547340211133 .activeText0,
#mermaid-1547340211133 .activeText1,
#mermaid-1547340211133 .activeText2,
#mermaid-1547340211133 .activeText3 {
  fill: black !important; }


#mermaid-1547340211133 .done0,
#mermaid-1547340211133 .done1,
#mermaid-1547340211133 .done2,
#mermaid-1547340211133 .done3 {
  stroke: grey;
  fill: lightgrey;
  stroke-width: 2; }

#mermaid-1547340211133 .doneText0,
#mermaid-1547340211133 .doneText1,
#mermaid-1547340211133 .doneText2,
#mermaid-1547340211133 .doneText3 {
  fill: black !important; }


#mermaid-1547340211133 .crit0,
#mermaid-1547340211133 .crit1,
#mermaid-1547340211133 .crit2,
#mermaid-1547340211133 .crit3 {
  stroke: #ff8888;
  fill: red;
  stroke-width: 2; }

#mermaid-1547340211133 .activeCrit0,
#mermaid-1547340211133 .activeCrit1,
#mermaid-1547340211133 .activeCrit2,
#mermaid-1547340211133 .activeCrit3 {
  stroke: #ff8888;
  fill: #bfc7ff;
  stroke-width: 2; }

#mermaid-1547340211133 .doneCrit0,
#mermaid-1547340211133 .doneCrit1,
#mermaid-1547340211133 .doneCrit2,
#mermaid-1547340211133 .doneCrit3 {
  stroke: #ff8888;
  fill: lightgrey;
  stroke-width: 2;
  cursor: pointer;
  shape-rendering: crispEdges; }

#mermaid-1547340211133 .doneCritText0,
#mermaid-1547340211133 .doneCritText1,
#mermaid-1547340211133 .doneCritText2,
#mermaid-1547340211133 .doneCritText3 {
  fill: black !important; }

#mermaid-1547340211133 .activeCritText0,
#mermaid-1547340211133 .activeCritText1,
#mermaid-1547340211133 .activeCritText2,
#mermaid-1547340211133 .activeCritText3 {
  fill: black !important; }

#mermaid-1547340211133 .titleText {
  text-anchor: middle;
  font-size: 18px;
  fill: black; }

#mermaid-1547340211133 g.classGroup text {
  fill: #9370DB;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-size: 10px; }

#mermaid-1547340211133 g.classGroup rect {
  fill: #ECECFF;
  stroke: #9370DB; }

#mermaid-1547340211133 g.classGroup line {
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 .classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: #ECECFF;
  opacity: 0.5; }

#mermaid-1547340211133 .classLabel .label {
  fill: #9370DB;
  font-size: 10px; }

#mermaid-1547340211133 .relation {
  stroke: #9370DB;
  stroke-width: 1;
  fill: none; }

#mermaid-1547340211133 #compositionStart {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #compositionEnd {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #aggregationStart {
  fill: #ECECFF;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #aggregationEnd {
  fill: #ECECFF;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #dependencyStart {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #dependencyEnd {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #extensionStart {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 #extensionEnd {
  fill: #9370DB;
  stroke: #9370DB;
  stroke-width: 1; }

#mermaid-1547340211133 .commit-id,
#mermaid-1547340211133 .commit-msg,
#mermaid-1547340211133 .branch-label {
  fill: lightgrey;
  color: lightgrey; }
</style><style>#mermaid-1547340211133 {
    color: rgba(0, 0, 0, 0.65);
    font: ;
  }</style><g transform="translate(-12, -12)"><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M193.52630158888795,180.8497406147668L119.8515625,241.7453155517578L119.8515625,277.2453155517578" marker-end="url(#arrowhead419)" style="fill:none"></path><defs><marker id="arrowhead419" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M245.31744675167047,180.8497392224507L317.9921875,241.7453155517578L317.9921875,277.2453155517578" marker-end="url(#arrowhead420)" style="fill:none"></path><defs><marker id="arrowhead420" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M119.8515625,318.2453155517578L119.8515625,343.2453155517578L120.3515625,368.7453155517578" marker-end="url(#arrowhead421)" style="fill:none"></path><defs><marker id="arrowhead421" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M317.9921875,318.2453155517578L317.9921875,343.2453155517578L318.4921875,368.7453155517578" marker-end="url(#arrowhead422)" style="fill:none"></path><defs><marker id="arrowhead422" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M218.921875,61L218.921875,86L219.42187499999997,111.50000152587901" marker-end="url(#arrowhead423)" style="fill:none"></path><defs><marker id="arrowhead423" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowheadPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="translate(119.8515625,241.7453155517578)" style="opacity: 1;"><g transform="translate(-13,-10.5)" class="label"><foreignObject width="26" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">true</span></div></foreignObject></g></g><g class="edgeLabel" transform="translate(317.9921875,241.7453155517578)" style="opacity: 1;"><g transform="translate(-15.34375,-10.5)" class="label"><foreignObject width="30.6875" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel">false</span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="statementfroml1c6tol1c19" transform="translate(218.921875,40.5)" style="opacity: 1;"><rect rx="5" ry="5" x="-54.140625" y="-20.5" width="108.28125" height="41"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-44.140625,-10.5)"><foreignObject width="88.28125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">const a = f(x);</div></foreignObject></g></g></g><g class="node" id="statementfroml1c19tol1c90" transform="translate(218.921875,158.6226577758789)" style="opacity: 1;"><polygon points="47.62265625,0 95.2453125,-47.62265625 47.62265625,-95.2453125 0,-47.62265625" rx="5" ry="5" transform="translate(-47.62265625,47.62265625)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-22.4140625,-10.5)"><foreignObject width="44.828125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">x === 0</div></foreignObject></g></g></g><g class="node" id="statementfroml1c29tol1c40" transform="translate(119.8515625,297.7453155517578)" style="opacity: 1;"><rect rx="5" ry="5" x="-46.6875" y="-20.5" width="93.375" height="41"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-36.6875,-10.5)"><foreignObject width="73.375" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">let a = null;</div></foreignObject></g></g></g><g class="node" id="statementfroml1c41tol1c65" transform="translate(119.8515625,388.7453155517578)" style="opacity: 1;"><polygon points="-20.5,0 179.203125,0 179.203125,-41 -20.5,-41 0,-20.5" transform="translate(-89.6015625,20.5)" style="fill:#FF9999;"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-79.6015625,-10.5)"><foreignObject width="159.203125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">throw new Error('Nooes');</div></foreignObject></g></g></g><g class="node" id="statementfroml1c71tol1c81" transform="translate(317.9921875,297.7453155517578)" style="opacity: 1;"><rect rx="5" ry="5" x="-46.3671875" y="-20.5" width="92.734375" height="41"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-36.3671875,-10.5)"><foreignObject width="72.734375" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">const c = 8;</div></foreignObject></g></g></g><g class="node" id="statementfroml1c81tol1c89" transform="translate(317.9921875,388.7453155517578)" style="opacity: 1;"><polygon points="-20.5,0 76.078125,0 76.078125,-41 -20.5,-41 0,-20.5" transform="translate(-38.0390625,20.5)" style="fill:#99FF99;"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-28.0390625,-10.5)"><foreignObject width="56.078125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">return 4;</div></foreignObject></g></g></g></g></g></g></svg>