, Railroad Diagram Generator,

v1.54.1745 Nov 21, 2018
R R written by
Gunther Rademacher

Download diagram
SVG  single XHTML page with
embedded SVG graphics
PNG  zip file containing HTML
and linked PNG images

Welcome to Railroad Diagram Generator!

This is a tool for creating syntax diagrams, also known as railroad diagrams, from context-free grammars specified in EBNF. Syntax diagrams have been used for decades now, so the concept is well-known, and some tools for diagram generation are in existence. The features of this one are

  • usage of the W3C's EBNF notation,
  • web-scraping of grammars from W3C specifications,
  • online editing of grammars,
  • diagram presentation in SVG,
  • and it was completely written in web languages (XQuery, XHTML, CSS, JavaScript).


For the original description of the EBNF notation as it is used here, please refer to "A.1.1 Notation" in the XQuery recommendation. The XML recommendation contains a similar section, "6 Notation". Below is a self-describing grammar for the EBNF notation.

Grammar ::= Production*
Production ::= NCName '::=' ( Choice | Link )
NCName ::= [http://www.w3.org/TR/xml-names/#NT-NCName]
Choice ::= SequenceOrDifference ( '|' SequenceOrDifference )*
SequenceOrDifference ::= (Item ( '-' Item | Item* ))?
Item ::= Primary ( '?' | '*' | '+' )?
Primary ::= NCName | StringLiteral | CharCode | CharClass | '(' Choice ')'
StringLiteral ::= '"' [^"]* '"' | "'" [^']* "'" /* ws: explicit */
CharCode ::= '#x' [0-9a-fA-F]+ /* ws: explicit */
CharClass ::= '[' '^'? ( Char | CharCode | CharRange | CharCodeRange )+ ']' /* ws: explicit */
Char ::= [http://www.w3.org/TR/xml#NT-Char]
CharRange ::= Char '-' ( Char - ']' ) /* ws: explicit */
CharCodeRange ::= CharCode '-' CharCode /* ws: explicit */
Link ::= '[' URL ']'
URL ::= [^#x5D:/?#]+ '://' [^#x5D#]+ ('#' NCName)? /* ws: explicit */
Whitespace ::= S | Comment
S ::= #x9 | #xA | #xD | #x20
Comment ::= '/*' ( [^*] | '*'+ [^*/] )* '*'* '*/' /* ws: explicit */

For viewing railroad diagrams of this very grammar, either

  • select "EBNF Notation" from the "Get Grammar" tab,
  • or copy and paste the above grammar to the "Edit Grammar" tab,
and then proceed to the "View Diagram" tab. Or just click here for a shortcut.

From this website:

EBNF Notation

From W3C specifications:

Extensible Markup Language (XML) 1.0 http://www.w3.org/TR/xml/
Namespaces in XML 1.0 http://www.w3.org/TR/xml-names/
XML Path Language (XPath) 1.0 http://www.w3.org/TR/xpath/
XML Path Language (XPath) 2.0 http://www.w3.org/TR/xpath20/
XML Path Language (XPath) 3.0 http://www.w3.org/TR/xpath-30/
XQuery 1.0: An XML Query Language (Second Edition) http://www.w3.org/TR/xquery/
XQuery 3.0: An XML Query Language http://www.w3.org/TR/xquery-30/
XQuery 3.1: An XML Query Language http://www.w3.org/TR/xquery-31/
XQuery Update Facility 1.0 http://www.w3.org/TR/xquery-update-10/
XQuery Update Facility 3.0 http://www.w3.org/TR/xquery-update-30/
XQuery Scripting Extension 1.0 http://www.w3.org/TR/xquery-sx-10/
SPARQL Query Language for RDF http://www.w3.org/TR/rdf-sparql-query/
SPARQL 1.1 Query Language http://www.w3.org/TR/sparql11-query/
Turtle Terse RDF Triple Language http://www.w3.org/TR/turtle/
other enter URI below
Clear Save   Load
  The corresponding EBNF will be shown next to generated diagrams. If this option is unchecked, the EBNF display will be suppressed.
º Hue < > Select base color from the palette above, or enter color data into the fields on the left. Adjust hue, saturation, or lightness by clicking, or holding their respective controls. Arrange other colors by setting hue offset, 0 is for a monochromatic color scheme.
% Saturation < >
% Lightness < >
º Hue offset < >
px Graphics width
  When the graphics exceeds this width, attempts will be made to break it and start a continuation line.
Direct recursion elimination
  Unless disabled, direct recursion will be replaced by repetition. This applies to nonterminals, whose directly recursive references are either left- or right-recursive only. Upon success, productions are inlined, when a single reference remains.
  When checked, left and right factoring will be applied to right-hand sides of all productions individually, in order to achieve more compact diagrams.
Inline literals
  Replace nonterminal references by their definition, when they derive to a single string literal.
Keep epsilon nonterminals
  Keep references to nonterminals, that derive to epsilon only. When unchecked, they will be removed.
Cancel   Defaults