Syntax Diagram / Railroad

About

A Railroad is a diagram that permits to visualize a grammar. Same as Process - Flow Chart

Articles Related

Structure

A Railroad diagram is made of:

• a main diagram
• a set of syntax diagrams.

Each diagram has an entry point and an end point.

• Terminals are represented by round boxes
• Non-terminals are represented by square boxes.

It's describes possible paths going through other non-terminals and terminals. To belong to the language, an expression must describe a path starting form the main diagram.

Example

With RRDiagram and BNF syntax of H2 select SQL

<pre class="BNF">
'SELECT' [ 'TOP' term ] [ 'DISTINCT' | 'ALL' ] selectExpression {',' selectExpression} \
'FROM' tableExpression {',' tableExpression} [ 'WHERE' expression ] \
[ 'GROUP BY' expression {',' expression} ] [ 'HAVING' expression ] \
[ ( 'UNION' [ 'ALL' ] | 'MINUS' | 'EXCEPT' | 'INTERSECT' ) select ] [ 'ORDER BY' order {',' order} ] \
[ 'LIMIT' expression [ 'OFFSET' expression ] [ 'SAMPLE_SIZE' rowCountInt ] ] \
[ 'FOR UPDATE' ];
</pre>

Library

1. RRDiagram
   1. Java: https://github.com/Chrriis/RRDiagram (Used by JOOQ)
   2. Js: https://github.com/Chrriis/rrdiagram-js
2. Rail Road Generator: Javascript + svg (not open source)
3. Railroad-diagrams Javascript + svg
4. Weltraumschaf/ebnf Php + Image, plugin dokuwiki
5. http://www.graphviz.org/

Others: https://npm.io/search/keyword:railroad

Example

• CSS Syntax Module Level 3 Token Railroad Diagrams