Mermaid.js for ReSpec

This ReSpec extension allows you to embed mermaid.js diagrams in your specification.

Mermaid lets you create diagrams and visualizations using text and code. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

An example of the output of this extension is provided below (this extension renders the SVG diagram shown below):

Usage

To use this extension, include the following line in your ReSpec file:

<script class="remove" src="https://cdn.jsdelivr.net/gh/w3c/respec-mermaid@1.1.0/dist/main.js"></script>

and set the following configuration option in your ReSpec configuration:

preProcess: [window.respecMermaid.createFigures]

Note that there might be releases later than the one listed above. Check this repository's tags for all known releases.

ReSpec Markup

To use this extension, you must add the mermaid class to your content block.

<figure>
  <pre class="diagram mermaid">
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
  </pre>
  <figcaption>A sequence diagram example</figcaption>
</figure>

For more examples of mermaid.js markup, see the official documentation.