Skip to content

WileyLabs/eleventy-plugin-mermaid

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

eleventy-plugin-mermaid

Integrate Mermaid with eleventy

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

About

Integrate Mermaid with eleventy (11ty)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.7%
  • Nunjucks 23.3%