# Generating Syntax Diagrams for a grammar.

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-diagrams (opens new window) library by @tabatkins.

# Examples

# Features

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

# Instructions

Chevrotain provides the createSyntaxDiagramsCode (opens 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.


# Customization

The logic for generating the HTML (opens 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.