How to use railroad-diagrams - 10 common examples

export default function render(elem) {
  const $e = $(elem);
  try {
    const diagramSource = $e.text();

    // context for eval
    /* eslint-disable */
    var Diagram = railroad.Diagram;
    var ComplexDiagram = railroad.ComplexDiagram;
    var Sequence = railroad.Sequence;
    var Stack = railroad.Stack;
    var OptionalSequence = railroad.OptionalSequence;
    var Choice = railroad.Choice;
    var MultipleChoice = railroad.MultipleChoice;
    var Optional = railroad.Optional;
    var OneOrMore = railroad.OneOrMore;
    var ZeroOrMore = railroad.ZeroOrMore;
    var Terminal = railroad.Terminal;
    var NonTerminal = railroad.NonTerminal;
    var Comment = railroad.Comment;
    var Skip = railroad.Skip;
    /* eslint-enable */

    const result = eval(diagramSource).format(); // eslint-disable-line no-eval
    elem.innerHTML = ''; // eslint-disable-line
    result.addTo(elem);
    $e.find('railroad-diagram').attr('class', styles['railroad-diagram']);
  } catch (err) {
    console.log(err);
  }

function renderTok(tok) {
            // ctx translated to correct position already
            if (tok.subexpression) {
                return new rr.Choice(0, tok.subexpression.map(renderTok));
            } else if (tok.ebnf) {
                switch (tok.modifier) {
                case ":+":
                    return new rr.OneOrMore(renderTok(tok.ebnf));
                    break;
                case ":*":
                    return new rr.ZeroOrMore(renderTok(tok.ebnf));
                    break;
                case ":?":
                    return new rr.Optional(renderTok(tok.ebnf));
                    break;
                }
            } else if (tok.literal) {
                return new rr.Terminal(JSON.stringify(tok.literal));
            } else if (tok.mixin) {
                return new rr.Comment("Pas implementé.");

function renderTok(tok) {
            // ctx translated to correct position already
            if (tok.subexpression) {
                return new rr.Choice(0, tok.subexpression.map(renderTok));
            } else if (tok.ebnf) {
                switch (tok.modifier) {
                case ":+":
                    return new rr.OneOrMore(renderTok(tok.ebnf));
                    break;
                case ":*":
                    return new rr.ZeroOrMore(renderTok(tok.ebnf));
                    break;
                case ":?":
                    return new rr.Optional(renderTok(tok.ebnf));
                    break;
                }
            } else if (tok.literal) {
                return new rr.Terminal(JSON.stringify(tok.literal));
            } else if (tok.mixin) {
                return new rr.Comment("Pas implementé.");
            } else if (tok.macrocall) {
                return new rr.Comment("Pas implementé.");
            } else if (tok.tokens) {
                return new rr.Sequence(tok.tokens.map(renderTok));
            } else if (typeof(tok) === 'string') {
                return new rr.NonTerminal(tok);
            } else if (tok.constructor === RegExp) {
                return new rr.Terminal(tok.toString());
            } else if (tok.token) {
                return new rr.Terminal(tok.token);

function renderTok(tok) {
            // ctx translated to correct position already
            if (tok.subexpression) {
                return new rr.Choice(0, tok.subexpression.map(renderTok));
            } else if (tok.ebnf) {
                switch (tok.modifier) {
                case ":+":
                    return new rr.OneOrMore(renderTok(tok.ebnf));
                    break;
                case ":*":
                    return new rr.ZeroOrMore(renderTok(tok.ebnf));
                    break;
                case ":?":
                    return new rr.Optional(renderTok(tok.ebnf));
                    break;
                }
            } else if (tok.literal) {
                return new rr.Terminal(JSON.stringify(tok.literal));
            } else if (tok.mixin) {
                return new rr.Comment("Pas implementé.");
            } else if (tok.macrocall) {
                return new rr.Comment("Pas implementé.");
            } else if (tok.tokens) {
                return new rr.Sequence(tok.tokens.map(renderTok));

function renderTok(tok) {
            // ctx translated to correct position already
            if (tok.subexpression) {
                return new rr.Choice(0, tok.subexpression.map(renderTok));
            } else if (tok.ebnf) {
                switch (tok.modifier) {
                case ":+":
                    return new rr.OneOrMore(renderTok(tok.ebnf));
                    break;
                case ":*":
                    return new rr.ZeroOrMore(renderTok(tok.ebnf));
                    break;
                case ":?":
                    return new rr.Optional(renderTok(tok.ebnf));
                    break;
                }
            } else if (tok.literal) {
                return new rr.Terminal(JSON.stringify(tok.literal));
            } else if (tok.mixin) {
                return new rr.Comment("Pas implementé.");
            } else if (tok.macrocall) {
                return new rr.Comment("Pas implementé.");
            } else if (tok.tokens) {
                return new rr.Sequence(tok.tokens.map(renderTok));
            } else if (typeof(tok) === 'string') {
                return new rr.NonTerminal(tok);
            } else if (tok.constructor === RegExp) {

export default function render(elem) {
  const $e = $(elem);
  try {
    const diagramSource = $e.text();

    // context for eval
    /* eslint-disable */
    var Diagram = railroad.Diagram;
    var ComplexDiagram = railroad.ComplexDiagram;
    var Sequence = railroad.Sequence;
    var Stack = railroad.Stack;
    var OptionalSequence = railroad.OptionalSequence;
    var Choice = railroad.Choice;
    var MultipleChoice = railroad.MultipleChoice;
    var Optional = railroad.Optional;
    var OneOrMore = railroad.OneOrMore;
    var ZeroOrMore = railroad.ZeroOrMore;
    var Terminal = railroad.Terminal;
    var NonTerminal = railroad.NonTerminal;
    var Comment = railroad.Comment;
    var Skip = railroad.Skip;
    /* eslint-enable */

    const result = eval(diagramSource).format(); // eslint-disable-line no-eval
    elem.innerHTML = ''; // eslint-disable-line
    result.addTo(elem);
    $e.find('railroad-diagram').attr('class', styles['railroad-diagram']);
  } catch (err) {

Sequence('AS', NonTerminal('output_name'))
																					)
																			),
																			','
																	),
															),

															Terminal('FROM', '#sql-from'),
															OneOrMore(
																	Choice(
																			0,
																			Sequence(
																					NonTerminal('table_name'),
																					Optional(Sequence('AS', NonTerminal('alias')))
																			),
																			Sequence(
																					'(', NonTerminal('select'), ')',
																					Sequence('AS', NonTerminal('alias'))
																			)
																	),
																	',',
															),
													),

													OneOrMore(
															Choice(
																	0,
																	Skip(),
																	Sequence(
																			Choice(
																					0,
																					Sequence(',', Comment('old syntax for cross join')),

<strong>from_item</strong>
				<strong>from_item</strong> {'{'} LEFT | RIGHT | FULL } [ OUTER ] JOIN ON join_condition
				<strong>from_item</strong>
				<strong>from_item</strong> {'{'} LEFT | RIGHT | FULL } [ OUTER ] JOIN NATURAL <strong>from_item</strong>
				<strong>from_item</strong> {'{'} LEFT | RIGHT | FULL } [ OUTER ] JOIN USING ( join_column [, ...] ) <strong>from_item</strong>

				and <strong>with_query</strong> is:

				<strong>with_query_name</strong> AS ( <strong>select</strong> )

							<div>
								</div>

<div>
										'),
																							NonTerminal('new name')
																					),
																					','
																			)
																	)
															),
															NonTerminal('RA-expression', '#relalg-relalgexpr')
													)
											)} /&gt;
									</div>

alternative syntax
											right outer join<br>right join
										
									
								
								<div>optional join condition; if no join condition is given it acts as a natural right outer join
									<div>
										
									</div>
								</div>
							
							<div>
								<h4 id="relalg-operations-fulljoin">full outer join</h4>
								<table>
									<tbody>
										<tr>
											<th>symbol</th>
											<td>⟗</td></tr></tbody></table></div>