nus-mtp/sashimi-note

<h3 id="mermaid" class="code-line" data-line-start="1" data-line-end="1">Mermaid</h3>
<pre class="mermaid"><svg id="mermaidChart0" width="100%" height="100%" viewBox="0 0 1630 196"><style type="text/css" title="mermaid-svg-internal-css">/*  */
.section { clear: both; padding: 0px; margin: 0px;}
.section { clear: both; padding: 0px; margin: 0px;}
.section { clear: both; padding: 0px; margin: 0px;}
/*  */
</style><g></g><g class="grid" transform="translate(75, 146)"><g class="tick" transform="translate(148,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 01</text></g><g class="tick" transform="translate(355,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 02</text></g><g class="tick" transform="translate(562,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 03</text></g><g class="tick" transform="translate(770,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 04</text></g><g class="tick" transform="translate(977,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 05</text></g><g class="tick" transform="translate(1184,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 06</text></g><g class="tick" transform="translate(1391,0)" style="opacity: 1;"><line y2="-111" x2="0"></line><text dy="1em" y="3" x="0" fill="#000" stroke="none" font-size="10" style="text-anchor: middle;">w. 07</text></g><path class="domain" d="M0,0V0H1480V0"></path></g><g><rect x="0" y="48" width="1592.5" height="24" class="section section0"></rect><rect x="0" y="72" width="1592.5" height="24" class="section section0"></rect><rect x="0" y="96" width="1592.5" height="24" class="section section1"></rect><rect x="0" y="120" width="1592.5" height="24" class="section section1"></rect></g><g><rect rx="3" ry="3" x="75" y="50" width="888" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="963" y="74" width="592" height="20" class="task  task0"></rect><rect rx="3" ry="3" x="401" y="98" width="355" height="20" class="task  task1"></rect><rect rx="3" ry="3" x="756" y="122" width="710" height="20" class="task  task1"></rect><text font-size="11" x="519" y="63.5" text-height="20" class="taskText taskText0 ">A task           </text><text font-size="11" x="1259" y="87.5" text-height="20" class="taskText taskText0 ">Another task     </text><text font-size="11" x="578.5" y="111.5" text-height="20" class="taskText taskText1 ">Task in sec      </text><text font-size="11" x="1111" y="135.5" text-height="20" class="taskText taskText1 ">anther task      </text></g><g><text x="10" y="74" class="sectionTitle sectionTitle0">Section</text><text x="10" y="122" class="sectionTitle sectionTitle1">Another</text></g><g class="today"><line x1="35646" x2="35646" y1="25" y2="171" class="today"></line></g><text x="815" y="25" class="titleText">A Gantt Diagram</text></svg></pre><pre class="mermaid"><svg id="mermaidChart1"  height="100%" viewBox="0 0 514.8000030517578 205" style="max-width:514.8000030517578px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart1 .node&gt;rect { ; }
#mermaidChart1 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
/*  */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M111.15641025641025,79.25L176,49L249.5,49" marker-end="url(#arrowhead15)" style="fill:none"></path><defs><marker id="arrowhead15" 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="M111.15641025641025,116.25L176,146.5L229,146.5" marker-end="url(#arrowhead16)" style="fill:none"></path><defs><marker id="arrowhead16" 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="M307.5,49L353,49L397.8164136955593,78.93358477856174" marker-end="url(#arrowhead17)" style="fill:none"></path><defs><marker id="arrowhead17" 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="M328,146.5L353,146.5L397.8164155293622,117.56641400348337" marker-end="url(#arrowhead18)" style="fill:none"></path><defs><marker id="arrowhead18" 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" style="opacity: 1;" transform="translate(176,49)"><g transform="translate(-28,-8.5)" class="label"><foreignObject width="56" height="17"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel">Link text</span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="A" transform="translate(71.5,97.75)"><rect rx="0" ry="0" x="-51.5" y="-18.5" width="103" height="37"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-41.5,-8.5)"><foreignObject width="83" height="17"><div style="display: inline-block; white-space: nowrap;" >Square Rect</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="B" transform="translate(278.5,49)"><circle x="-29" y="-18.5" r="29"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-19,-8.5)"><foreignObject width="38" height="17"><div style="display: inline-block; white-space: nowrap;" >Circle</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="C" transform="translate(278.5,146.5)"><rect rx="5" ry="5" x="-49.5" y="-18.5" width="99" height="37"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-39.5,-8.5)"><foreignObject width="79" height="17"><div style="display: inline-block; white-space: nowrap;" >Round Rect</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="D" transform="translate(426.4000015258789,97.75)"><polygon points="48.400000000000006,0 96.80000000000001,-48.400000000000006 48.400000000000006,-96.80000000000001 0,-48.400000000000006" rx="5" ry="5" transform="translate(-48.400000000000006,48.400000000000006)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-32,-8.5)"><foreignObject width="64" height="17"><div style="display: inline-block; white-space: nowrap;" >Rhombus</div></foreignObject></g></g></g></g></g></g></svg></pre><pre class="mermaid"><svg id="mermaidChart2"  height="100%" viewBox="0 0 1260.4249992370605 495" style="max-width:1260.4249992370605px;"><style type="text/css" title="mermaid-svg-internal-css">/*  */
#mermaidChart2 .node&gt;rect { ; }
#mermaidChart2 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart2 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart2 .cluster rect  { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
#mermaidChart2 .green&gt;rect, .green&gt;polygon, .green&gt;circle, .green&gt;ellipse { fill:#9f6; stroke:#333; stroke-width:2px; }
#mermaidChart2 .orange&gt;rect, .orange&gt;polygon, .orange&gt;circle, .orange&gt;ellipse { fill:#f96; stroke:#333; stroke-width:4px; }
/*  */
</style><g><g class="output"><g class="clusters"><g class="cluster" id="subGraph0" style="opacity: 1;" transform="translate(237.21249961853027,237.5)"><rect width="434.42499923706055" height="435" x="-217.21249961853027" y="-217.5"></rect><g class="label"><g transform="translate(0,0)"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ></div></foreignObject></g></g><text x="0" y="-203.5" fill="black" stroke="none" id="mermaidChart2Text" style="text-anchor: middle;"> A subgraph</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M545.9249992370605,134L545.9249992370605,228L545.9249992370605,298.5" marker-end="url(#arrowhead48)" style="fill:none"></path><defs><marker id="arrowhead48" 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="M111.25,134.5L110.75,228L135.38831967213116,314.5" marker-end="url(#arrowhead49)" style="fill:none"></path><defs><marker id="arrowhead49" 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="M292.0201665233059,153.69516728624538L232.17499923706055,228L170.72100387635777,314.5" marker-end="url(#arrowhead50)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead50" 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="M327.4433668331224,178.081635455696L331.42499923706055,228L331.42499923706055,331.5" marker-end="url(#arrowhead51)" style="stroke: #333; stroke-width: 3.5px;fill:none"></path><defs><marker id="arrowhead51" 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="M825.5050612315733,167.44061041760105L769.9249992370605,228L770.4249992370605,323.5" marker-end="url(#arrowhead52)" style="fill:none"></path><defs><marker id="arrowhead52" 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="M920.8449372425478,167.44061041760105L976.4249992370605,228L976.4249992370605,331.5" marker-end="url(#arrowhead53)" style="fill:none"></path><defs><marker id="arrowhead53" 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="M1140.4249992370605,134L1140.4249992370605,228L1140.4249992370605,270" marker-end="url(#arrowhead54)" style="fill:none"></path><defs><marker id="arrowhead54" 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" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform="translate(110.75,228)"><g transform="translate(-49.5,-17)" class="label"><foreignObject width="99" height="34"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel">Two line<br>edge comment</span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel" style="opacity: 1;" transform=""><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;" ><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" style="opacity: 1;" id="od" transform="translate(110.75,115.5)"><polygon points="-18.5,0 93,0 93,-37 -18.5,-37 0,-18.5" transform="translate(-46.5,18.5)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-36.5,-8.5)"><foreignObject width="73" height="17"><div style="display: inline-block; white-space: nowrap;" >Odd shape</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="ro" transform="translate(145.5,350)"><rect rx="5" ry="5" x="-40.5" y="-35.5" width="81" height="71"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-30.5,-25.5)"><foreignObject width="61" height="51"><div style="display: inline-block; white-space: nowrap;" >Rounded<br>square<br>shape</div></foreignObject></g></g></g><g class="node orange" style="opacity: 1;" id="di" transform="translate(321.42499923706055,115.5)"><polygon points="67.60000000000001,0 135.20000000000002,-67.60000000000001 67.60000000000001,-135.20000000000002 0,-67.60000000000001" rx="5" ry="5" transform="translate(-67.60000000000001,67.60000000000001)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-47.5,-17)"><foreignObject width="95" height="34"><div style="display: inline-block; white-space: nowrap;" >Diamond with <br> line break</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="ro2" transform="translate(331.42499923706055,350)"><rect rx="5" ry="5" x="-88" y="-18.5" width="176" height="37"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-78,-8.5)"><foreignObject width="156" height="17"><div style="display: inline-block; white-space: nowrap;" >Rounded square shape</div></foreignObject></g></g></g><g class="node green" style="opacity: 1;" id="sq" transform="translate(545.9249992370605,115.5)"><rect rx="0" ry="0" x="-56.5" y="-18.5" width="113" height="37"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-46.5,-8.5)"><foreignObject width="93" height="17"><div style="display: inline-block; white-space: nowrap;" >Square shape</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="ci" transform="translate(545.9249992370605,350)"><circle x="-51.5" y="-18.5" r="51.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-41.5,-8.5)"><foreignObject width="83" height="17"><div style="display: inline-block; white-space: nowrap;" >Circle shape</div></foreignObject></g></g></g><g class="node green" style="opacity: 1;" id="e" transform="translate(873.1749992370605,115.5)"><circle x="-70.5" y="-35.5" r="70.5"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-60.5,-25.5)"><foreignObject width="121" height="51"><div style="display: inline-block; white-space: nowrap;" >Inner / circle<br>and some odd <br>special characters</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="od3" transform="translate(769.9249992370605,350)"><polygon points="-27,0 218,0 218,-54 -27,-54 0,-27" transform="translate(-109,27)"></polygon><g class="label" transform="translate(0,0)"><g transform="translate(-99,-17)"><foreignObject width="198" height="34"><div style="display: inline-block; white-space: nowrap;" >Really long text with linebreak<br>in an Odd shape</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="f" transform="translate(976.4249992370605,350)"><rect rx="5" ry="5" x="-34" y="-18.5" width="68" height="37"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-24,-8.5)"><foreignObject width="48" height="17"><div style="display: inline-block; white-space: nowrap;" >,.?!+-*ز</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="cyr" transform="translate(1140.4249992370605,115.5)"><rect rx="0" ry="0" x="-32" y="-18.5" width="64" height="37"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-22,-8.5)"><foreignObject width="44" height="17"><div style="display: inline-block; white-space: nowrap;" >Cyrillic</div></foreignObject></g></g></g><g class="node" style="opacity: 1;" id="cyr2" transform="translate(1140.4249992370605,350)"><circle x="-80" y="-18.5" r="80"></circle><g class="label" transform="translate(0,0)"><g transform="translate(-70,-8.5)"><foreignObject width="140" height="17"><div style="display: inline-block; white-space: nowrap;" >Circle shape Начало</div></foreignObject></g></g></g></g></g></g></svg></pre><pre class="mermaid"><svg id="mermaidChart3" width="100%"  height="100%" style="max-width:750px;" viewBox="-50 -10 750 469.140625"><g></g><g><line id="actor0" x1="75" y1="5" x2="75" y2="458.140625" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="75" dy="0">Alice</tspan></text></g><g><line id="actor1" x1="275" y1="5" x2="275" y2="458.140625" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="275" dy="0">Bob</tspan></text></g><g><line id="actor2" x1="475" y1="5" x2="475" y2="458.140625" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="475" dy="0">John</tspan></text></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="93" class="messageText" style="text-anchor: middle;">Hello Bob, how are you?</text><line x1="75" y1="100" x2="275" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="375" y="128" class="messageText" style="text-anchor: middle;">How about you John?</text><line x1="275" y1="135" x2="475" y2="135" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="175" y="163" class="messageText" style="text-anchor: middle;">I am good thanks!</text><line x1="275" y1="170" x2="75" y2="170" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#crosshead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="375" y="198" class="messageText" style="text-anchor: middle;">I am good thanks!</text><line x1="275" y1="205" x2="475" y2="205" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#crosshead)" style="fill: none;"></line></g><g><rect x="500" y="215" fill="#EDF2AE" stroke="#666" width="150" height="88.140625" rx="0" ry="0" class="note"></rect><text x="516" y="239" fill="black" class="noteText"><tspan x="516">Bob thinks a long</tspan><tspan dy="17" x="516">long time, so long</tspan><tspan dy="17" x="516">that the text does</tspan><tspan dy="17" x="516">not fit on a row.</tspan></text></g><g><text x="175" y="331.140625" class="messageText" style="text-anchor: middle;">Checking with John...</text><line x1="275" y1="338.140625" x2="75" y2="338.140625" class="messageLine1" stroke-width="2" stroke="black" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="275" y="366.140625" class="messageText" style="text-anchor: middle;">Yes... John, how are you?</text><line x1="75" y1="373.140625" x2="475" y2="373.140625" class="messageLine0" stroke-width="2" stroke="black" style="fill: none;"></line></g><g><rect x="0" y="393.140625" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="425.640625" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="75" dy="0">Alice</tspan></text></g><g><rect x="200" y="393.140625" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="425.640625" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="275" dy="0">Bob</tspan></text></g><g><rect x="400" y="393.140625" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="425.640625" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="475" dy="0">John</tspan></text></g></svg></pre><pre class="mermaid"><svg id="mermaidChart4" width="100%"  height="100%" style="max-width:450px;" viewBox="-50 -10 450 426"><g></g><g><line id="actor3" x1="75" y1="5" x2="75" y2="415" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="75" dy="0">Alice</tspan></text></g><g><line id="actor4" x1="275" y1="5" x2="275" y2="415" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="275" dy="0">Bob</tspan></text></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="175" y="118" class="messageText" style="text-anchor: middle;">Hello Bob, how are you?</text><line x1="75" y1="125" x2="275" y2="125" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="178" class="messageText" style="text-anchor: middle;">Not so good :(</text><line x1="275" y1="185" x2="75" y2="185" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="175" y="233" class="messageText" style="text-anchor: middle;">Feeling fresh like a daisy</text><line x1="275" y1="240" x2="75" y2="240" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><line x1="65" y1="135" x2="285" y2="135" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="135" x2="285" y2="250" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="250" x2="285" y2="250" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="135" x2="65" y2="250" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="195" x2="285" y2="195" stroke-width="2" stroke="#526e52" class="loopLine" style="stroke-dasharray: 3, 3;"></line><polygon points="65,135 115,135 115,148 106.6,155 65,155" style="fill:#526e52;stroke:none"></polygon><text x="72.5" y="150" fill="white" class="labelText"><tspan x="72.5" fill="white">alt</tspan></text><text x="175" y="150" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175" fill="black">[ is sick ]</tspan></text><text x="175" y="210" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175" fill="black">[ is well ]</tspan></text></g><g><text x="175" y="303" class="messageText" style="text-anchor: middle;">Thanks for asking</text><line x1="275" y1="310" x2="75" y2="310" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><line x1="65" y1="260" x2="285" y2="260" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="285" y1="260" x2="285" y2="320" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="320" x2="285" y2="320" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="65" y1="260" x2="65" y2="320" stroke-width="2" stroke="#526e52" class="loopLine"></line><polygon points="65,260 115,260 115,273 106.6,280 65,280" style="fill:#526e52;stroke:none"></polygon><text x="72.5" y="275" fill="white" class="labelText"><tspan x="72.5" fill="white">opt</tspan></text><text x="175" y="275" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175" fill="black">[ Extra response ]</tspan></text></g><g><line x1="55" y1="75" x2="295" y2="75" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="295" y1="75" x2="295" y2="330" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="55" y1="330" x2="295" y2="330" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="55" y1="75" x2="55" y2="330" stroke-width="2" stroke="#526e52" class="loopLine"></line><polygon points="55,75 105,75 105,88 96.6,95 55,95" style="fill:#526e52;stroke:none"></polygon><text x="62.5" y="90" fill="white" class="labelText"><tspan x="62.5" fill="white">loop</tspan></text><text x="175" y="90" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="175" fill="black">[ Daily query ]</tspan></text></g><g><rect x="0" y="350" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="382.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="75" dy="0">Alice</tspan></text></g><g><rect x="200" y="350" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="382.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="275" dy="0">Bob</tspan></text></g></svg></pre><pre class="mermaid"><svg id="mermaidChart5" width="100%"  height="100%" style="max-width:750px;" viewBox="-50 -10 750 465.140625"><g></g><g><line id="actor5" x1="75" y1="5" x2="75" y2="454.140625" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="0" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="75" dy="0">Alice</tspan></text></g><g><line id="actor6" x1="275" y1="5" x2="275" y2="454.140625" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="200" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="275" dy="0">Bob</tspan></text></g><g><line id="actor7" x1="475" y1="5" x2="475" y2="454.140625" class="actor-line" stroke-width="0.5px" stroke="#999"></line><rect x="400" y="0" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="32.5" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="475" dy="0">John</tspan></text></g><defs><marker id="arrowhead" refX="5" refY="2" markerWidth="6" markerHeight="4" orient="auto"><path d="M 0,0 V 4 L6,2 Z"></path></marker></defs><defs><marker id="crosshead" markerWidth="15" markerHeight="8" orient="auto" refX="16" refY="4"><path fill="black" stroke="#000000" stroke-width="1px" d="M 9,2 V 6 L16,4 Z" style="stroke-dasharray: 0, 0;"></path><path fill="none" stroke="#000000" stroke-width="1px" d="M 0,1 L 6,7 M 6,1 L 0,7" style="stroke-dasharray: 0, 0;"></path></marker></defs><g><text x="275" y="93" class="messageText" style="text-anchor: middle;">Hello John, how are you?</text><line x1="75" y1="100" x2="475" y2="100" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="475" y="153" class="messageText" style="text-anchor: middle;">Fight against hypochondria</text><path d="M 475,160 C 535,150 535,190 475,180" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></path></g><g><line x1="365" y1="110" x2="585" y2="110" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="585" y1="110" x2="585" y2="200" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="365" y1="200" x2="585" y2="200" stroke-width="2" stroke="#526e52" class="loopLine"></line><line x1="365" y1="110" x2="365" y2="200" stroke-width="2" stroke="#526e52" class="loopLine"></line><polygon points="365,110 415,110 415,123 406.6,130 365,130" style="fill:#526e52;stroke:none"></polygon><text x="372.5" y="125" fill="white" class="labelText"><tspan x="372.5" fill="white">loop</tspan></text><text x="475" y="125" fill="black" class="loopText" style="text-anchor: middle;"><tspan x="475" fill="black">[ Healthcheck ]</tspan></text></g><g><rect x="500" y="210" fill="#EDF2AE" stroke="#666" width="150" height="54.140625" rx="0" ry="0" class="note"></rect><text x="516" y="234" fill="black" class="noteText"><tspan x="516">Rational thoughts</tspan><tspan dy="17" x="516">prevail...</tspan></text></g><g><text x="275" y="292.140625" class="messageText" style="text-anchor: middle;">Great!</text><line x1="475" y1="299.140625" x2="75" y2="299.140625" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><text x="375" y="327.140625" class="messageText" style="text-anchor: middle;">How about you?</text><line x1="475" y1="334.140625" x2="275" y2="334.140625" class="messageLine0" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="fill: none;"></line></g><g><text x="375" y="362.140625" class="messageText" style="text-anchor: middle;">Jolly good!</text><line x1="275" y1="369.140625" x2="475" y2="369.140625" class="messageLine1" stroke-width="2" stroke="black" marker-end="url(#arrowhead)" style="stroke-dasharray: 3, 3; fill: none;"></line></g><g><rect x="0" y="389.140625" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="75" y="421.640625" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="75" dy="0">Alice</tspan></text></g><g><rect x="200" y="389.140625" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="275" y="421.640625" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="275" dy="0">Bob</tspan></text></g><g><rect x="400" y="389.140625" fill="#eaeaea" stroke="#666" width="150" height="65" rx="3" ry="3" class="actor"></rect><text x="475" y="421.640625" style="text-anchor: middle;" dominant-baseline="central" alignment-baseline="central" class="actor"><tspan x="475" dy="0">John</tspan></text></g></svg></pre>