Welcome

This website provides a generator for users to create a Scalable Vector Graphics (SVG) image of a Railroad Diagram (like what JSON.org uses).

Example

Overview

Railroad diagrams are called this due to the visual play of imagining you are a little train going down its tracks from beginning to end. Choo-choo!!

Some railroad diagrams have only one path while others have several alternate paths like loops, choices or options. More complex railroad diagrams can consist of many alternate paths, or nested (lower-level) diagrams, that show a further level of detail.

The example above ("US Postal Address") describes how to write down somebody's mailing address, starting at the left. The items in blue are optional ("Company Name"), while ones in green ("City") are required. The items with square corners are those that refer to something that is either already known to the reader or is explained in greater detail elsewhere ("Postal Code"). The items with rounded corners are meant to be used exactly as shown (",").

The next example describes the process that you might use to purchase a cupcake from your favorite bakery. Not only must you choose a flavor of cupcake and icing, but you may also add rainbow sprinkles. The baker has put a limit on them, however, allowing you a maximum of 4 shakes from the dispenser. Don't forget to pay!

Example

While the short definition given in the Glossary, or in the full one at Wikipedia, are the exact origins and original purpose of railroad diagrams, they can also be used to visually describe any process that has a clear begining and end. As shown here, describing an address label or buying a cupcake is easily done. Because of this, they make an excellent way to design complex processes or concepts visually, without being bogged down in the specifics of the language, technology or software. All members of a design team can construct and work with them, regardless of their training or background. They can also be used by individuals who may not consider themselves designers or programmers. The processes to create a floral bouquet, paint a landscape or even write a sonnet can be described this way. These visual representations can then be used for training, further review or maybe just documentation for future use.

Choo-choo!!