Awesome

Mermaid Tool

Provides Mermaid Blocks for the Editor.js.

Installation

Install via NPM

Get the package

npm i --save editorjs-mermaid

Include module at your application

const MermaidTool = require('editorjs-mermaid');

Download to your project's source dir

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

Load from CDN

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/editorjs-mermaid@latest

Then require this script on page with Editor.js through the <script src=""></script> tag.

Usage

Add a new Tool to the tools property of the Editor.js initial config.

If you want to configure mermaid, use the onReady property of Editor.js.

var editor = EditorJS({
  ...

  tools: {
    ...
    mermaid: MermaidTool,
  },

  ...

  onReady: () => {
    MermaidTool.config({ 'theme': 'neutral' })
  }

  ...
});

Output data

{
  "type": "header",
  "data": {
    "caption": "flowchart sample",
    "code": "flowchart LR\nA-->B"
  }
}