JSON.org Railroad Diagrams

by Paulo Ávila

HTML

<script src="https://github.com/tabatkins/railroad-diagrams/raw/master/railroad-diagrams.js"></script>
<h1>Object</h1>
<script>
Diagram(
    Terminal('{'),
    Choice(0,
        Skip(),
        Choice(0,
            Sequence(
                OneOrMore(
                    Sequence(
                        NonTerminal('string'),
                        Terminal(':'),
                        NonTerminal('value')
                    ),
                    Terminal(',')
                )
            )
        )
    ),
    Terminal('}')
).addTo();
</script>

<h1>Array</h1>
<script>
Diagram(
    Terminal('['),
    Choice(0,
        Skip(),
        OneOrMore(
            NonTerminal('value'),
            Terminal(',')
        )
    ),
    Terminal(']')
).addTo();
</script>

<h1>Value</h1>
<script>
Diagram(
    Choice(0,
        NonTerminal('string'),
        NonTerminal('number'),
        NonTerminal('object'),
        NonTerminal('array'),
        Terminal('true'),
        Terminal('false'),
        Terminal('null')
    )
).addTo();
</script>

<h1>String</h1>
<script>
Diagram(
    Terminal('"'),
    Choice(0,
        Skip(),
        OneOrMore(
            Choice(1,
                NonTerminal('Any UNICODE character except " or \\ or control character'),
                Sequence(
                    Terminal('\\'),
                    Choice(2,
                        Sequence(Terminal('"'), Comment('quotation mark')),
                        Sequence(Terminal('\\'), Comment('reverse solidus')),
                        Sequence(Terminal('/'), Comment('solidus')),
                        Sequence(Terminal('b'), Comment('backspace')),
                        Sequence(Terminal('f'), Comment('formfeed')),
                        Sequence(Terminal('n'), Comment('newline')),
                        Sequence(Terminal('r'), Comment('carriage return')),
                        Sequence(Terminal('t'), Comment('horizontal tab')),
                        Sequence(Terminal('u'),...

CSS

h1 { font-family: sans-serif; font-size: 1em; }

JavaScript

// https://github.com/tabatkins/railroad-diagrams
// http://dev.w3.org/csswg/css3-syntax/#token-diagrams