hidekazu-konishi.com

Mermaid Diagram Live Editor Tool - Real-time Flowchart, Sequence, ER, and AWS Architecture Diagram Editor with SVG and PNG Export

First Published: 2026-04-28
Last Updated: 2026-04-28

This tool provides a real-time Mermaid diagram editor with side-by-side SVG preview. Write Mermaid syntax on the left and instantly see the rendered diagram on the right - flowcharts, sequence, class, state, ER, gantt, pie, mindmap, timeline, and architecture diagrams are all supported, including a ready-to-use AWS architecture preset. Export to SVG, PNG, or copy as a Markdown code block. All processing is performed entirely in your browser.

Features

• Real-time SVG preview - The right pane re-renders within 400 ms after you stop typing, with stale-render guards so only the latest source paints.
• Ten supported diagram types - Flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline, plus Mermaid v11 native architecture-beta.
• Theme switching - Choose from Mermaid's five built-in themes: default, forest, dark, neutral, and base. Selection is persisted to browser storage.
• SVG export - Download the rendered diagram as a standalone .svg file with proper XML namespaces injected for portability.
• PNG export - Rasterize the SVG to PNG via an offscreen <canvas> at 1x / 2x / 3x / 4x scale, with a configurable background (white, light gray, dark, transparent).
• Markdown embed code - One click copies a fenced ```mermaid code block ready for GitHub, GitLab, Obsidian, or any Markdown processor that supports Mermaid.
• SVG markup copy - Copy the raw SVG markup to your clipboard for pasting into HTML, design tools, or vector editors.
• Eleven preset examples - Curated starter templates for every supported diagram type, including a complete AWS architecture flowchart preset.
• Auto-save with restore - Your most recent draft, theme, background color, and PNG scale are saved to localStorage and restored automatically on the next visit.
• Keyboard shortcuts - Tab inserts spaces, Ctrl/Cmd+S forces a save, and Ctrl/Cmd+Enter forces an immediate re-render.
• Fit-to-container toggle - Switch between fit-to-pane (max-width:100%) and natural SVG dimensions for fine-tuning visual scale.
• Inline error display - Mermaid parse errors are surfaced in a dedicated red panel without disrupting the previous successful render.
• Responsive design - The split-pane layout collapses into Editor / Preview tabs on narrow screens for a full-width mobile experience.
• 100% client-side - All parsing and rendering run inside your browser. No data is sent to any server. Works offline once loaded.

How to Use

1. Type or paste Mermaid syntax in the left pane. The right pane updates automatically as you type.
2. Pick an example from the Example dropdown and press Load to populate the editor with a starter template.
3. Switch the Theme dropdown to recolor the diagram (default / forest / dark / neutral / base).
4. Configure PNG BG (background color) and PNG Scale (1x to 4x) before exporting raster images.
5. Click Export SVG for vector output or Export PNG to save a raster image to your device.
6. Click Copy Markdown to copy a fenced ```mermaid block, or Copy SVG for raw SVG markup.
7. Toggle Fit to switch between fit-to-pane and the SVG's natural size.
8. Use Clear to wipe the editor. Your draft is auto-saved and will be restored when you return.

Keyboard Shortcuts

• Tab - Insert four spaces (instead of moving focus).
• Ctrl+S (Cmd+S on Mac) - Force-save the current draft to browser storage.
• Ctrl+Enter (Cmd+Enter on Mac) - Force an immediate re-render, bypassing the debounce.

Important Notes

• The auto-save mechanism keeps only the most recent draft. For revision history, export the source to a file or commit it to version control.
• PNG export rasterizes the currently rendered SVG; very large diagrams at 4x scale may take a moment to encode.
• The transparent background is honored by PNG export, which is useful when overlaying diagrams on slides or dark themes.
• Mermaid is configured with securityLevel: "strict", which sandboxes link clicks and disables HTML in labels for safety. If you need clickable links inside diagrams, render the exported SVG outside this tool.
• The architecture-beta diagram type is still marked beta upstream. AWS-style architectures are also provided as a flowchart preset that uses text labels in lieu of vendor icons (icon-set distribution requires separate licensing).
• This tool is distinct from the Markdown Live Editor Tool which focuses on Markdown-to-HTML editing, and the Chart / Graph Maker Tool which focuses on data-driven bar / line / pie charts.

Common Use Cases

• Architecting cloud systems: Sketch AWS workloads visually using the bundled AWS architecture flowchart preset, iterate on the layout, and export an SVG to embed in design documents, RFCs, and runbooks.
• Documenting APIs and workflows: Use sequence diagrams to capture request flows between clients, gateways, services, queues, and databases. Paste the resulting Markdown code block directly into GitHub README files for native rendering.
• Modeling state machines: Use the state diagram preset to draft state machines for AWS Step Functions, frontend forms, or workflow engines, then iterate quickly with live preview.
• Designing data models: Use ER diagrams to draft DynamoDB / Aurora schemas with primary and foreign keys before turning them into CloudFormation or migrations.
• Project planning: Use Gantt charts to visualize sprint timelines and dependencies. Export to PNG at 3x scale to drop into slide decks at high resolution.
• Knowledge maps and brainstorming: Use mindmaps and timelines to organize study notes (for example, an AWS Well-Architected mindmap or AWS compute history timeline) into reusable diagrams.
• Teaching and learning Mermaid: The instant feedback loop, error panel, and curated example library make this a fast environment for learning Mermaid syntax.

About Mermaid

Mermaid is an open-source JavaScript library that renders diagrams from a simple text-based syntax. It was created by Knut Sveidqvist in 2014 and has since become one of the most widely supported "diagrams as code" formats - GitHub, GitLab, Notion, Obsidian, Azure DevOps, and many static-site generators all render Mermaid blocks natively in Markdown.

By describing diagrams as text, Mermaid documents inherit the strengths of plain text: they can be diffed, code-reviewed, and version-controlled with Git. They render consistently across every reader's machine without binary attachments. And because the syntax is high level, a small change to a label or arrow rebuilds the entire layout automatically.

• Flowcharts: Top-down, left-to-right, and graph-style flowcharts with subgraphs, decision shapes, and styled classes - the most general-purpose diagram type and the basis for the AWS architecture preset in this tool.
• Sequence diagrams: Show interactions between participants over time, with synchronous / asynchronous messages, activations, loops, and notes.
• Class & state diagrams: UML-flavored class hierarchies and state machines for software design discussions.
• ER diagrams: Entity-relationship diagrams for database modeling, with cardinality notation and column-level details.
• Gantt charts: Time-based project planning with sections, dependencies, and styled status (done / active / pending).
• Pie charts, mindmaps, and timelines: Lightweight data visualizations and idea-organization diagrams for slides and notes.
• architecture-beta: A newer diagram type added in Mermaid v11 specifically for cloud / system architecture diagrams, using groups, services, and edge connectors.

This tool ships Mermaid v11.14.0 self-hosted alongside the page, so the editor continues to work offline once loaded. The library is loaded with a deferred <script> tag and the application code polls for the global before initializing, ensuring the toolbar is responsive even before the parser is ready.

Frequently Asked Questions

• Why did my diagram suddenly stop rendering after a small edit? Mermaid is whitespace- and indentation-sensitive. Look at the red error panel under the bottom bar - it shows the parser's first few error lines, which usually point at the offending character or line. The previous successful render stays on screen so you can compare against it.
• How do I add AWS service icons? This tool intentionally ships without official AWS / cloud-vendor icon sets because their distribution requires separate licensing. The bundled AWS Architecture (flowchart) preset uses text labels (for example EC2, S3, Lambda) inside styled boxes so the diagram remains expressive without proprietary assets.
• Why does my exported PNG look pixelated? Increase the PNG Scale dropdown to 3x or 4x before exporting. The tool rasterizes onto an offscreen canvas at that scale, producing crisp output for high-DPI screens and slide decks.
• How is my work saved? The most recent draft, theme, PNG background, and PNG scale are auto-saved to your browser's localStorage a short time after the last keystroke. They're restored automatically the next time you visit the page in the same browser. Clearing browser data removes the saved draft.
• Can I use this offline? Yes. After the page loads once, the bundled Mermaid library and tool script are cached by your browser and the editor continues to work without an internet connection.
• Is my diagram source private? Yes. Parsing, rendering, and export all run client-side. No data is sent to any server.
• Why does Mermaid render with strict security? The tool initializes Mermaid with securityLevel: "strict", which sandboxes embedded HTML and click handlers. This protects you when pasting Mermaid source from untrusted places. If you need fully interactive diagrams, render the exported SVG in a context you control.
• Which Mermaid version does this tool ship? Mermaid v11.14.0, self-hosted under /js/mermaid/mermaid.min.js. New diagram types added in v11 (such as architecture-beta, timeline, mindmap) are all supported.
• Are other diagram types supported? Mermaid v11 also recognizes gitGraph, journey, quadrantChart, requirementDiagram, C4Context, kanban, and sankey. The tool ships preset examples only for the ten most-used types listed above, but you can paste source for any other type directly into the editor and it will render.
• Heads-up: very large diagrams. PNG export rasterizes the rendered SVG at 2× scale via the browser's Canvas API; on mobile devices, diagrams larger than roughly 50 KB of source or with hundreds of nodes can exhaust the tab's memory. If you hit a render or export error on a big diagram, try splitting it into smaller sub-diagrams or exporting SVG instead of PNG.