Syntax Diagrams

It is often useful to visually inspect a grammar's syntax diagrams during development or for documentation purposes.

This document contains instructions on how to generate Syntax railroad diagrams for a Chevrotain grammar using the railroad-diagramsopen in new window library by @tabatkins.



  • Highlight usages and definitions on mouse hover.
  • Scroll to definition of non-terminal on mouse click.


Chevrotain provides the createSyntaxDiagramsCodeopen in new window API to generate the html source code of syntax diagrams. This html source code can then be used by an end user in either node.js or a browser:

  1. By writing it directly to the disk in a pure node.js runtime scenario.
  2. By inserting it dynamically into an iframe in a browser scenario.



The logic for generating the HTMLopen in new window is quite trivial and the generated code itself is also very simple with a decent separation of concerns. These can be used as a basis for creating more advanced custom scenarios, for example:

  • Adding a module loader such as system.js/require.js
  • Dynamically rendering diagrams of a Grammar in an IDE.
  • Rendering diagrams of a pure EBNF grammar (Not a Chevrotain grammar) as the diagrams are rendered using a serialized format.