Beautiful Mermaid diagrams out of the box — auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export.
sequenceDiagram
autonumber
actor U as 使用者
participant W as Web 前端
participant API as Auth API
participant DB as 資料庫
U->>W: 輸入帳號密碼
W->>API: POST /login
API->>DB: 查詢使用者
DB-->>API: 使用者資料
alt 密碼正確
API-->>W: 200 OK + JWT
W-->>U: 導向會員中心
else 密碼錯誤
API-->>W: 401 Unauthorized
W-->>U: 顯示錯誤訊息
endThe little details that make Mermaid diagrams beautiful out of the box
Whether you wrote the Mermaid yourself or an AI generated it for you, saving the file turns it into a nicely colored diagram for free — rounded corners, soft shadows, subgraphs tinted automatically. Sketch and dark themes are one click away.
Edit a line, see the diagram update in about 0.3s. Mid-edit typo (or an AI still mid-generation)? It keeps showing the last successful render instead of flashing blank.
A single AI-generated architecture diagram can get huge fast — mouse-wheel to zoom, drag to pan, one click to fit the width. No more squinting for details.
Need the diagram in a slide deck, a doc, or for a coworker without VS Code? Export to PNG / JPG / WebP / SVG in one click, or copy it straight to the clipboard — no screenshot-and-crop.
A big diagram an AI or teammate drew for you — figuring out which box maps to which line used to mean hunting through the file. Click the node and jump straight to it.
Go full-screen, flip through diagrams, browse everything at once in Gallery view, or pop out a window for a second monitor — the diagram is the slide deck.
Syntax highlighting and autocomplete help as you type, 21 built-in templates give you a starting point — or just ask an AI to draft it and tweak from there.
Want a teammate — or an AI assistant — to look at the same diagram? One click makes a link; whoever opens it can view and keep editing right in the browser. The link opens the Mermaid live preview page on this site (an external website); your code rides in the URL fragment and is never sent to a server, but anyone holding the link can see the diagram.
Click a type to render it live — the full range of Mermaid diagrams
Drag to pan, scroll to zoom, and use the toolbar to switch theme or export PNG / SVG. Works the same out of the box inside VS Code.
The same artifact is a picture to you and a few lines of text to the model. Nothing gets lost in translation.
Spelling out who calls what, and which branch runs when. Long, and easy to leave something out.
Same information, and the model sees the whole structure at a glance.
Tokens are how much the model can read at once, and what you pay for. The budget you save doesn't vanish, it becomes room for the model to read more of your actual code.
One Mermaid source renders as a picture for you and reads as plain text for the model. No screenshot-then-explain round trip, you are both looking at the same diagram.
A diagram costs 3–6× fewer tokens than the same thing spelled out in prose. Conversations last longer, and the model is less likely to forget what you said earlier.
When the architecture changes, the model edits one A --> B line and the diagram follows. A screenshot or a .drawio file has to be reopened and redrawn by a human.
Diagrams are plain text, so they land in the same commit as the code and show up in the diff. Far less likely to drift away from reality.
Drag nodes around the canvas like Excalidraw — saving round-trips straight back to clean Mermaid source.
Adjusting an order-flow diagram in the draw editor inside VS Code — Markdown source on the left, AI panel on the right.
Press Ctrl+Shift+X in VS Code to open the Extensions panel.
Search for "Super Mermaid" and click Install.
Open a .md with a mermaid block, or a .mmd / .mermaid file, then click the preview icon to start.
You can also install directly from the Marketplace, or run the command below in your terminal.
Same rendering engine, wherever you need it
Need diagrams inside your own React app? One <MermaidViewer> line gets you themes, zoom and export.
Check it outFor teams collaborating in Jira and Confluence — diagrams live right inside the issue or page.
Check it outDon't want to install anything? Write, preview and share a link straight from the browser.
Check it outFree, open source, and works offline. Install Super Mermaid from the VS Code Marketplace now.