Welcome

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

US Postal Address

Introduction

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. However, the baker has put a limit on them. Also, don't forget to pay!

Cupcake Purchase

All Aboard!

While the short definition given in the Glossary, or the full one at Wikipedia, describe the exact origins and original purpose of railroad diagrams, they can also be used to visually describe any process that has a clear beginning 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. See the Examples page for more ideas.

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.

Because of their easily understood and visual aspects, a formal generator like the one given on this website doesn't have to be used. A simple whiteboard and colored markers during a team meeting can accomplish quite a lot while planning or brainstorming. The Diagram Generator can then be used after the meeting to formalize the diagram if desired.

Choo-choo!!