, Railroad Diagram Generator,

Railroad
Diagram
Generator
v1.36.893 Oct 12, 2014
R R written by
Gunther Rademacher
grd@gmx.net



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

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

Notation

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) 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 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
 
URI  
Clear Save   Load
Suppress EBNF display
  Usually the corresponding EBNF will be shown next to generated diagrams. If this option is checked, the EBNF display will be suppressed.
 
Color
                                   
º 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.
% Saturation < >
% Lightness < >
Reset to default values: Reset