102

I love the syntax of railroad diagrams on json.org which are a graphical representation of the BNF language. I haven't found any tools that can produce results as eloquently.

Can anyone identify the tool used to generate these diagrams?

Potherca
  • 10,796
  • 5
  • 60
  • 79
aleemb
  • 28,346
  • 17
  • 92
  • 111

9 Answers9

98

There is an Online Railroad Diagram Generator. It creates SVG syntax diagrams, also known as railroad diagrams, from context-free grammars specified in EBNF. You can copy the SVG code or take screen shots.

You have to type in the grammar and it'll make the diagram.

For example, to create the first railroad diagram you show, you would use the code:

object ::= '{' ((string ':' value ) ( ',' string ':' value )*)? '}'

enter image description here

Then you could go on to define string and value using string ::= ... and value ::= ... The references are all shown.

Check out some of the example diagrams on the page. They have XML and even EBNF itself.

Peter Ajtai
  • 54,199
  • 12
  • 118
  • 138
  • Any idea on how to get the graphics into your own document other than a) making a screenshot b) copying the svg source from the page's source? – rudolfson Mar 21 '12 at 15:27
  • 1
    @rudolfson - You can write your own, the central logic isn't too bad, and all the code's there to see. Then just embed in your document. I wrote a WP plugin based on this. - The hardest part is making the graphics look nice. – Peter Ajtai Mar 21 '12 at 16:31
  • 2
    The Online Railroad Diagram Generator mentioned here now offers a ZIP file with the PNG version of the generated diagrams. Great tool! – Sebastián Grignoli Dec 18 '12 at 00:00
  • 2
    It seems that the webapp moved here: http://bottlecaps.de/rr/ – enrico.bacis Dec 03 '13 at 10:03
  • Thanks @enrico.bacis - updated link – Peter Ajtai Dec 04 '13 at 07:48
51

from Douglas Crockford
to Aleem B
date Tue, Apr 28, 2009 at 6:01 PM
subject Re: Railroad Diagrams on json.org

I drew them with Visio. Creative Docs.NET also works well.

--

Aleem B wrote:

Hello Douglas,

I thoroughly enjoy most things you put out there and the railroad diagrams on json.org are no different. I have been trying to look around for a tool that would generate diagrams nearly as eloquent but have had no luck:

Tool for generating railroad diagram used on json.org

Is there some tool you used to convert the BNF to these diagrams or were they hand crafted?

-- Aleem

Community
  • 1
  • 1
aleemb
  • 28,346
  • 17
  • 92
  • 111
  • 7
    For completions sake: [Tab Atkins Jr.](http://www.xanthir.com/) created a [Javascript Railroad-diagram Generator](https://github.com/tabatkins/railroad-diagrams) using SVG. specifically because he could not find one that had the visual appeal he wanted , i.e. "the JSON.org look". – Potherca Sep 11 '12 at 10:04
23

Tab Atkins Jr. created a Javascript Railroad-diagram Generator using specifically because he could not find one that had the visual appeal he wanted , i.e. "the JSON.org look".

Potherca
  • 10,796
  • 5
  • 60
  • 79
8

There was a similar question a few days ago: What is a good tool for creating railroad diagrams?

That question was about how railroad diagrams in the SQLite syntax diagrams were generated. The accepted answer found that the diagrams were generated using a DSL written in Tcl.

Another answer offered a suggestion to use a diagram generator which works off of EBNL grammar.

Community
  • 1
  • 1
coobird
  • 151,986
  • 34
  • 204
  • 225
  • To add to that, there is also a list of tools in the Wikipedia article I link to. A true railroad diagram should not need arrows--if you imagine a train travelling those tracks it should be clear what routes you can or cannot take. And the json.org diagrams are just so pretty, I have to know if there's a tool for them =) Have already seen these links but might helps others. – aleemb Apr 28 '09 at 11:49
4

One of the things that IBM's railroad track generator handles well is default values. I have not seen another generator that does this.

An example is

          ┌─────◀────┐┌(──«defaults»─)─┐                        
▶▶─COMMAND┴«argument»┴┼────────────────┼──────────────────────▶◀
                      │ ┌────◀─────┐   │                        
                      └(┴┬«option»┬┴┬─┬┘                        
                         └Help────┘ └)┘
Leslie Turriff
  • 41
  • 1
4

I have been looking also for the tools used to generate these Syntax Diagrams and if possible in js library so it can be edited and displayed without awaiting a boring time for a graphic to come.

I know there are tools out there but I would say that the generator from bottlecaps.de has a nice graphic with color option. Unfortunately I could not get source code of the tool it self there.

I went also to the related questions of answers here but got only followings where we can get it as open source js library and provided with an online demo where we can try and play with.

Chetabahana
  • 7,806
  • 2
  • 50
  • 70
3

I found J-algo tool. I think it is very easy to draw diagram but I can't export to image or another type.

enter image description here

http://j-algo.binaervarianz.de/index.php

Wendel
  • 2,212
  • 20
  • 26
0

Take a look at http://code.google.com/p/html-railroad-diagram/ which generates HTML railroad diagrams. There is an example that shows the JSON railroad generated in an HTML page by JavaScript with links.

Mike Samuel
  • 109,453
  • 27
  • 204
  • 234
0

I seem to remember that IBM has a tool that builds such diagrams as part of their BookMaster SGML suite. Railroad diagrams are often used in mainframe documentation.

Ron
  • 9
  • 1