mermaid (Nikola plugin)

Render Mermaid diagrams from Nikola shortcode blocks.

This plugin provides a mermaid shortcode that wraps diagram source code in a <div class="mermaid"> block. Mermaid.js then renders the diagram in the browser.

Install

Copy the plugin folder into your Nikola site:

your_site/
  plugins/
    mermaid/
      mermaid.py
      mermaid.plugin
      README.md
      requirements-nonpy.txt

Configuration

No Nikola configuration is required.

The page or theme must load Mermaid.js. For example, add this to your theme or to a template hook rendered near the end of the page:

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
  mermaid.initialize({ startOnLoad: true });
</script>

Usage

Use the shortcode in a post or page:

{{% mermaid %}}
mindmap
  root((Data Scientist - ML))
    Analyse de donnees
    MLOps
    NLP et RAG
{{% /mermaid %}}

You can pass a theme name through the shortcode:

{{% mermaid theme="dark" %}}
graph TD
  A[Data] --> B[Model]
  B --> C[API]
{{% /mermaid %}}

The selected theme is exposed as a data-theme attribute:

<div class="mermaid" data-theme="dark">
...
</div>

Online example

• The following website use the Github Metadata plugin : stephmnt/datascience_portfolio

Notes

• This plugin does not bundle Mermaid.js.
• requirements-nonpy.txt declares Mermaid.js as a non-Python runtime dependency for the Nikola plugin index.
• If diagrams do not render, check that Mermaid.js is loaded once in the final HTML page and that the shortcode is closed with {{% /mermaid %}}.