Reveal.js Railroad-diagram

A reveal.js plugin that adds support for Railroad-diagrams. It is a thin wrapper around the amazing Railroad-diagram Generator project.

---

<script type="application/railroad">
  Diagram(
    'function',
    NonTerminal('identifier'),
    '(', ZeroOrMore('param', ','), ')',
    '{', ZeroOrMore(NonTerminal('statement')), '}');
</script>

Important notes:

• We chose the "holder" to be <script type="application/railroad">
• The containment script is executed using eval. This could be an enormous security risk if you don't know the authors of your slides.

Quickstart

Installation

This plugin is published to, and can be installed from, npm.

npm install add @edc4it/reveal.js-railroad

Or using yarn

yarn add @edc4it/reveal.js-railroad

Initialise (as npm library)

import Reveal from 'reveal.js';
import ClipCode from '@edc4it/reveal.js-clipcode';

Reveal.initialize({
  railroad: {
    // Default values
    bg: 'unset',
    pathStroke: '#82e4ff',
    rectFill: '#00a6ff',
    rectStroke: 'white',
    textFill: 'white',
  },
  plugins: [RailRoad],
});

Add a diagram

For the full syntax of "components" see Railroad-Diagram components

<script type="application/railroad">
  Diagram(
    'function',
    NonTerminal('identifier'),
    '(', ZeroOrMore('param', ','), ')',
    '{', ZeroOrMore(NonTerminal('statement')), '}');
</script>

Global options

Reveal.initialize({
  railroad: {
    // Default values
    bg: 'unset',
    pathStroke: '#82e4ff',
    rectFill: '#00a6ff',
    rectStroke: 'white',
    textFill: 'white',
  },
  plugins: [RailRoad],
});

• bg: the background of the diagram
• pathStroke: the color used for the "path" of the railroad diagram,
• rectFill: 'the fill/background color of the components
• rectStroke: 'the stroke color of the components,
• textFill: color of the text inside the components,