test/output/test.svg

<svg class="railroad-diagram" width="744" height="144" viewBox="0 0 744 144" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(.5 .5)">
<g class="Start">
<path d="M20 78v20m0 -10h20"></path>
</g>
<path d="M40 88h10"></path>
<g class="Group rule">
<path d="M50 88h0"></path>
<path d="M694 88h0"></path>
<rect x="50" y="36" width="644" height="88" rx="10" ry="10" class="group-box"></rect>
<g class="Sequence">
<path d="M50 88h10"></path>
<path d="M684 88h10"></path>
<path d="M182.5 88h10"></path>
<g class="Group rule">
<path d="M60 88h0"></path>
<path d="M182.5 88h0"></path>
<rect x="60" y="60" width="122.5" height="56" rx="10" ry="10" class="group-box"></rect>
<g class="Choice">
<path d="M60 88h0"></path>
<path d="M182.5 88h0"></path>
<path d="M60 88a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path>
<g class="Skip">
<path d="M80 68h82.5"></path>
</g>
<path d="M162.5 68a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path>
<path d="M60 88h20"></path>
<g class="OneOrMore">
<path d="M80 88h0"></path>
<path d="M162.5 88h0"></path>
<path d="M90 88a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path>
<g class="Skip">
<path d="M90 108h62.5"></path>
</g>
<path d="M152.5 108a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path>
<path d="M80 88h10"></path>
<path d="M152.5 88h10"></path>
<g class="terminal class">
<path d="M90 88h0"></path>
<path d="M152.5 88h0"></path>
<rect x="90" y="77" width="62.5" height="22" rx="10" ry="10"></rect>
<text x="121.25" y="92">&#91; \t&#93;</text>
</g>
</g>
<path d="M162.5 88h20"></path>
</g>
<g class="comment">
<path d="M60 52h0"></path>
<path d="M161 52h0"></path>
<text x="110.5" y="57" class="comment">_(whitespace)</text>
</g>
</g>
<path d="M192.5 88h10"></path>
<path d="M256.5 88h10"></path>
<g class="terminal literal">
<path d="M202.5 88h0"></path>
<path d="M256.5 88h0"></path>
<rect x="202.5" y="77" width="54" height="22" rx="10" ry="10"></rect>
<text x="229.5" y="92">"/*"</text>
</g>
<g class="Choice">
<path d="M266.5 88h0"></path>
<path d="M477.5 88h0"></path>
<path d="M266.5 88a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path>
<g class="Skip">
<path d="M286.5 68h171"></path>
</g>
<path d="M457.5 68a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path>
<path d="M266.5 88h20"></path>
<g class="OneOrMore">
<path d="M286.5 88h0"></path>
<path d="M457.5 88h0"></path>
<path d="M296.5 88a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path>
<g class="Skip">
<path d="M296.5 108h151"></path>
</g>
<path d="M447.5 108a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path>
<path d="M286.5 88h10"></path>
<path d="M447.5 88h10"></path>
<g class="Sequence">
<path d="M296.5 88h0"></path>
<path d="M447.5 88h0"></path>
<path d="M399 88h10"></path>
<g class="Sequence">
<path d="M296.5 88h0"></path>
<path d="M399 88h0"></path>
<path d="M325 88h10"></path>
<g class="decision simple-and">
<path d="M296.5 88h0"></path>
<path d="M325 88h0"></path>
<path d="M296.5 88v5.5l5.5 5.5h17.5l5.5 -5.5v-11l-5.5 -5.5h-17.5l-5.5 5.5v5.5"></path>
<text x="310.75" y="92">!</text>
</g>
<path d="M335 88h10"></path>
<g class="terminal literal">
<path d="M345 88h0"></path>
<path d="M399 88h0"></path>
<rect x="345" y="77" width="54" height="22" rx="10" ry="10"></rect>
<text x="372" y="92">"*/"</text>
</g>
</g>
<path d="M409 88h10"></path>
<g class="terminal any">
<path d="M419 88h0"></path>
<path d="M447.5 88h0"></path>
<rect x="419" y="77" width="28.5" height="22" rx="10" ry="10"></rect>
<text x="433.25" y="92">.</text>
</g>
</g>
</g>
<path d="M457.5 88h20"></path>
</g>
<path d="M477.5 88h10"></path>
<path d="M541.5 88h10"></path>
<g class="terminal literal">
<path d="M487.5 88h0"></path>
<path d="M541.5 88h0"></path>
<rect x="487.5" y="77" width="54" height="22" rx="10" ry="10"></rect>
<text x="514.5" y="92">"*/"</text>
</g>
<path d="M551.5 88h10"></path>
<g class="Group rule">
<path d="M561.5 88h0"></path>
<path d="M684 88h0"></path>
<rect x="561.5" y="60" width="122.5" height="56" rx="10" ry="10" class="group-box"></rect>
<g class="Choice">
<path d="M561.5 88h0"></path>
<path d="M684 88h0"></path>
<path d="M561.5 88a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path>
<g class="Skip">
<path d="M581.5 68h82.5"></path>
</g>
<path d="M664 68a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path>
<path d="M561.5 88h20"></path>
<g class="OneOrMore">
<path d="M581.5 88h0"></path>
<path d="M664 88h0"></path>
<path d="M591.5 88a10 10 0 0 0 -10 10v0a10 10 0 0 0 10 10"></path>
<g class="Skip">
<path d="M591.5 108h62.5"></path>
</g>
<path d="M654 108a10 10 0 0 0 10 -10v0a10 10 0 0 0 -10 -10"></path>
<path d="M581.5 88h10"></path>
<path d="M654 88h10"></path>
<g class="terminal class">
<path d="M591.5 88h0"></path>
<path d="M654 88h0"></path>
<rect x="591.5" y="77" width="62.5" height="22" rx="10" ry="10"></rect>
<text x="622.75" y="92">&#91; \t&#93;</text>
</g>
</g>
<path d="M664 88h20"></path>
</g>
<g class="comment">
<path d="M561.5 52h0"></path>
<path d="M662.5 52h0"></path>
<text x="612" y="57" class="comment">_(whitespace)</text>
</g>
</g>
</g>
<g class="comment">
<path d="M50 28h0"></path>
<path d="M109 28h0"></path>
<text x="79.5" y="33" class="comment">Comment</text>
</g>
</g>
<path d="M694 88h10"></path>
<path class="End" d="M 704 88 h 20 m 0 -10 v 20"></path>
</g>
<style>
  svg {
    background-color: hsl(30,20%,95%);
  }
  path {
    stroke-width: 3;
    stroke: black;
    fill: rgba(0,0,0,0);
  }
  text {
    font: bold 14px monospace;
    text-anchor: middle;
    white-space: pre;
  }
  text.diagram-text {
    font-size: 12px;
  }
  text.diagram-arrow {
    font-size: 16px;
  }
  text.label {
    text-anchor: start;
  }
  text.comment {
    font: italic 12px monospace;
  }
  g.non-terminal text {
    /*font-style: italic;*/
  }
  rect {
    stroke-width: 3;
    stroke: black;
    fill: hsl(120,100%,90%);
  }
  rect.group-box {
    stroke: gray;
    stroke-dasharray: 10 5;
    fill: none;
  }
  path.diagram-text {
    stroke-width: 3;
    stroke: black;
    fill: white;
    cursor: help;
  }
  .decision path {
    fill: #ccc;
  }
  g.diagram-text:hover path.diagram-text {
    fill: #eee;
  }
  text.repeat-text {
    font: italic 12px monospace;
    text-anchor: end;
  }
  .repeat-box > rect.group-box {
    stroke: gray;
    stroke-width: 2;
    stroke-dasharray: 1 5;
    fill: none;
  }
  .delimiter > rect.group-box {
    stroke: gray;
    stroke-width: 2;
    stroke-dasharray: 1 5;
    fill: none;
  }
</style>
</svg>