examples/flow-chart.svg

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='233' width='728' font-family='Menlo,Lucida Console,monospace'>
<style type="text/css">
svg {
   color: #000000;
}
@media (prefers-color-scheme: dark) {
   svg {
      color-scheme: dark; /* ask the browser for a dark background */
      color: #FFFFFF;
   }
}
</style>
<g transform='translate(8,16)'>
<path d='M 32,16 L 96,16' fill='none' stroke='currentColor'></path>
<path d='M 392,32 L 408,32' fill='none' stroke='currentColor'></path>
<path d='M 408,32 L 472,32' fill='none' stroke='currentColor'></path>
<path d='M 472,32 L 488,32' fill='none' stroke='currentColor'></path>
<path d='M 32,48 L 64,48' fill='none' stroke='currentColor'></path>
<path d='M 64,48 L 96,48' fill='none' stroke='currentColor'></path>
<path d='M 152,48 L 200,48' fill='none' stroke='currentColor'></path>
<path d='M 224,64 L 272,64' fill='none' stroke='currentColor'></path>
<path d='M 336,64 L 384,64' fill='none' stroke='currentColor'></path>
<path d='M 488,64 L 520,64' fill='none' stroke='currentColor'></path>
<path d='M 640,64 L 672,64' fill='none' stroke='currentColor'></path>
<path d='M 152,80 L 200,80' fill='none' stroke='currentColor'></path>
<path d='M 32,96 L 112,96' fill='none' stroke='currentColor'></path>
<path d='M 392,96 L 408,96' fill='none' stroke='currentColor'></path>
<path d='M 408,96 L 440,96' fill='none' stroke='currentColor'></path>
<path d='M 440,96 L 472,96' fill='none' stroke='currentColor'></path>
<path d='M 472,96 L 488,96' fill='none' stroke='currentColor'></path>
<path d='M 16,128 L 64,128' fill='none' stroke='currentColor'></path>
<path d='M 64,128 L 96,128' fill='none' stroke='currentColor'></path>
<path d='M 16,176 L 112,176' fill='none' stroke='currentColor'></path>
<path d='M 256,176 L 304,176' fill='none' stroke='currentColor'></path>
<path d='M 304,176 L 352,176' fill='none' stroke='currentColor'></path>
<path d='M 112,192 L 248,192' fill='none' stroke='currentColor'></path>
<path d='M 360,192 L 416,192' fill='none' stroke='currentColor'></path>
<path d='M 16,208 L 112,208' fill='none' stroke='currentColor'></path>
<path d='M 256,208 L 352,208' fill='none' stroke='currentColor'></path>
<path d='M 540,40 L 628,40' fill='none' stroke='currentColor'></path>
<path d='M 540,88 L 628,88' fill='none' stroke='currentColor'></path>
<path d='M 16,176 L 16,208' fill='none' stroke='currentColor'></path>
<path d='M 64,48 L 64,80' fill='none' stroke='currentColor'></path>
<path d='M 64,128 L 64,160' fill='none' stroke='currentColor'></path>
<path d='M 112,176 L 112,192' fill='none' stroke='currentColor'></path>
<path d='M 112,192 L 112,208' fill='none' stroke='currentColor'></path>
<path d='M 256,176 L 256,208' fill='none' stroke='currentColor'></path>
<path d='M 304,144 L 304,176' fill='none' stroke='currentColor'></path>
<path d='M 352,176 L 352,208' fill='none' stroke='currentColor'></path>
<path d='M 392,32 L 392,96' fill='none' stroke='currentColor'></path>
<path d='M 408,32 L 408,96' fill='none' stroke='currentColor'></path>
<path d='M 472,32 L 472,96' fill='none' stroke='currentColor'></path>
<path d='M 488,32 L 488,64' fill='none' stroke='currentColor'></path>
<path d='M 488,64 L 488,96' fill='none' stroke='currentColor'></path>
<path d='M 16,128 L 32,96' fill='none' stroke='currentColor'></path>
<path d='M 96,128 L 112,96' fill='none' stroke='currentColor'></path>
<path d='M 272,64 L 304,0' fill='none' stroke='currentColor'></path>
<path d='M 304,128 L 336,64' fill='none' stroke='currentColor'></path>
<path d='M 528,64 L 540,40' fill='none' stroke='currentColor'></path>
<path d='M 628,88 L 640,64' fill='none' stroke='currentColor'></path>
<path d='M 272,64 L 304,128' fill='none' stroke='currentColor'></path>
<path d='M 304,0 L 336,64' fill='none' stroke='currentColor'></path>
<path d='M 528,64 L 540,88' fill='none' stroke='currentColor'></path>
<path d='M 628,40 L 640,64' fill='none' stroke='currentColor'></path>
<path d='M 64,80 L 64,88' fill='none' stroke='currentColor'></path>
<polygon points='80.000000,80.000000 68.000000,74.400002 68.000000,85.599998' fill='currentColor' transform='rotate(90.000000, 64.000000, 80.000000)'></polygon>
<path d='M 64,160 L 64,168' fill='none' stroke='currentColor'></path>
<polygon points='80.000000,160.000000 68.000000,154.399994 68.000000,165.600006' fill='currentColor' transform='rotate(90.000000, 64.000000, 160.000000)'></polygon>
<polygon points='232.000000,64.000000 220.000000,58.400002 220.000000,69.599998' fill='currentColor' transform='rotate(180.000000, 224.000000, 64.000000)'></polygon>
<polygon points='256.000000,192.000000 244.000000,186.399994 244.000000,197.600006' fill='currentColor' transform='rotate(0.000000, 248.000000, 192.000000)'></polygon>
<path d='M 304,136 L 304,144' fill='none' stroke='currentColor'></path>
<polygon points='320.000000,144.000000 308.000000,138.399994 308.000000,149.600006' fill='currentColor' transform='rotate(270.000000, 304.000000, 144.000000)'></polygon>
<polygon points='368.000000,192.000000 356.000000,186.399994 356.000000,197.600006' fill='currentColor' transform='rotate(180.000000, 360.000000, 192.000000)'></polygon>
<polygon points='392.000000,64.000000 380.000000,58.400002 380.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 384.000000, 64.000000)'></polygon>
<polygon points='528.000000,64.000000 516.000000,58.400002 516.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 520.000000, 64.000000)'></polygon>
<polygon points='680.000000,64.000000 668.000000,58.400002 668.000000,69.599998' fill='currentColor' transform='rotate(0.000000, 672.000000, 64.000000)'></polygon>
<path d='M 32,16 A 16,16 0 0,0 16,32' fill='none' stroke='currentColor'></path>
<path d='M 96,16 A 16,16 0 0,1 112,32' fill='none' stroke='currentColor'></path>
<path d='M 16,32 A 16,16 0 0,0 32,48' fill='none' stroke='currentColor'></path>
<path d='M 112,32 A 16,16 0 0,1 96,48' fill='none' stroke='currentColor'></path>
<path d='M 152,48 A 16,16 0 0,0 136,64' fill='none' stroke='currentColor'></path>
<path d='M 200,48 A 16,16 0 0,1 216,64' fill='none' stroke='currentColor'></path>
<path d='M 696,48 A 16,16 0 0,0 680,64' fill='none' stroke='currentColor'></path>
<path d='M 696,48 A 16,16 0 0,1 712,64' fill='none' stroke='currentColor'></path>
<path d='M 136,64 A 16,16 0 0,0 152,80' fill='none' stroke='currentColor'></path>
<path d='M 216,64 A 16,16 0 0,1 200,80' fill='none' stroke='currentColor'></path>
<path d='M 680,64 A 16,16 0 0,0 696,80' fill='none' stroke='currentColor'></path>
<path d='M 712,64 A 16,16 0 0,1 696,80' fill='none' stroke='currentColor'></path>
<path d='M 432,176 A 16,16 0 0,0 416,192' fill='none' stroke='currentColor'></path>
<path d='M 432,176 A 16,16 0 0,1 448,192' fill='none' stroke='currentColor'></path>
<path d='M 416,192 A 16,16 0 0,0 432,208' fill='none' stroke='currentColor'></path>
<path d='M 448,192 A 16,16 0 0,1 432,208' fill='none' stroke='currentColor'></path>
<style>
  text {
       text-anchor: middle;
       font-family: "Menlo","Lucida Console","monospace";
       fill: currentColor;
       font-size: 1em;
  }
</style>
<text x='48' y='36'>S</text>
<text x='56' y='36'>T</text>
<text x='64' y='36'>A</text>
<text x='72' y='36'>R</text>
<text x='80' y='36'>T</text>
<text x='248' y='52'>A</text>
<text x='360' y='52'>B</text>
<text x='416' y='52'>C</text>
<text x='424' y='52'>O</text>
<text x='432' y='52'>M</text>
<text x='440' y='52'>P</text>
<text x='448' y='52'>L</text>
<text x='456' y='52'>E</text>
<text x='464' y='52'>X</text>
<text x='168' y='68'>E</text>
<text x='176' y='68'>N</text>
<text x='184' y='68'>D</text>
<text x='280' y='68'>C</text>
<text x='288' y='68'>H</text>
<text x='296' y='68'>O</text>
<text x='304' y='68'>I</text>
<text x='312' y='68'>C</text>
<text x='320' y='68'>E</text>
<text x='544' y='68'>P</text>
<text x='552' y='68'>R</text>
<text x='560' y='68'>E</text>
<text x='568' y='68'>P</text>
<text x='576' y='68'>A</text>
<text x='584' y='68'>R</text>
<text x='592' y='68'>A</text>
<text x='600' y='68'>T</text>
<text x='608' y='68'>I</text>
<text x='616' y='68'>O</text>
<text x='624' y='68'>N</text>
<text x='696' y='68'>X</text>
<text x='416' y='84'>P</text>
<text x='424' y='84'>R</text>
<text x='432' y='84'>O</text>
<text x='440' y='84'>C</text>
<text x='448' y='84'>E</text>
<text x='456' y='84'>S</text>
<text x='464' y='84'>S</text>
<text x='48' y='116'>I</text>
<text x='56' y='116'>N</text>
<text x='64' y='116'>P</text>
<text x='72' y='116'>U</text>
<text x='80' y='116'>T</text>
<text x='40' y='196'>P</text>
<text x='48' y='196'>R</text>
<text x='56' y='196'>O</text>
<text x='64' y='196'>C</text>
<text x='72' y='196'>E</text>
<text x='80' y='196'>S</text>
<text x='88' y='196'>S</text>
<text x='280' y='196'>P</text>
<text x='288' y='196'>R</text>
<text x='296' y='196'>O</text>
<text x='304' y='196'>C</text>
<text x='312' y='196'>E</text>
<text x='320' y='196'>S</text>
<text x='328' y='196'>S</text>
<text x='432' y='196'>X</text>
</g>
</svg>