docs/syntax-diagrams/attributes.svg

<svg class="railroad-diagram" height="101" viewBox="0 0 333.5 101" width="333.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 30v20m0 -10h20" /></g><path d="M40 40h10" /><g>
<path d="M50 40h0.0" /><path d="M283.5 40h0.0" /><g class="terminal ">
<path d="M50.0 40h0.0" /><path d="M78.5 40h0.0" /><rect height="22" rx="10" ry="10" width="28.5" x="50" y="29"></rect><text x="64.25" y="44">/</text></g><path d="M78.5 40h10" /><g>
<path d="M88.5 40h0.0" /><path d="M245.0 40h0.0" /><path d="M88.5 40a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10" /><g>
<path d="M108.5 20h116.5" /></g><path d="M225.0 20a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10" /><path d="M88.5 40h20" /><g>
<path d="M108.5 40h0.0" /><path d="M225.0 40h0.0" /><path d="M108.5 40h10" /><g class="non-terminal ">
<path d="M118.5 40h0.0" /><path d="M215.0 40h0.0" /><rect height="22" width="96.5" x="118.5" y="29"></rect><text x="166.75" y="44">attribute</text></g><path d="M215.0 40h10" /><path d="M118.5 40a10 10 0 0 0 -10 10v10a10 10 0 0 0 10 10" /><g class="terminal ">
<path d="M118.5 70h34.0" /><path d="M181.0 70h34.0" /><rect height="22" rx="10" ry="10" width="28.5" x="152.5" y="59"></rect><text x="166.75" y="74">,</text></g><path d="M215.0 70a10 10 0 0 0 10 -10v-10a10 10 0 0 0 -10 -10" /></g><path d="M225.0 40h20" /></g><path d="M245.0 40h10" /><g class="terminal ">
<path d="M255.0 40h0.0" /><path d="M283.5 40h0.0" /><rect height="22" rx="10" ry="10" width="28.5" x="255" y="29"></rect><text x="269.25" y="44">/</text></g></g><path d="M283.5 40h10" /><path d="M 293.5 40 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>