Guide

Railroad Diagrams

How to write fenced railroad blocks in markdown and let docs-site render them as grammar-style SVG diagrams.

GuideSyntaxRailroad

The docs frontend now supports fenced railroad blocks for grammar-style syntax diagrams.

Use this when a Mermaid flowchart would be too broad and you want to explain a concrete production rule, token pattern, or mini-language shape.

How the block works

  • the fence language is railroad
  • the block body is JSON
  • the JSON maps directly to the supported railroad-diagrams node types
  • a top-level array is treated as Diagram(items) automatically
  • bare strings inside items become Terminal(...)

Supported node types

TypeRequired fieldsNotes
TerminaltextLiteral token or fixed keyword
NonTerminaltextProduction or placeholder label
CommenttextAnnotation text
SkipnoneEmpty branch / spacer
SequenceitemsConcatenation
ChoiceitemsOptional normal chooses the straight path
OptionalitemOptional skip: "skip" keeps omission on the main line
OneOrMoreitemOptional repeat item between repetitions
ZeroOrMoreitemOptional repeat and skip just like the library
DiagramitemsExplicit root
ComplexDiagramitemsExplicit complex root

Source example

[
  { "type": "NonTerminal", "text": "identifier" },
  {
    "type": "ZeroOrMore",
    "item": {
      "type": "Sequence",
      "items": [".", { "type": "NonTerminal", "text": "identifier" }]
    }
  }
]

Rendered example

Rendering railroad diagram…

Choice example

Rendering railroad diagram…

Authoring tips

  • start with a top-level array for the common linear case
  • use strings for literals and NonTerminal for named grammar pieces
  • wrap repeated fragments in Sequence before putting them in ZeroOrMore or OneOrMore
  • keep labels short; the library uses simple text metrics and gets grumpy when asked to measure a novel