About Syntax Diagrams
See your grammar come to life.
Syntax diagrams — also called railroad diagrams — are a visual representation of formal grammar rules. They make the structure of a grammar immediately obvious in a way that reading rules never quite does.
What they are
A picture worth a thousand rules.
A railroad diagram represents each grammar rule as a path through a network of nodes. Terminal nodes — literal tokens like keywords and punctuation — are shown as rectangles. Non-terminal nodes — references to other rules — are shown as rounded rectangles. Alternatives branch into parallel paths. Optional elements have bypass paths. Repetitions loop back on themselves.

The result is a diagram that can be read left to right, following the paths, to understand exactly what sequences of tokens are valid according to the grammar.
Supported formats
Multiple grammar formats, one tool.
ANTLR4
ANTLR (ANother Tool for Language Recognition) is one of the most widely used parser generators. ANTLR4 grammars define both lexer and parser rules in a clean, readable syntax.
Official documentation
ANTLR4 Documentation
DevDiagrams documentation
ANTLR4 Grammar Reference
BNF
Backus-Naur Form is the classic notation for context-free grammars, originally developed by John Backus and Peter Naur. DevDiagrams supports standard BNF with non-terminals in angle brackets, the ::= assignment operator, alternatives separated by |, and quoted string terminals.
DevDiagrams documentation
BNF Grammar Reference
ABNF
Augmented Backus-Naur Form, defined in RFC 5234 with extensions in RFC 7405, is the notation used throughout IETF internet standards. ABNF adds repetition operators, numeric value notation, and case sensitivity controls to standard BNF.
DevDiagrams documentation
ABNF Grammar Reference
EBNF
Extended Backus-Naur Form, defined in ISO 14977, extends BNF with repetition using curly braces, optional elements using square brackets, grouping using parentheses, and an exclusion operator. Used widely in programming language and compiler specifications.
DevDiagrams documentation
EBNF Grammar Reference
BNF syntax reference
Standard BNF — exactly as DevDiagrams expects it.
DevDiagrams supports standard Backus-Naur Form. Here are all the constructs the tool recognizes:
Construct Syntax Meaning Example
Non-terminal <rulename> Reference to another rule <expression>
Assignment ::= Defines a rule <expr> ::= <term>
Alternative | Either/or choice <a> | <b>
Terminal (double quoted) "text" Literal text token "+"
Terminal (single quoted) 'text' Literal text token '-'
Empty production "" or '' Explicitly empty alternative <opt> ::= <item> | ""
Line comment // text Comment — ignored by parser, used as rule description // An expression
ABNF syntax reference
ABNF — exactly as DevDiagrams expects it.
DevDiagrams supports ABNF as defined in RFC 5234 with extensions from RFC 7405. Here are all the constructs the tool recognizes:
Construct Syntax Meaning Example
Rule definition rulename = elements Defines a rule greeting = "hello"
Incremental alternation rulename =/ elements Adds alternatives to an existing rule greeting =/ "hi"
Alternative / Either/or choice a / b
Grouping ( elements ) Groups elements for precedence (a / b) c
Optional [ elements ] Zero or one occurrence [ "," item ]
Zero or more *element Zero or more repetitions *DIGIT
One or more 1*element One or more repetitions 1*ALPHA
Exact count n element Exactly n repetitions 3DIGIT
Bounded repetition n*m element Between n and m repetitions 1*4HEXDIG
String (case insensitive) "text" or %i"text" Literal string, case insensitive "GET"
String (case sensitive) %s"text" Literal string, case sensitive (RFC 7405) %s"Content-Type"
Decimal value %d Decimal character value, range, or concatenation %d65 / %d65-90 / %d65.66
Hexadecimal value %x Hex character value, range, or concatenation %x41 / %x41-5A / %x41.42
Binary value %b Binary character value, range, or concatenation %b01000001 / %b0-1
Prose description <description> Informal description for constructs that cannot be formally expressed <any visible character>
Comment ; text Comment to end of line — ignored by parser, used as rule description ; An expression
EBNF syntax reference
EBNF — exactly as DevDiagrams expects it.
DevDiagrams supports EBNF as defined in ISO 14977. Here are all the constructs the tool recognizes:
Construct Syntax Meaning Example
Rule definition name = definitions ; Defines a rule, terminated with semicolon digit = '0' | '1' ;
Concatenation , Sequence — one element followed by another sign , digit
Alternative | Either/or choice '+' | '-'
Optional [ elements ] Zero or one occurrence [ sign ] , digit
Repetition { elements } Zero or more occurrences { digit }
Grouping ( elements ) Groups elements for precedence ( '+' | '-' ) , digit
Exact repetition n * element Exactly n occurrences 3 * digit
Exclusion term - exclusion Matches term but not exclusion character - '"'
Terminal string (single quoted) 'text' Literal text token '+'
Terminal string (double quoted) "text" Literal text token "begin"
Special sequence ? description ? Informal description for constructs that cannot be formally expressed ? any printable character ?
Comment (* text *) Block comment — supports nesting, ignored by parser, used as rule description (* An expression *)
Tips
Writing grammars that diagram well.
1
Keep rules focused
Rules with many alternatives produce wide diagrams. Consider breaking complex rules into smaller named sub-rules — the diagram becomes more readable and each sub-rule gets its own diagram.
2
Document your rules with comments
Place a comment on the line immediately above a rule and it will appear as a description in the generated documentation. Multiple contiguous comment lines are combined into a single description. BNF uses // comment syntax while ABNF uses ; comment syntax and EBNF uses (* comment *) block comment syntax.
3
Use the grammar map
The grammar map shows how your rules relate to each other. Rules with no incoming references are entry points — the roots of your grammar. Use the map to spot orphaned rules that can never be reached.
4
ABNF incremental alternation
In ABNF, a rule defined with = can have additional alternatives added later using =/ . DevDiagrams merges all incremental alternations into the base rule and displays them as a single combined diagram.
5
Generate documentation
Once your grammar is rendered, click Generate Docs to produce a complete HTML reference document with all rules, their diagrams, descriptions, and cross-references. Share it with your team or embed it in your project documentation.
6
EBNF exclusion operator
In EBNF, the - operator excludes a set of matches from a term — for example character - '"' means any character except a double quote. DevDiagrams renders the exclusion relationship as a dashed container showing the term and the exclusion connected by an except label.
Ready to diagram your grammar?
Start diagramming →