Visual editor, viewer, theme editor and visual diff for Mermaid diagrams, as framework-agnostic web components.
Mermaid stays the source of truth — layout and styling live in comment lines every Mermaid renderer ignores.
Documentation · Live demo · Storybook
Mermaid's auto-layout and styling are hard to control. Mermaid Studio lets you lay out and style a diagram by hand and stores the result as %%@ comment lines in the same Mermaid text. The file stays valid Mermaid: GitHub, GitLab or any stock renderer still draws it, and Mermaid Studio draws it exactly as you arranged it.
- Visual editing of flowcharts, sequence diagrams and ER diagrams, two-way with the Mermaid code.
- Viewer for documentation: pan, zoom, layers, full screen, export, server-side rendering to SVG.
- Visual diff and history: how a diagram changed between versions, in the browser or in CI.
- Themes with a theme editor; diagrams follow light and dark.
- Export to
.mmdx, portable.mmd, SVG and PNG. - Framework-agnostic custom elements, secure by default (untrusted input, strict CSP).
npm install @mmdx/studio<script type="module">
import '@mmdx/studio/viewer';
</script>
<mmdx-viewer controls="zoom layers fullscreen export">
<script type="text/mermaid">
flowchart LR
a[Start] --> b{Check} --> c[Done]
</script>
</mmdx-viewer>import '@mmdx/studio/editor';
import { httpDocumentAdapter } from '@mmdx/studio/adapters';
document.querySelector('mmdx-editor')!.adapter = httpDocumentAdapter('/api/diagrams/architecture.mmdx');See Getting started for the editor, the diff, server-side rendering and frameworks.
- Guide: the
.mmdxformat, themes, documents and history, Markdown, frameworks, sandboxed iframes, security - Components:
<mmdx-viewer>,<mmdx-editor>,<mmdx-diff>,<mmdx-theme-editor>,<mmdx-studio> - API: entry points, core, adapters, events, the theme file
- Changelog
pnpm install
pnpm dev # the studio at http://localhost:8790
pnpm testSee Contributing for every command and the repository layout.