sashimi-webapp/test/unit/specs/logic/reference/diagrams/seqDiagramsOutput.txt
<h2 id="uml-diagrams">UML Diagrams</h2>
<h3 id="sequence-diagrams">Sequence Diagrams</h3>
<p>You can render sequence diagrams like this:</p>
<pre class="sequence"><svg width="645px" height="346px" class="sequence simple"><desc></desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"></g><g class="actor"><rect x="155" y="20" width="70" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="165" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="165">Alice</tspan></text></g><g class="actor"><rect x="155" y="288" width="70" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="165" y="312" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="165">Alice</tspan></text></g><line x1="190" x2="190" y1="58" y2="288" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="415" y="20" width="50" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="425" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="425">Bob</tspan></text></g><g class="actor"><rect x="415" y="288" width="50" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="425" y="312" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="425">Bob</tspan></text></g><line x1="440" x2="440" y1="58" y2="288" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="signal"><text x="200" y="88" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="200">Hello Bob, how are you?</tspan></text><line x1="190" x2="440" y1="96" y2="96" stroke="#000000" fill="none" style="stroke-width: 2px; marker-end: url(#markerArrowBlock);"></line></g><g class="note"><rect x="460" y="116" width="110" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="465" y="135" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="465">Bob thinks</tspan></text></g><g class="signal"><text x="230" y="174" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="230">I am good thanks!</tspan></text><line x1="440" x2="190" y1="182" y2="182" stroke="#000000" fill="none" style="stroke-width: 2px; stroke-dasharray: 6px, 2px; marker-end: url(#markerArrowBlock);"></line></g><g class="note"><rect x="20" y="202" width="150" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="25" y="221" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="25">Alice responds</tspan></text></g><g class="signal"><text x="215" y="260" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="215">Where have you been?</tspan></text><line x1="190" x2="440" y1="268" y2="268" stroke="#000000" fill="none" style="stroke-width: 2px; marker-end: url(#markerArrowBlock);"></line></g></svg></pre><pre class="sequence"><svg width="490px" height="203.203125px" class="sequence simple"><desc></desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"></g><g class="actor"><rect x="10" y="20" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="20" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="20">C</tspan></text></g><g class="actor"><rect x="10" y="145.203125" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="20" y="169.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="20">C</tspan></text></g><line x1="25" x2="25" y1="58" y2="145.203125" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="60" y="20" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="70" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="70">B</tspan></text></g><g class="actor"><rect x="60" y="145.203125" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="70" y="169.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="70">B</tspan></text></g><line x1="75" x2="75" y1="58" y2="145.203125" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="110" y="20" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="120" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="120">A</tspan></text></g><g class="actor"><rect x="110" y="145.203125" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="120" y="169.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="120">A</tspan></text></g><line x1="125" x2="125" y1="58" y2="145.203125" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="note"><rect x="145" y="78" width="280" height="47.203125" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="150" y="97" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="150">By listing the participants</tspan><tspan dy="1.2em" x="150">you can change their order</tspan></text></g></svg></pre><pre class="sequence"><svg width="415px" height="366.40625px" class="sequence simple"><desc></desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"></g><g class="actor"><rect x="145" y="20" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="155" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="155">A</tspan></text></g><g class="actor"><rect x="145" y="308.40625" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="155" y="332.40625" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="155">A</tspan></text></g><line x1="160" x2="160" y1="58" y2="308.40625" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="355" y="20" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="365" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="365">B</tspan></text></g><g class="actor"><rect x="355" y="308.40625" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="365" y="332.40625" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="365">B</tspan></text></g><line x1="370" x2="370" y1="58" y2="308.40625" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="note"><rect x="20" y="78" width="120" height="47.203125" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="25" y="97" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="25">Note to the</tspan><tspan dy="1.2em" x="25">left of A</tspan></text></g><g class="note"><rect x="180" y="145.203125" width="120" height="47.203125" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="185" y="164.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="185">Note to the</tspan><tspan dy="1.2em" x="185">right of A</tspan></text></g><g class="note"><rect x="100" y="212.40625" width="120" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="105" y="231.40625" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="105">Note over A</tspan></text></g><g class="note"><rect x="150" y="260.40625" width="230" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="155" y="279.40625" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="155">Note over both A and B</tspan></text></g></svg></pre><pre class="sequence"><svg width="450px" height="316px" class="sequence simple"><desc>Here is a title</desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"><rect x="10" y="10" width="160" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="15" y="29" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="15">Here is a title</tspan></text></g><g class="actor"><rect x="10" y="48" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="20" y="72" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="20">A</tspan></text></g><g class="actor"><rect x="10" y="258" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="20" y="282" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="20">A</tspan></text></g><line x1="25" x2="25" y1="86" y2="258" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="140" y="48" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="150" y="72" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="150">B</tspan></text></g><g class="actor"><rect x="140" y="258" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="150" y="282" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="150">B</tspan></text></g><line x1="155" x2="155" y1="86" y2="258" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="270" y="48" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="280" y="72" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="280">C</tspan></text></g><g class="actor"><rect x="270" y="258" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="280" y="282" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="280">C</tspan></text></g><line x1="285" x2="285" y1="86" y2="258" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="390" y="48" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="400" y="72" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="400">D</tspan></text></g><g class="actor"><rect x="390" y="258" width="30" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="400" y="282" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="400">D</tspan></text></g><line x1="405" x2="405" y1="86" y2="258" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="signal"><text x="35" y="116" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="35">Normal line</tspan></text><line x1="25" x2="155" y1="124" y2="124" stroke="#000000" fill="none" style="stroke-width: 2px; marker-end: url(#markerArrowBlock);"></line></g><g class="signal"><text x="165" y="154" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="165">Dashed line</tspan></text><line x1="155" x2="285" y1="162" y2="162" stroke="#000000" fill="none" style="stroke-width: 2px; stroke-dasharray: 6px, 2px; marker-end: url(#markerArrowBlock);"></line></g><g class="signal"><text x="295" y="192" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="295">Open arrow</tspan></text><line x1="285" x2="405" y1="200" y2="200" stroke="#000000" fill="none" style="stroke-width: 2px; marker-end: url(#markerArrowOpen);"></line></g><g class="signal"><text x="130" y="230" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="130">Dashed open arrow</tspan></text><line x1="405" x2="25" y1="238" y2="238" stroke="#000000" fill="none" style="stroke-width: 2px; stroke-dasharray: 6px, 2px; marker-end: url(#markerArrowOpen);"></line></g></svg></pre><pre class="sequence"><svg width="475px" height="317.203125px" class="sequence simple"><desc></desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"></g><g class="actor"><rect x="10" y="20" width="80" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="20" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="20">Andrew</tspan></text></g><g class="actor"><rect x="10" y="259.203125" width="80" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="20" y="283.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="20">Andrew</tspan></text></g><line x1="50" x2="50" y1="58" y2="259.203125" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="actor"><rect x="205" y="20" width="70" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="215" y="44" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="215">China</tspan></text></g><g class="actor"><rect x="205" y="259.203125" width="70" height="38" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="215" y="283.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="215">China</tspan></text></g><line x1="240" x2="240" y1="58" y2="259.203125" stroke="#000000" fill="none" style="stroke-width: 2px;"></line><g class="signal"><text x="95" y="88" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="95">Says Hello</tspan></text><line x1="50" x2="240" y1="96" y2="96" stroke="#000000" fill="none" style="stroke-width: 2px; marker-end: url(#markerArrowBlock);"></line></g><g class="note"><rect x="260" y="116" width="130" height="47.203125" stroke="#000000" fill="#ffffff" style="stroke-width: 2px;"></rect><text x="265" y="135" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="265">China thinks</tspan><tspan dy="1.2em" x="265">about it</tspan></text></g><g class="signal"><text x="85" y="193.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="85">How are you?</tspan></text><line x1="240" x2="50" y1="201.203125" y2="201.203125" stroke="#000000" fill="none" style="stroke-width: 2px; stroke-dasharray: 6px, 2px; marker-end: url(#markerArrowBlock);"></line></g><g class="signal"><text x="60" y="231.203125" style="font-size: 16px; font-family: 'Andale Mono', monospace;"><tspan x="60">I am good thanks!</tspan></text><line x1="50" x2="240" y1="239.203125" y2="239.203125" stroke="#000000" fill="none" style="stroke-width: 2px; marker-end: url(#markerArrowOpen);"></line></g></svg></pre>