Drawio.io Integration: Mermaid Plugin

This is an extension for Draw.io Integration or Draw.io Integration - Insider Build that adds full markdown support of Mermaid.js.

Mermaid supports:

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

via a simple markup language

Installation

• VS Code Marketplace
• OpenVSX Marketplace

Overview

• Example diagrams

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

1. git clone --recursive https://github.com/nopeslide/drawio_mermaid_plugin.git
2. cd drawio_mermaid_plugin/drawio_desktop
3. npm install
4. npm run build
5. cd ../vscode
6. npm install
7. npm run vscode:package

Draw.io desktop

See github for the desktop variant of this plugin.