art/placeholder-syntax.svg

<svg class="railroad-diagram" width="762" height="221" viewBox="0 0 762 221" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- https://tabatkins.github.io/railroad-diagrams/generator.html#Diagram(%0A%20%20Terminal('%7B')%2C%0A%20%20NonTerminal('placeholder-name')%2C%0A%20%20Optional(Sequence(%0A%20%20%20%20Terminal('%2C')%2C%0A%20%20%20%20Choice(%0A%20%20%20%20%20%200%2C%0A%20%20%20%20%20%20Terminal('Object')%2C%0A%20%20%20%20%20%20Terminal('String')%2C%0A%20%20%20%20%20%20Sequence(%0A%20%20%20%20%20%20%20%20Terminal('DateTime')%2C%0A%20%20%20%20%20%20%20%20Terminal('%2C')%2C%0A%20%20%20%20%20%20%20%20NonTerminal('date-time-format')%2C%0A%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20Sequence(%0A%20%20%20%20%20%20%20%20Choice(%0A%20%20%20%20%20%20%20%20%20%201%2C%0A%20%20%20%20%20%20%20%20%20%20Terminal('int')%2C%0A%20%20%20%20%20%20%20%20%20%20Terminal('num')%2C%0A%20%20%20%20%20%20%20%20%20%20Terminal('double')%2C%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20Terminal('%2C')%2C%0A%20%20%20%20%20%20%20%20NonTerminal('number-format')%2C%0A%20%20%20%20%20%20)%2C%0A%20%20%20%20)%2C%0A%20%20))%2C%0A%20%20Terminal('%7D')%2C%0A) -->
  <g transform="translate(.5 .5)">
    <g>
      <path d="M20 30v20m10 -20v20m-10 -10h20"></path>
    </g>
    <path d="M40 40h10"></path>
    <g class="terminal ">
      <path d="M50 40h0"></path>
      <path d="M78 40h0"></path>
      <rect x="50" y="29" width="28" height="22" rx="10" ry="10"></rect>
      <text x="64" y="44">{</text>
    </g>
    <path d="M78 40h10"></path>
    <path d="M88 40h10"></path>
    <g class="non-terminal ">
      <path d="M98 40h0"></path>
      <path d="M246 40h0"></path>
      <rect x="98" y="29" width="148" height="22"></rect>
      <text x="172" y="44">placeholder-name</text>
    </g>
    <path d="M246 40h10"></path>
    <g>
      <path d="M256 40h0"></path>
      <path d="M674 40h0"></path>
      <path d="M256 40a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"></path>
      <g>
        <path d="M276 20h378"></path>
      </g>
      <path d="M654 20a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"></path>
      <path d="M256 40h20"></path>
      <g>
        <path d="M276 40h0"></path>
        <path d="M654 40h0"></path>
        <g class="terminal ">
          <path d="M276 40h0"></path>
          <path d="M304 40h0"></path>
          <rect x="276" y="29" width="28" height="22" rx="10" ry="10"></rect>
          <text x="290" y="44">,</text>
        </g>
        <path d="M304 40h10"></path>
        <g>
          <path d="M314 40h0"></path>
          <path d="M654 40h0"></path>
          <path d="M314 40h20"></path>
          <g class="terminal ">
            <path d="M334 40h116"></path>
            <path d="M518 40h116"></path>
            <rect x="450" y="29" width="68" height="22" rx="10" ry="10"></rect>
            <text x="484" y="44">Object</text>
          </g>
          <path d="M634 40h20"></path>
          <path d="M314 40a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path>
          <g class="terminal ">
            <path d="M334 70h116"></path>
            <path d="M518 70h116"></path>
            <rect x="450" y="59" width="68" height="22" rx="10" ry="10"></rect>
            <text x="484" y="74">String</text>
          </g>
          <path d="M634 70a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path>
          <path d="M314 40a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"></path>
          <g>
            <path d="M334 100h0"></path>
            <path d="M634 100h0"></path>
            <g class="terminal ">
              <path d="M334 100h0"></path>
              <path d="M418 100h0"></path>
              <rect x="334" y="89" width="84" height="22" rx="10" ry="10"></rect>
              <text x="376" y="104">DateTime</text>
            </g>
            <path d="M418 100h10"></path>
            <path d="M428 100h10"></path>
            <g class="terminal ">
              <path d="M438 100h0"></path>
              <path d="M466 100h0"></path>
              <rect x="438" y="89" width="28" height="22" rx="10" ry="10"></rect>
              <text x="452" y="104">,</text>
            </g>
            <path d="M466 100h10"></path>
            <path d="M476 100h10"></path>
            <g class="non-terminal ">
              <path d="M486 100h0"></path>
              <path d="M634 100h0"></path>
              <rect x="486" y="89" width="148" height="22"></rect>
              <text x="560" y="104">date-time-format</text>
            </g>
          </g>
          <path d="M634 100a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"></path>
          <path d="M314 40a10 10 0 0 1 10 10v100a10 10 0 0 0 10 10"></path>
          <g>
            <path d="M334 160h5"></path>
            <path d="M629 160h5"></path>
            <g>
              <path d="M339 160h0"></path>
              <path d="M447 160h0"></path>
              <path d="M339 160a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path>
              <g class="terminal ">
                <path d="M359 130h12"></path>
                <path d="M415 130h12"></path>
                <rect x="371" y="119" width="44" height="22" rx="10" ry="10"></rect>
                <text x="393" y="134">int</text>
              </g>
              <path d="M427 130a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path>
              <path d="M339 160h20"></path>
              <g class="terminal ">
                <path d="M359 160h12"></path>
                <path d="M415 160h12"></path>
                <rect x="371" y="149" width="44" height="22" rx="10" ry="10"></rect>
                <text x="393" y="164">num</text>
              </g>
              <path d="M427 160h20"></path>
              <path d="M339 160a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"></path>
              <g class="terminal ">
                <path d="M359 190h0"></path>
                <path d="M427 190h0"></path>
                <rect x="359" y="179" width="68" height="22" rx="10" ry="10"></rect>
                <text x="393" y="194">double</text>
              </g>
              <path d="M427 190a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"></path>
            </g>
            <path d="M447 160h10"></path>
            <g class="terminal ">
              <path d="M457 160h0"></path>
              <path d="M485 160h0"></path>
              <rect x="457" y="149" width="28" height="22" rx="10" ry="10"></rect>
              <text x="471" y="164">,</text>
            </g>
            <path d="M485 160h10"></path>
            <path d="M495 160h10"></path>
            <g class="non-terminal ">
              <path d="M505 160h0"></path>
              <path d="M629 160h0"></path>
              <rect x="505" y="149" width="124" height="22"></rect>
              <text x="567" y="164">number-format</text>
            </g>
          </g>
          <path d="M634 160a10 10 0 0 0 10 -10v-100a10 10 0 0 1 10 -10"></path>
        </g>
      </g>
      <path d="M654 40h20"></path>
    </g>
    <path d="M674 40h10"></path>
    <g class="terminal ">
      <path d="M684 40h0"></path>
      <path d="M712 40h0"></path>
      <rect x="684" y="29" width="28" height="22" rx="10" ry="10"></rect>
      <text x="698" y="44">}</text>
    </g>
    <path d="M712 40h10"></path>
    <path d="M 722 40 h 20 m -10 -10 v 20 m 10 -20 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 {
      /&#42;
      font-style: italic;
      &#42;/
    }

    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;
    }

    g.diagram-text:hover path.diagram-text {
      fill: #eee;
    }
  </style>
</svg>