diagrams
Version:
Generate Flowcharts, Network Sequence, Dot, and Railroad Diagrams
2 lines (1 loc) • 4.46 kB
HTML
<span><svg xmlns="http://www.w3.org/2000/svg" class="railroad-diagram" width="521" height="110" viewBox="0 0 521 110"></span><del> </del><span><br/> <defs><br/> <style type="text/css"><![CDATA[<br/> svg.railroad-diagram {<br/> stroke: rgba(0, 122, 209, 0.95);<br/> }<br/> svg.railroad-diagram path {<br/> stroke-width: 2;<br/> stroke: rgba(0, 122, 209, 0.95);<br/> fill: rgba(0,0,0,0);<br/> }<br/> svg.railroad-diagram text {<br/> font: 14px monospace;<br/> text-anchor: middle;<br/> stroke: black;<br/> }<br/> svg.railroad-diagram text.label {<br/> text-anchor: start;<br/> }<br/> svg.railroad-diagram text.comment {<br/> font: italic 12px monospace;<br/> }<br/> svg.railroad-diagram rect {<br/> stroke-width: 2;<br/> stroke: rgba(0, 122, 209, 0.95);<br/> fill: rgba(0,0,0,0);<br/> }<br/> ]]></style><br/> </defs><br/><br/><g transform="translate(.5 .5)"><br/><path d="M 20 31 v 20 m 10 -20 v 20 m -10 -10 h 20.5"></path><br/><g><br/><path d="M40 41h0"></path><br/><path d="M108 41h0"></path><br/><path d="M40 41h20"></path><br/><g><br/><path d="M60 41h28"></path><br/></g><br/><path d="M88 41h20"></path><br/><path d="M40 41a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><br/><g><br/><path d="M60 61h0"></path><br/><path d="M88 61h0"></path><br/><rect x="60" y="50" width="28" height="22" rx="10" ry="10"></rect><br/><text x="74" y="65">+</text><br/></g><br/><path d="M88 61a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><br/></g><br/><g><br/><path d="M108 41h0"></path><br/><path d="M288 41h0"></path><br/><path d="M108 41h20"></path><br/><g><br/><path d="M128 41h0"></path><br/><path d="M268 41h0"></path><br/><rect x="128" y="30" width="140" height="22"></rect><br/><text x="198" y="45">name-start char</text><br/></g><br/><path d="M268 41h20"></path><br/><path d="M108 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><br/><g><br/><path d="M128 71h36"></path><br/><path d="M232 71h36"></path><br/><rect x="164" y="60" width="68" height="22"></rect><br/><text x="198" y="75">escape</text><br/></g><br/><path d="M268 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><br/></g><br/><g><br/><path d="M288 41h0"></path><br/><path d="M480 41h0"></path><br/><path d="M288 41a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path><br/><g><br/><path d="M308 21h152"></path><br/></g><br/><path d="M460 21a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path><br/><path d="M288 41h20"></path><br/><g><br/><path d="M308 41h0"></path><br/><path d="M460 41h0"></path><br/><path d="M308 41h10"></path><br/><g><br/><path d="M318 41h0"></path><br/><path d="M450 41h0"></path><br/><path d="M318 41h20"></path><br/><g><br/><path d="M338 41h0"></path><br/><path d="M430 41h0"></path><br/><rect x="338" y="30" width="92" height="22"></rect><br/><text x="384" y="45">name char</text><br/></g><br/><path d="M430 41h20"></path><br/><path d="M318 41a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path><br/><g><br/><path d="M338 71h12"></path><br/><path d="M418 71h12"></path><br/><rect x="350" y="60" width="68" height="22"></rect><br/><text x="384" y="75">escape</text><br/></g><br/><path d="M430 71a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path><br/></g><br/><path d="M450 41h10"></path><br/><path d="M318 41a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10"></path><br/><g><br/><path d="M318 90h132"></path><br/></g><br/><path d="M450 90a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10"></path><br/></g><br/><path d="M460 41h20"></path><br/></g><br/><path d="M 480 41 h 20 m -10 -10 v 20 m 10 -20 v 20"></path><br/></g><br/></svg><br/></span>