Draw.io Desktop Mermaid Plugin

This draw.io plugins integrates the mermaid diagram generator.

Mermaid supports:

Pie charts
Sequence diagrams
Gantt diagrams
State diagrams
Flow charts
Class diagrams

via a simple markup language.

Overview

Example diagrams

Online Demo

Usage

double click on a shape and edit the mermaid script, the shape will be redrawn after leaving the editor

Properties

All mermaid configuration options are reflected as draw.io shape properties.

How to build

git clone --recursive https://github.com/nopeslide/drawio_mermaid_plugin.git ~/drawio_mermaid_plugin
cd ~/drawio_mermaid_plugin/drawio_desktop
npm install
npm run build

How to install

open draw.io desktop
select on the top menu bar Extras/Plugins...
click Add
click Select File... for External Plugins:
select ~/drawio_mermaid_plugin/drawio_desktop/dist/mermaid-plugin.webpack.js
click OK
click Apply
confirm Dialog

Draw.io copies the plugin into an internal directory, making updates impossible!

To link the plugin with the repository:

run ln -sfr ~/drawio_mermaid_plugin/drawio_desktop/dist/mermaid-plugin.webpack.js ~/.config/draw.io/plugins/