Skip to main content

Railroad (syntax diagram)

Draws a grammar rule or piece of syntax as a "railroad diagram": it visually shows, with arrows, the order and choices from which an expression can be built.

Syntax​

```railroad
Diagram(Sequence('SELECT', OneOrMore('column', ','), 'FROM', 'table'))
```

The content isn't plain text or JSON; it's an expression that calls the railroad-diagrams library's own JavaScript functions: you define the diagram by nesting building blocks like Diagram(...), Sequence(...), Choice(...), Optional(...), OneOrMore(...), and ZeroOrMore(...). You can use railroad, ebnf, or rr as the code block language; all three do the same thing.

What it's for​

Visually explaining the grammar of a programming language, a command syntax, or any structured format. A textual alternative to BNF/EBNF grammar definitions.

Source​

The library's full function list and examples: github.com/tabatkins/railroad-diagrams.

Tsunagi-specific note​

Unlike the other JS viewers, this one requires you to write an executable expression (not plain data). You need to use the library's function names correctly; a small syntax mistake will keep the diagram from rendering.