README

eleventy-plugin-mermaid

Integrate Mermaid with eleventy

Usage
Config
- Config Options
- Config Examples
Examples
Thanks
Future ideas

Usage

Install via npm:

npm install @kevingimbel/eleventy-plugin-mermaid

Include it in your .eleventy.js config file:

const pluginMermaid = require("@kevingimbel/eleventy-plugin-mermaid");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginMermaid);
};

Add the JavaScript code to your page (before the closing body tag!)

{% mermaid_js %}
</body>
</html>

The {% mermaid_js %} code will render the following:

<script async src="${src}">mermaid.initialize({ startOnLoad: true });</script>

${src}contains the script source as configured (see below). You can also skip this step and provide Mermaid as part of your JS bundle.

Config

Config Options

Global config options, set in eleventy.js.

Option	Type	Default	Description
`mermaid_js_src`	String	`https://unpkg.com/mermaid/dist/mermaid.min.js`	source from where Mermaid will be loaded
`html_tag`	String	`pre`	The wrapping HTML tag which the graph is rendered inside
`extra_classes`	String	`""`	Extra CSS classes assigned to the wrapping element

Config Examples

const pluginMermaid = require("@kevingimbel/eleventy-plugin-mermaid");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginMermaid, {
    // load mermaid from local assets directory
    mermaid_js_src: '/assets/mermaid.min.js',
    html_tag: 'div',
    extra_classes: 'graph'
  });
};

Examples

The plugin extends the 11ty markdown highlighter so mermaid diagrams can be written inline via code blocks marked with mermaid:

    ```mermaid
      graph TD;
      A[Want graphs in 11ty] -->|Search Plugin| B(Found plugin);
      B --> C{Use plugin?};
      C -->|Yes| D[NICE GRAPHS];
      C -->|No| E[NO GRAPHS];
    ```

Thanks

The code is mainly taken from https://cornishweb.com/index.php/2019/05/25/using-mermaid-js-with-eleventy-io/.

Future ideas

generate SVG server-side during build

Usage no npm install needed!