Railroad

 

Source

The component uses https://github.com/tabatkins/railroad-diagrams

example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<Railroad
  content="
    Diagram(
      Optional('+', 'skip'),
      Choice(0,
        NonTerminal('name-start char'),
        NonTerminal('escape')
      ),
      ZeroOrMore(
        Choice(0,
          NonTerminal('name char'),
          NonTerminal('escape')
        )
      )
    )
  "
 />

Alternative via markdown syntax

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

example 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Railroad
  content="
    Diagram(
      Optional(
        Choice(0,'Let','Set')
        ),
        NonTerminal('variable'),
        Terminal('='),
        Choice(0,
          NonTerminal('expression'),
          Sequence(Optional('New'),NonTerminal('object')
        )
      )
    )
  "
 />

Live example with background

<Railroad wrapped={true} content="..." />

Live example without background

<Railroad wrapped={false} content="..." />