Description of Railroad diagram (Syntax diagram)

Snow Flower Text supports embedding of Railroad Diagram as an extension of AsciiDoc. Railroad Diagram (or Syntax diagram) is a way to visually represent grammar in a more readable form than using regular expressions or BNF. You can easily express context free grammar. You can express Railroad diagram in plain text format with concise and easy to understand syntax.

Embedding Railroad diagram is an extension of AsciiDoc unique to Snow Flower Text. This HTML document itself is also created using Snow Flower Text. Since the Railroad diagram is generated with a vector image, it becomes a clear figure with no jaggy in any medium size.

For details of the syntax, see “Railroad diagram Syntax“.

How to use

By writing the Railroad Diagram syntax text in the [railroad] block of AsciiDoc, you can embed the Railroad diagram in the document.

[railroad]
-----------
Diagram(
Optional('+', 'skip'),
Choice(0,
NonTerminal('name-start char'),
NonTerminal('escape')),
ZeroOrMore(
Choice(0,
NonTerminal('name char'),
NonTerminal('escape'))))
-----------

This is displayed as follows.

A simple example of Railroad diagram
Enable interactive function

Railroad Diagram supports hyperlinks and text selection, By default Snow Flower Text is disabled. To enable interactive behavior, use the railroad block as follows You must specify inline=true.

[railroad, inline=true]

It is recommended to enable the interactive function only when necessary because the memory resource required for display increases.

Railroad diagram Syntax

Children
Child

href

The following is a simple example of hyperlink operation. We set inline=true in the railroad block to enable the dialog function.

[railroad, inline=true]
----------
Diagram(
Terminal('yosbits', {href:'/wordpress', title:'yosbits'})
)
----------

Leaves

Terminal(text, href?)

Represents literal text. The href attribute specifies a hyperlink.

NonTerminal(text, href?)

Represents an instruction or other production. The href attribute specifies a hyperlink.

Comment(text, href?)

Comment. The href attribute specifies a hyperlink.

Skip()

Skip.

Start(type?, label?)

Start. This is provided by default, but you can explicitly create it if you want to label the diagram. The type attribute specifies either ‘simple’ (default) or ‘complex’.

End(type?)

End.

Containers

Sequence(children)

like simple concatenation in a regex.

[railroad]
----------
Diagram(
Sequence('1', '2', '3')
)
----------

This is displayed as follows.

Sequence(‘1’, ‘2’, ‘3’)
Choice(index, children)

It is similar to ‘|’ in regular expression. The index argument specifies the index of Child to be placed in the center.

[railroad]
----------
Diagram(
Choice(1, '1', '2', '3')
)
----------

This is displayed as follows.

Choice(1, ‘1’, ‘2’, ‘3’)
Optional(child, skip?)

It is similar to regular expression ?. If “skip” is specified as the skip parameter, the skip will be centered.

[railroad]
----------
Diagram(
Optional('foo'), Optional('bar', 'skip')
)
----------

This is displayed as follows.

Optional(‘foo’), Optional(‘bar’, ‘skip’)
OneOrMore(child, repeat?)

It is similar to regular expression +. The repeat argument specifies what should be in between iterations.

[railroad]
----------
Diagram(
OneOrMore('foo', Comment('bar'))
)
----------

This is displayed as follows.

OneOrMore(‘foo’, Comment(‘bar’))
ZeroOrMore(child, repeat?, skip?)

It is similar to regular expression *. The skip parameter is the same as` Optional`.

[railroad]
----------
Diagram(
ZeroOrMore('foo', Comment('bar'))
)
----------

This is displayed as follows.

ZeroOrMore(‘foo’, Comment(‘bar’))
Stack

It is the same as Sequence, but items are stacked vertically rather than horizontally.

[railroad]
----------
Diagram(
Stack('1', '2', '3')
)
----------

This is displayed as follows.

Stack(‘1’, ‘2’, ‘3’)
OptionalSequence(children)

A sequence that must select at least one item.

[railroad]
----------
Diagram(
OptionalSequence('1', '2', '3')
)
----------

This is displayed as follows.

OptionalSequence(‘1’, ‘2’, ‘3’)
MultipleChoice(index、type、children)

This is similar to Choice, but it represents multiple branches. The type argument specifies ‘any’ (OR condition) or ‘all’ (AND condition).

[railroad]
----------
Diagram(
MultipleChoice(1, 'all', '1', '2', '3')
)
----------

This is displayed as follows.

MultipleChoice(1, ‘all’, ‘1’, ‘2’, ‘3’)
[railroad]
----------
Diagram(
MultipleChoice(1, 'any', '1', '2', '3')
)
----------

This is displayed as follows.

MultipleChoice(1, ‘any’, ‘1’, ‘2’, ‘3’)
HorizontalChoice(children)

It is the same as Choice, but items are stacked horizontally rather than vertically.

[railroad]
----------
Diagram(
HorizontalChoice(Choice(0,'1','2','3','4'), '4', Choice(3, '1', '2', '3', '4'))
)
----------

This is displayed as follows.

HorizontalChoice(Choice(0,’1′,’2′,’3′,’4′), ‘4’, Choice(3, ‘1’, ‘2’, ‘3’, ‘4’))

Reference

Download on the Mac App Store