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.
- 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
*
. Theskip
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’))