docsify-mermaid

2.0.1 • Public • Published

mermaid-docsify is a docsify plugin which allows to render mermaid diagrams in docsify.

How to use

Add Mermaid and the plugin:

  <script type="module">
    import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
    mermaid.initialize({ startOnLoad: true });
    window.mermaid = mermaid;
  </script>
  <script src="//unpkg.com/docsify-mermaid@2.0.0/dist/docsify-mermaid.js"></script>

You can optionally customize mermaid.run configuration with this props :

  <script>
    window.$docsify = {
      mermaidConfig: {
        querySelector: ".mermaid"
      }
    };
  </script>

Now you can include mermaid diagrams in your docsify docs:

```mermaid
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
```

A demo is available on Codepen.

Docsify with mermaid Screenshot

/docsify-mermaid/

    Package Sidebar

    Install

    npm i docsify-mermaid

    Weekly Downloads

    3,975

    Version

    2.0.1

    License

    ISC

    Unpacked Size

    13.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • leward