hypermd-mermaid

Use mermaid to render 'mermaid' code blocks into diagrams:

Mermaid supports flowchart, sequence diagram, gantt diagram, class diagram, git graph and more!

Demo | GitHub |

How to use

1. install hypermd-mermaid
2. import before creating HyperMD editor
3. create HyperMD editor

In your HyperMD editor, you can insert a mermaid figure like this.

(The syntax reference can be found in mermaid website)

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

For webpack / parcel

First of all, install the packages: npm install --save hypermd-mermaid

import * as HyperMD from "hypermd"
import "hypermd-mermaid"

const your_textarea = document.getElementById('input-box')
const editor = HyperMD.fromTextArea(your_textarea)

For requirejs (⚠️IMPORTANT)

⚠️ Mermaid build is incompatible with RequireJS! To make them work together, please follow this instruction!

In your HTML:

<textarea id="input-box" cols="30" rows="10">You can input here!</textarea>

<!-- 👇 mermaid (before RequireJS!) -->
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/requirejs/require.js"></script> <!-- 👈 RequireJS -->
<script src="https://cdn.jsdelivr.net/npm/hypermd/goods/patch-requirejs.js"></script> <!-- 👈 IMPORTANT -->
<script data-main src="main.js"></script>

In your main.js

requirejs.config({
  packages: [ { name: 'hypermd-mermaid', main: 'index.js' } ]
});
define("mermaid", [], function () { return window['mermaid'] });

// then, add "hypermd-mermaid" to your main-entry's dependency list.

Finally, here is an example of main.js and a live demo.

For Plain Browser Env

Why hurting yourself? The bundlers and module loaders are the future!

Add these HTML after loading HyperMD, before creating a editor.

  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hypermd-mermaid/index.js"></script>

See the source of example file

APIs

This module exports following symbols.

(In plain browser env, they are stored in global variable HyperMD_PowerPack.mermaid)

• mermaidRenderer -- a CodeRenderer for HyperMD.FoldCode. (this may be useless for you because it will be registered automatically!)

Configuring Mermaid

Before creating a HyperMD editor, you may call mermaid.initialize() to configure mermaid.

More details can be found in mermaidAPI.