docs/syntax-diagrams/flags.svg

<svg class="railroad-diagram" height="130" viewBox="0 0 188.5 130" width="188.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(.5 .5)">
<g>
<path d="M20 51v20m0 -10h20" /></g><path d="M40 61h10" /><g>
<path d="M50 61h0.0" /><path d="M138.5 61h0.0" /><path d="M50.0 61h10" /><g>
<path d="M60.0 61h0.0" /><path d="M128.5 61h0.0" /><path d="M60.0 61a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10" /><g class="terminal ">
<path d="M80.0 31h0.0" /><path d="M108.5 31h0.0" /><rect height="22" rx="10" ry="10" width="28.5" x="80" y="20"></rect><text x="94.25" y="35">+</text></g><path d="M108.5 31a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10" /><path d="M60.0 61h20" /><g class="terminal ">
<path d="M80.0 61h0.0" /><path d="M108.5 61h0.0" /><rect height="22" rx="10" ry="10" width="28.5" x="80" y="50"></rect><text x="94.25" y="65">~</text></g><path d="M108.5 61h20" /><path d="M60.0 61a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10" /><g class="terminal ">
<path d="M80.0 91h0.0" /><path d="M108.5 91h0.0" /><rect height="22" rx="10" ry="10" width="28.5" x="80" y="80"></rect><text x="94.25" y="95">?</text></g><path d="M108.5 91a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10" /></g><path d="M128.5 61h10" /><path d="M60.0 61a10 10 0 0 0 -10 10v29a10 10 0 0 0 10 10" /><g>
<path d="M60.0 110h68.5" /></g><path d="M128.5 110a10 10 0 0 0 10 -10v-29a10 10 0 0 0 -10 -10" /></g><path d="M138.5 61h10" /><path d="M 148.5 61 h 20 m 0 -10 v 20"></path></g><style>/* <![CDATA[ */
:root {
  --line-colour: rgb(48 48 48);
  --line-width: 2px;
  --cell-bg-colour: rgb(227 247 255);
  --cell-text-colour: rgb(20 20 20);
  --font-monospace: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
  --font-sans: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --group-colour: gray;
}
@media (prefers-color-scheme: dark) {
  :root {
    --line-colour: rgb(173, 186, 199);
    --cell-bg-colour: rgb(50 67 88);
    --cell-text-colour: rgb(217 225 235);
    --group-colour: gray;
  }
}

svg.railroad-diagram path {
  stroke-width: var(--line-width);
  stroke: var(--line-colour);
  fill: rgba(0, 0, 0, 0);
}

svg.railroad-diagram text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  text-anchor: middle;
  white-space: pre;
  fill: var(--cell-text-colour);
}

svg.railroad-diagram text.diagram-text {
  font-size: 12px;
}

svg.railroad-diagram text.diagram-arrow {
  font-size: 16px;
}

svg.railroad-diagram text.label {
  text-anchor: start;
}

svg.railroad-diagram g.terminal text {
  font-family: var(--font-monospace);
  transform: translate(0px, 0.5px);
}
svg.railroad-diagram g.non-terminal text {
  transform: translate(0px, 1px);
}

svg.railroad-diagram g.non-terminal text.comment,
svg.railroad-diagram g.terminal text.comment,
svg.railroad-diagram text.comment {
  font-style: italic;
  font-size: 12px;
  transform: translate(0px, -2px);
}

svg.railroad-diagram rect {
  stroke-width: var(--line-width);
  stroke: var(--line-colour);
  fill: var(--cell-bg-colour);
}

svg.railroad-diagram rect.group-box {
  stroke: var(--group-colour);
  stroke-dasharray: 2 4;
  stroke-width: 1.5px;
  fill: none;
}

/* ]]> */
</style></svg>