Syntax Diagram / Railroad

1 - About

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

3 - 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.

4 - Example

With RRDiagram and BNF syntax


<pre class="BNF">
H2_SELECT = 
'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>


.rrConnector {fill:none;stroke:#222222;}
.rrRule {fill:#d3f0ff;stroke:#222222;}
.rrRuleText {fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;}
.rrLiteral {fill:#90d9ff;stroke:#222222;}
.rrLiteralText {fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;}
.rrSpecialSequence {fill:#e4f4ff;stroke:#222222;}
.rrSpecialSequenceText {fill:#000000;font-family:Verdana,Sans-serif;font-size:12px;}
.rrLoopCardinalities {fill:#000000;font-family:Verdana,Sans-serif;font-size:10px;}


var bnfDisplay = new rrdiagram.bnfdisplay.BNFDisplay();
bnfDisplay.replaceBNF('BNF', 'BNFSVG');

5 - 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

6 - Example


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap