MermaidStudio is a full-featured, browser-based Mermaid.js editor. Write diagram code, get live previews, generate with AI, export and share — all from one page.
flowchart TD A([🚀 Start]) --> B{Decision?} B -->|Yes| C[Action A] B -->|No| D[Action B] C --> E([✅ Done]) D --> E sequenceDiagram User->>Server: Login Server-->>DB: Query DB-->>Server: OK Server-->>User: Token
MermaidStudio packs professional-grade tools into a single, fast-loading PHP file. No installation. No database. No subscription.
Your diagram renders in real-time as you type. The preview panel updates automatically after a configurable delay (default 500ms), powered by Mermaid.js v11 running entirely in the browser.
Auto-renderA full-featured code editor with syntax highlighting (Dracula & Default themes), line numbers, undo/redo history, word wrap, configurable font size, and keyboard shortcuts — Ctrl+Enter to force render.
Describe your diagram in plain English and let AI write the Mermaid code for you. Supports OpenAI (GPT-4o-mini), Perplexity AI, and Google Gemini. API keys are saved locally in your browser — never on the server.
OpenAI · Perplexity · GeminiGet started in one click with ready-made templates for Flowcharts, Sequence Diagrams, Class Diagrams, State Machines, Gantt Charts, ER Diagrams, Pie Charts, User Journeys, Git Graphs, Mindmaps, Timelines, and C4 Context diagrams.
One-click startSwitch between Default, Dark, Forest, Base, and Neutral diagram themes instantly. The preview background is also customizable between dark, white, and a dot-grid canvas.
CustomizableZoom in, zoom out, reset to 100%, or fit the diagram to the available screen space with a single click. Supports mouse-driven fine control directly on the SVG canvas.
Precise controlExport your diagram as a high-quality PNG or vector SVG via the mermaid.ink service. Both formats are ready for presentations, documentation, and print.
mermaid.ink poweredEvery diagram is encoded directly in the URL as Base64. Share a link and anyone can open and edit your exact diagram — no login, no cloud storage, no data retention.
Zero backendThe last 30 versions of your work are automatically saved to your browser's localStorage. Browse history and restore any previous state with a single click.
Auto-savedGet a one-liner <img> tag to embed your diagram in any website or email, pointing to a permanent mermaid.ink image URL.
Switch the entire editor interface between a dark and light theme with a single toggle — independent of the diagram theme. Your preference is applied instantly.
Eye-friendlyThe split-panel editor works on desktop and mobile. The central divider is draggable to give more space to either the code editor or the preview. On small screens, panels stack vertically.
Mobile-readyFrom technical architecture to project planning, MermaidStudio supports every major Mermaid.js diagram type out of the box.
Visit www.mermaid.skin — no signup, no install, nothing to configure.
Type Mermaid syntax in the editor, pick a template, or use the AI generator to create a diagram from a text description.
The diagram renders instantly as you type. Zoom, pan, and switch themes to get the perfect look.
Download as PNG or SVG, copy a shareable URL, or grab the embed code for your website — all in one click.
Stop writing syntax manually. Just describe what you need in plain English and let the AI generate valid Mermaid.js code. Works with three major AI providers — bring your own API key.
Multiple ways to get your finished diagram out of the editor and into the world.
High-resolution raster image, ready for slides, reports, and Wikis.
Infinite-scale vector graphic. Perfect for web use, print, and further editing in Figma or Illustrator.
The entire diagram is Base64-encoded in the URL. Share it — no server storage, no expiry.
One-line <img> tag that renders your diagram inline on any webpage.
Copy the raw Mermaid syntax to paste in GitHub READMEs, Notion, Confluence, or VS Code.
We benchmarked the key features across the leading online Mermaid editors.
| Feature | MermaidStudio mermaid.skin |
mermaid.live | mermaideditor.com | mermaid.ai | simplemermaid.com |
|---|---|---|---|---|---|
| Live preview | ✔ Yes | ✔ Yes | ✔ Yes | ✔ Yes | ✔ Yes |
| CodeMirror editor | ✔ Yes | ✔ Yes | ✔ Yes | ✘ No | ~ Basic |
| AI generation | ✔ Yes (3 providers) | ✘ No | ✘ No | ✔ Yes | ✘ No |
| Templates library | ✔ 12 templates | ~ Few | ~ Few | ✘ No | ~ Few |
| PNG export | ✔ Yes | ✔ Yes | ✔ Yes | ✔ Yes | ~ Limited |
| SVG export | ✔ Yes | ✔ Yes | ✔ Yes | ✔ Yes | ✘ No |
| Shareable URL | ✔ Yes (Base64) | ✔ Yes | ~ Limited | ✘ No | ✘ No |
| HTML embed code | ✔ Yes | ✘ No | ✘ No | ✘ No | ✘ No |
| Edit history | ✔ 30 snapshots | ✘ No | ✘ No | ✘ No | ✘ No |
| Multiple Mermaid themes | ✔ 5 themes | ✔ Yes | ~ Few | ✔ Yes | ✘ No |
| Dark / light UI theme | ✔ Yes | ✔ Yes | ~ Partial | ✔ Yes | ✘ No |
| No signup required | ✔ Yes | ✔ Yes | ✔ Yes | ~ Freemium | ✔ Yes |
| Single-file deployment | ✔ One PHP file | ✘ No | ✘ No | ✘ No | ✘ No |
| Self-hostable | ✔ Yes | ✔ Yes (open source) | ✘ No | ✘ No | ✘ No |
No signup. No installation. No limits. Just open the editor and start creating.
Open MermaidStudio →