Railroad Diagram Generator

This generator will allow you to enter the Railroad Diagram code into the Diagram Code section and see the results as a viewable image in the SVG Diagram section as well as the resulting code in the SVG Code section.

Diagram Code and Options

Copy Reset Open Save Clear [us-postal-address.txt]

Reset Options

Diagram( Sequence( Optional( Sequence( NonTerminal('Company Name', '', '', 'optional-path'), Terminal(',', '', '', 'optional-path') ), 'skip' ), NonTerminal('Addressee Name'), Terminal(','), NonTerminal('Street One'), Terminal(','), Optional( Sequence( NonTerminal('Street Two', '', '', 'optional-path'), Terminal(',', '', '', 'optional-path') ), 'skip'), NonTerminal('City'), Terminal(','), NonTerminal('State'), Terminal(','), NonTerminal('Postal Code') ) )

px.	The minimum vertical separation between lines
px.	The arc radius for corners
px.	The average width of characters in Terminal or NonTerminal text
px.	The average width of characters in Comment text
px.	Comments and group labels are pushed down by this amount
px.	Group labels only are pushed down by this amount
center left right	Item alignment when there's more space than they need

Diagram as an Image

Save (light) Save (dark) [us-postal-address.png]

Diagram as Text

Copy Save [us-postal-address diagram.txt]

SVG Code

Copy Copy w/ Style Save [us-postal-address.svg]

Help

The Instructions and Examples pages will show you how to construct your Railroad Diagram.

Diagram Code and Options Buttons

• Copy will copy the Diagram Code to your clipboard.
• Reset will reload the default Diagram Code.
• Open will allow you to load a previously saved Diagram Code text file.
• Save will save the Diagram Code to a text file that will be downloaded to your computer.
• Clear will reset the Diagram Code to an empty diagram.
• Reset Options will reset the Diagram Code Options to their default values.

Diagram as an Image Buttons

• Save (light) will generate a PNG file using the light color scheme that will be downloaded to your computer.
• Save (dark) will generate a PNG file using the dark color scheme that will be downloaded to your computer.

Diagram as Text Buttons

• Copy will copy the Text Diagram to your clipboard.
• Save will save the Text Diagram to a text file that will be downloaded to your computer.

SVG Code and Image Options Buttons

• Copy will copy the SVG code to your clipboard.
• Copy w/ Style does the same thing as "Copy", but adds the Cascading Style Sheet data as well.
• Save will generate an SVG file that will be downloaded to your computer.
• Reset Options will reset the SVG Diagram options.