Mark Ku's Blog
VS Code 擴充套件

Super Mermaid

開箱即用的漂亮 Mermaid 圖表 — 自動上色、即時預覽、滑鼠平移縮放，PNG / SVG 高解析匯出。

前往 Marketplace 安裝GitHub 原始碼
⭐ 免費 · 開源 (MIT)🛰️ 離線可用 · 內建 Mermaid 引擎
diagram.mmd
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: 顯示錯誤訊息
  end
即時預覽

主要功能

為了讓 Mermaid 圖表「開箱就漂亮」而生的細節

🎨

自動上色，不用自己調

不管是自己寫的，還是 AI 幫你生成的 Mermaid 語法，存檔就自動變成配色好看的圖，圓角、陰影、子圖分色全部免調；還有手繪風跟深色主題可以切換。

⚡

邊改邊看，不用等

改一個字，圖大概 0.3 秒內就跟著變；就算中途打錯字（或 AI 生成到一半語法還沒對），畫面也不會整個變空白，還是看得到上一次成功畫出來的圖。

🔍

圖太大也不怕

AI 一次生成的架構圖常常又大又複雜，滑鼠滾輪縮放、拖曳就能移動視角，一鍵符合視窗寬度，不用瞇眼睛找細節。

🖼️

存成圖片，隨你用

圖畫好了要放進簡報、文件、或傳給不用 VS Code 的同事看，一鍵存成 PNG / JPG / WebP / SVG，也能直接複製貼上，不用截圖再裁切。

🧭

點一下就知道是哪段程式碼

AI 或同事幫你畫的一大張圖，哪個框對應哪一段語法常常要找半天；點一下節點就直接跳到那一行，圖跟程式碼再也不用分開理解。

📽️

開會直接秀圖，不用切 PPT

要跟人講架構的時候，全螢幕播放、翻頁、Gallery 一次看完所有圖，多螢幕也能彈出獨立視窗，圖表就是你的簡報。

🧩

不熟語法也能上手

打字有提示、21 種範本一鍵插入起手式；或是乾脆請 AI 幫你把草稿寫好，你只要看得懂、微調就好。

🔗

一鍵分享，不用互傳檔案

圖畫好想找人討論、或丟給 AI 助手一起看，一個按鍵就產生連結，對方打開瀏覽器就看得到、還能接著改。連結會開到站上的 Mermaid 線上預覽頁（外部網站），程式碼只放在網址 # 之後、不會送給伺服器，但拿到連結的人就看得到這張圖。

支援的圖表類型

點選類型即時渲染範例 — Mermaid 全系列圖表都能畫

Loading diagram…

拖曳平移、滾輪縮放，工具列可切換主題與匯出 PNG / SVG。在 VS Code 裡同樣開箱即用。

人 × AI 協作

為什麼跟 AI 講架構，最好用 Mermaid

因為同一份東西，對人來說是一張圖，對 AI 來說就是幾行文字。中間不用翻譯。

同一份系統架構，換個講法差多少

省下約 3–6 倍
用純文字描述約 2,000 tokens

一句一句講誰呼叫誰、什麼情況走哪條，又長又容易漏。

用 Mermaid 語法約 400–500 tokens

同樣的資訊，AI 一眼就看懂整張圖的結構。

token 就是 AI 的閱讀量，也是你的帳單和它一次能記住的上限。省下來的額度不會消失，會變成它多讀你幾支程式碼的空間。

🗣️

人看到圖，AI 看到字

同一份 Mermaid 原始碼，渲染出來是給人看的圖，貼進對話就是給 AI 看的文字。不用先截圖再解釋，兩邊講的是同一張圖。

✂️

省 token，等於省錢也省記憶

把架構寫成圖，比用文字一段段描述省下 3 到 6 倍的 token。對話能撐更久，AI 也更不容易忘記前面講過什麼。

✏️

AI 改得動，不必重新畫

架構要調整時，AI 只要改一行 A --> B，圖就跟著變。截圖或 .drawio 檔做不到，只能請人重開工具重畫一次。

🔀

跟程式碼一起進版控

圖表是純文字，可以跟 code 放進同一個 commit，diff 一看就知道這次架構動了哪裡，比較不會跟現實脫節。

新功能

視覺化繪製編輯器

像 Excalidraw 一樣在畫布上拖拉節點，存檔自動回寫成乾淨的 Mermaid 原始碼。

Visual Studio Code — Super Mermaid
在 VS Code 裡用 Super Mermaid 的視覺化繪製編輯器編輯訂單流程圖，右側為 Claude Code 協作面板

在 VS Code 中以繪製編輯器調整訂單流程圖 — 左為 Markdown 原始碼，右為 AI 協作面板。

  • 雙向同步：在畫布上拖曳、連線、改字，即時 round-trip 回 Mermaid 語法。
  • 直接在 VS Code 裡作圖，與檔案、Git、AI 助手（如 Claude Code）並肩協作。
  • 不必背語法也能起稿，畫完就拿到可進版控的純文字圖表。

常用快速鍵

  • 進入簡報模式p
  • 複製圖表到剪貼簿c
  • Gallery 一頁瀏覽g
  • 符合寬度w
  • 圖內搜尋/ 或 Ctrl+F

如何安裝

  1. 1

    在 VS Code 按 Ctrl+Shift+X 開啟擴充套件面板。

  2. 2

    搜尋「Super Mermaid」，點擊 Install 安裝。

  3. 3

    開啟含有 mermaid 區塊的 .md，或 .mmd / .mermaid 檔，點預覽圖示即可開始。

也可在 Marketplace 直接安裝，或在命令列執行下方指令。

還有其他 Mermaid 工具

同一套繪圖引擎，看你在哪裡用

React Super Mermaid

想把圖表放進自己的 React 專案？一行 <MermaidViewer> 就有主題、縮放、匯出。

前往看看

Jira / Confluence Super Mermaid

團隊在 Jira、Confluence 上溝通用，圖直接嵌在 issue 或頁面內文裡。

前往看看

Mermaid 線上預覽

不想安裝任何東西？瀏覽器打開就能寫、能看、一鍵分享連結。

前往看看

讓你的 Mermaid 圖表開箱即美

免費、開源、離線可用。現在就到 VS Code Marketplace 安裝 Super Mermaid。

立即安裝GitHub 原始碼
Mark Ku's Blog
FacebookYouTubeGitHubEmail

文章分類

快速連結

技術專長

Super Mermaid — VS Code Mermaid 圖表擴充套件 | Mark Ku 的技術部落格 - Mark Ku's Blog