art/placeholder-syntax.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="railroad-diagram" width="782" height="221" viewBox="0 0 782 221">
  <!-- 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%20Optional(Sequence(%0A%20%20%20%20%20%20%20%20%20%20Terminal('%2C')%2C%0A%20%20%20%20%20%20%20%20%20%20NonTerminal('number-format')%2C%0A%20%20%20%20%20%20%20%20))%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"/>
    </g>
    <path d="M40 40h10"/>
    <g class="terminal ">
      <path d="M50 40h0"/>
      <path d="M78 40h0"/>
      <rect x="50" y="29" width="28" height="22" rx="10" ry="10"/>
      <text x="64" y="44">{</text>
    </g>
    <path d="M78 40h10"/>
    <path d="M88 40h10"/>
    <g class="non-terminal ">
      <path d="M98 40h0"/>
      <path d="M246 40h0"/>
      <rect x="98" y="29" width="148" height="22"/>
      <text x="172" y="44">placeholder-name</text>
    </g>
    <path d="M246 40h10"/>
    <g>
      <path d="M256 40h0"/>
      <path d="M694 40h0"/>
      <path d="M256 40a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"/>
      <g>
        <path d="M276 20h398"/>
      </g>
      <path d="M674 20a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"/>
      <path d="M256 40h20"/>
      <g>
        <path d="M276 40h0"/>
        <path d="M674 40h0"/>
        <g class="terminal ">
          <path d="M276 40h0"/>
          <path d="M304 40h0"/>
          <rect x="276" y="29" width="28" height="22" rx="10" ry="10"/>
          <text x="290" y="44">,</text>
        </g>
        <path d="M304 40h10"/>
        <g>
          <path d="M314 40h0"/>
          <path d="M674 40h0"/>
          <path d="M314 40h20"/>
          <g class="terminal ">
            <path d="M334 40h126"/>
            <path d="M528 40h126"/>
            <rect x="460" y="29" width="68" height="22" rx="10" ry="10"/>
            <text x="494" y="44">Object</text>
          </g>
          <path d="M654 40h20"/>
          <path d="M314 40a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"/>
          <g class="terminal ">
            <path d="M334 70h126"/>
            <path d="M528 70h126"/>
            <rect x="460" y="59" width="68" height="22" rx="10" ry="10"/>
            <text x="494" y="74">String</text>
          </g>
          <path d="M654 70a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"/>
          <path d="M314 40a10 10 0 0 1 10 10v40a10 10 0 0 0 10 10"/>
          <g>
            <path d="M334 100h10"/>
            <path d="M644 100h10"/>
            <g class="terminal ">
              <path d="M344 100h0"/>
              <path d="M428 100h0"/>
              <rect x="344" y="89" width="84" height="22" rx="10" ry="10"/>
              <text x="386" y="104">DateTime</text>
            </g>
            <path d="M428 100h10"/>
            <path d="M438 100h10"/>
            <g class="terminal ">
              <path d="M448 100h0"/>
              <path d="M476 100h0"/>
              <rect x="448" y="89" width="28" height="22" rx="10" ry="10"/>
              <text x="462" y="104">,</text>
            </g>
            <path d="M476 100h10"/>
            <path d="M486 100h10"/>
            <g class="non-terminal ">
              <path d="M496 100h0"/>
              <path d="M644 100h0"/>
              <rect x="496" y="89" width="148" height="22"/>
              <text x="570" y="104">date-time-format</text>
            </g>
          </g>
          <path d="M654 100a10 10 0 0 0 10 -10v-40a10 10 0 0 1 10 -10"/>
          <path d="M314 40a10 10 0 0 1 10 10v100a10 10 0 0 0 10 10"/>
          <g>
            <path d="M334 160h0"/>
            <path d="M654 160h0"/>
            <g>
              <path d="M334 160h0"/>
              <path d="M442 160h0"/>
              <path d="M334 160a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"/>
              <g class="terminal ">
                <path d="M354 130h12"/>
                <path d="M410 130h12"/>
                <rect x="366" y="119" width="44" height="22" rx="10" ry="10"/>
                <text x="388" y="134">int</text>
              </g>
              <path d="M422 130a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"/>
              <path d="M334 160h20"/>
              <g class="terminal ">
                <path d="M354 160h12"/>
                <path d="M410 160h12"/>
                <rect x="366" y="149" width="44" height="22" rx="10" ry="10"/>
                <text x="388" y="164">num</text>
              </g>
              <path d="M422 160h20"/>
              <path d="M334 160a10 10 0 0 1 10 10v10a10 10 0 0 0 10 10"/>
              <g class="terminal ">
                <path d="M354 190h0"/>
                <path d="M422 190h0"/>
                <rect x="354" y="179" width="68" height="22" rx="10" ry="10"/>
                <text x="388" y="194">double</text>
              </g>
              <path d="M422 190a10 10 0 0 0 10 -10v-10a10 10 0 0 1 10 -10"/>
            </g>
            <g>
              <path d="M442 160h0"/>
              <path d="M654 160h0"/>
              <path d="M442 160a10 10 0 0 0 10 -10v0a10 10 0 0 1 10 -10"/>
              <g>
                <path d="M462 140h172"/>
              </g>
              <path d="M634 140a10 10 0 0 1 10 10v0a10 10 0 0 0 10 10"/>
              <path d="M442 160h20"/>
              <g>
                <path d="M462 160h0"/>
                <path d="M634 160h0"/>
                <g class="terminal ">
                  <path d="M462 160h0"/>
                  <path d="M490 160h0"/>
                  <rect x="462" y="149" width="28" height="22" rx="10" ry="10"/>
                  <text x="476" y="164">,</text>
                </g>
                <path d="M490 160h10"/>
                <path d="M500 160h10"/>
                <g class="non-terminal ">
                  <path d="M510 160h0"/>
                  <path d="M634 160h0"/>
                  <rect x="510" y="149" width="124" height="22"/>
                  <text x="572" y="164">number-format</text>
                </g>
              </g>
              <path d="M634 160h20"/>
            </g>
          </g>
          <path d="M654 160a10 10 0 0 0 10 -10v-100a10 10 0 0 1 10 -10"/>
        </g>
      </g>
      <path d="M674 40h20"/>
    </g>
    <path d="M694 40h10"/>
    <g class="terminal ">
      <path d="M704 40h0"/>
      <path d="M732 40h0"/>
      <rect x="704" y="29" width="28" height="22" rx="10" ry="10"/>
      <text x="718" y="44">}</text>
    </g>
    <path d="M732 40h10"/>
    <path d="M 742 40 h 20 m -10 -10 v 20 m 10 -20 v 20"/>
  </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;
	}
	g.diagram-text:hover path.diagram-text {
		fill: #eee;
	}</style>
</svg>