In http://www.json.org Douglas Crockford shows the specs of the JSON format in two interesting ways:

In the right side column he lists a text spec that looks like a YACC or LEX listing.

In the main body of the homepage, he put several images that gives us a simple way to visually understand the valid sequences that composes a JSON string.

Those images look like a description of the path that a finite state automaton would follow when parsing the JSON string.

Wich are the names (if any) of that listing format and that kind of graphics?

Is there any software that renders a source file containing the specification into that kind of images?


The name you are looking for is "Syntax Diagram" or "Railroad Diagram". This question on Stack Overflow gives a good overview of some of the available tools for generating these types of diagrams.

According to this answer by aleemb, which contains an email response from Douglas Crockford, the diagrams on json.org were made using Microsoft Visio, but Creative Docs.NET is also a viable tool. This answer by Peter Ajtai suggests the Railroad Diagram Generator which takes a formatted context-free grammar and converts it into an SVG image that can be downloaded.

A similar question on Stack Overflow also provides other tools, such as the EBNF-Visualizer and Graphviz.

Your Answer

