What is a Railroad Diagram? known as Syntax diagram

About

A Railroad is a diagram that permits to visualize a grammar (Same as a process flow)

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>

Structure

A Railroad diagram is made of:

• a main diagram
• a set of syntax diagrams.

Each diagram has an entry point and an endpoint.

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

It describes possible paths going through :

• non-terminals
• and terminals.

To belong to the language, an expression must describe a path starting from the main diagram.

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/
6. h2 - java class

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

Example

• CSS Syntax Module Level 3 Token Railroad Diagrams