protocol/images/datatype.svg

<svg class="railroad" viewBox="0 0 566 100" width="452pt" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">

    svg.railroad {
        background-color: hsl(30, 20%, 95%);
        background-size: 15px 15px;
        background-image: linear-gradient(to right, rgba(30, 30, 30, .05) 1px, transparent 1px),
                          linear-gradient(to bottom, rgba(30, 30, 30, .05) 1px, transparent 1px);
    }

    svg.railroad path {
        stroke-width: 3px;
        stroke: black;
        fill: transparent;
    }

    svg.railroad .debug {
        stroke-width: 1px;
        stroke: red;
    }

    svg.railroad text {
        font: 14px monospace;
        text-anchor: middle;
    }

    svg.railroad .nonterminal text {
        font-weight: bold;
    }

    svg.railroad text.comment {
        font: italic 12px monospace;
    }

    svg.railroad rect {
        stroke-width: 3px;
        stroke: black;
        fill:hsl(-290, 70%, 90%);
    }

    svg.railroad g.labeledbox > rect {
        stroke-width: 1px;
        stroke: grey;
        stroke-dasharray: 5px;
        fill:rgba(90, 90, 150, .1);
    }</style>
<g class="verticalgrid">
<g class="horizontalgrid">
<g class="nonterminal">
<rect height="22" width="84" x="10" y="10"/>
<text x="52" y="26">
datainfo</text>
</g>
</g>
<g class="sequence">
<path d=" M 10 50 l 5 5 l -5 5 m 5 -5 h 5"/>
<g class="sequence">
<g class="terminal">
<rect height="22" rx="10" ry="10" width="28" x="30" y="44"/>
<text x="44" y="60">
{</text>
</g>
<g class="terminal">
<rect height="22" rx="10" ry="10" width="76" x="68" y="44"/>
<text x="106" y="60">
&quot;type:&quot;</text>
</g>
<g class="nonterminal">
<rect height="22" width="148" x="154" y="44"/>
<text x="228" y="60">
name of datatype</text>
</g>
<g class="sequence">
<g class="repeat">
<path d=" M 312 55 h 12 m 0 0 h 174 m -84 0 l -5 -5 m 0 10 l 5 -5 m 84 0 m -12 0 a 12 12 0 0 1 12 12 v 0 a 12 12 0 0 1 -12 12 m -162 0 h 0 a 12 12 0 0 1 -12 -12 v 0 a 12 12 0 0 1 12 -12"/>
<g class="sequence">
<g class="nonterminal">
<rect height="22" width="124" x="324" y="68"/>
<text x="386" y="84">
data-property</text>
</g>
<g class="terminal">
<rect height="22" rx="10" ry="10" width="28" x="458" y="68"/>
<text x="472" y="84">
,</text>
</g>
<path d=" M 448 79 h 10"/>
</g>
<g/>
</g>
</g>
<g class="terminal">
<rect height="22" rx="10" ry="10" width="28" x="508" y="44"/>
<text x="522" y="60">
}</text>
</g>
<path d=" M 58 55 h 10"/>
<path d=" M 144 55 h 10"/>
<path d=" M 302 55 h 10"/>
<path d=" M 498 55 h 10"/>
</g>
<path d=" M 546 55 h 5 m -5 5 l 5 -5 l -5 -5 m 5 5"/>
<path d=" M 20 55 h 10"/>
<path d=" M 536 55 h 10"/>
</g>
</g>
</svg>