https://github.com/naduma/editorjs-mermaid

https://github.com/naduma/editorjs-mermaid

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/naduma/editorjs-mermaid
• Owner: naduma
• License: mit
• Created: 2022-07-14T16:18:20.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-15T16:27:16.000Z (over 2 years ago)
• Last Synced: 2024-07-11T21:51:46.111Z (4 months ago)
• Language: JavaScript
• Size: 451 KB
• Stars: 19
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - naduma/editorjs-mermaid

README

        
# Mermaid Tool

![Version of EditorJS that the plugin is compatible with](https://badgen.net/badge/Editor.js/v2.0/blue)

Provides [Mermaid](http://mermaid-js.github.io/mermaid/) Blocks for the [Editor.js](https://ifmo.su/editor).

## Installation

### Install via NPM

Get the package

```shell

npm i --save editorjs-mermaid

```

Include module at your application

```javascript

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://www.jsdelivr.com/package/npm/@editorjs/header).

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

Then require this script on page with Editor.js through the `` 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.

```javascript

var editor = EditorJS({

  ...

  tools: {

    ...

    mermaid: MermaidTool,

  },

  ...

  onReady: () => {

    MermaidTool.config({ 'theme': 'neutral' })

  }

  ...

});

```

## Output data

| Field   | Type     | Description        |

| ------- | -------- | ------------------ |

| caption | `string` | caption            |

| code    | `string` | mermaid code       |

```json

{

  "type": "header",

  "data": {

    "caption": "flowchart sample",

    "code": "flowchart LR\nA-->B"

  }

}

```