Syntax Diagram / Railroad

About

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

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
  2. Rail Road Generator: Javascript + svg (not open source)
  3. Railroad-diagrams Javascript + svg
  4. Weltraumschaf/ebnf Php + Image, plugin dokuwiki

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

Example


Powered by ComboStrap