mermaid-canvas
v1.0.0 · stable · utilswrite Mermaid code, watch the graph render live
runs in your browser · nothing is uploaded
about
A two-pane Mermaid diagram studio: an IDE-style editor on the left and a
live graph viewer on the right. Covers 18 diagram types (flowchart,
sequence, class, state, ER, gantt, pie, journey, git, C4, mindmap,
timeline, quadrant, sankey, xychart, block, packet, architecture) with
full theming, 18 one-click snippets, and export to SVG, PNG and Markdown.
Runs 100% in the browser and ships as a Docker image for self-hosting.
what it does
- Two-pane editor and viewer
- Mermaid code in an IDE-style editor on the left (line and column, Tab indent, Ctrl+Enter to render) and the rendered graph on the right, with the split flippable horizontal or vertical.
- Eighteen diagram types
- flowchart, sequence, class, state, ER, gantt, pie, journey, git graph, C4, mindmap, timeline, quadrant, sankey, xy chart, block, packet and architecture.
- Insert palette and snippets
- A snippets panel of one full working example per diagram type, plus a per-type palette of fragments — nodes, edges, participants, messages, tasks, commits — that insert at the cursor.
- Themes, built in and custom
- Default, dark, forest and neutral, or a custom base theme with your own accent and background colours; individual Mermaid theme variables override through a %%{init}%% block.
- SVG, PNG and Markdown export
- Export the graph as SVG, as PNG at 2×, or as a Markdown code block, copy the source, and save or open .mmd files with Ctrl+S and Ctrl+O.
- Inline errors, offline rendering
- A parse error appears inline with its exact message and line rather than blanking the viewer, and Mermaid 11.4.1 is bundled locally — no CDN — so the Docker image renders fully offline.
run your own
Run your own instance
docker compose up -d --buildOne container, no database and no external service — nginx with mermaid-canvas.html as the index — so it is deployable inside a closed network.
Deploy it on an isolated network
docker run -d -p 8080:80 diagramm-studioThere is no CDN fetch and no telemetry in the page: the 2.5 MB mermaid.min.js is served from the same container. The tool was written as an internal deployment for the BEV CIO IT-Steuerung und Strategie, which is why its README is in German.
install
Nothing to install — open the hosted studio
The editor is served from this site at https://kmail.at/mermaid-canvas/mermaid-canvas.html. Write Mermaid, watch it render, export; nothing is uploaded and no account is needed.
Docker Compose
git clone https://github.com/mokmail/mermaid-canvas && cd mermaid-canvas && docker compose up -d --buildBuilds an nginx:1.27-alpine image tagged bev-cio/diagramm-studio:latest and serves it on http://localhost:8080 (container port 80, restart: unless-stopped). Mermaid is copied into the image, so the container needs no network.
Directly with Docker
docker build -t diagramm-studio . && docker run -d -p 8080:80 diagramm-studioThe same image without Compose: a static nginx server with X-Content-Type-Options, X-Frame-Options and Referrer-Policy headers, and a one-year immutable cache on mermaid.min.js.
No Docker at all
python3 -m http.server 8080The app is mermaid-canvas.html plus mermaid-canvas.css and the bundled mermaid.min.js — any static file server serves it, with no build step.
synopsis
open https://kmail.at/tools/mermaid-canvas # or self-host: git clone https://github.com/mokmail/mermaid-canvas && cd mermaid-canvas && docker compose up -d --buildchangelog
- v1.0.0initial release: 18 diagram types, 19 snippets, theming, SVG/PNG/MD export, Docker image