代理寫的 Mermaid 圖表，
直接畫出來，而不是輸出成程式碼
讓 Claude Code 或 Codex 畫一張圖，它會寫出 Mermaid：一段終端只能原樣輸出的文字。AgentsRoom 在您閱讀代理所寫內容的任何地方把它畫出來，程式碼也只需一鍵即可檢視。
對話檢視、Markdown 檔案、計劃審查中的計劃、筆記、專案記憶和待辦工單：每個 mermaid 程式碼塊都會變成圖表，跟隨應用的淺色或深色主題，在 macOS、Windows 和 Linux 上都可用。無需安裝任何東西，不需要技能，也不需要 MCP 伺服器。
```mermaid
flowchart LR
A[Login] --> B{Token valid?}
B -->|yes| C[Dashboard]
B -->|no| A
```同一個 mermaid 程式碼塊：終端輸出的樣子，和 AgentsRoom 畫出的樣子。
問 Claude Code 一個請求如何在您的應用中流轉，或者讓 Codex 勾勒一次遷移涉及的表，您常常會收到一個以 mermaid 開頭的程式碼塊：流程圖、時序圖或實體關係圖，都是以文字寫成的。終端只能原樣輸出它，於是您只能讀著用短橫線拼成的箭頭，在腦子裡把方框畫出來。
AgentsRoom 讀取同樣的 Markdown，並把它畫出來。程式碼塊滾動進入視野時就會變成圖表，懸停時出現的「顯示程式碼」按鈕可以調出原始碼，「顯示圖表」則回到圖形。如果代理寫出了語法錯誤，程式碼會留在螢幕上，並附一行說明圖表無法繪製，所以您永遠不會丟失它寫的內容。
繪製不依賴於 CLI：它由應用的 Markdown 閱讀器根據文字完成。Codex 寫在 README 裡的圖表、Claude Code 寫在計劃裡的圖表，或者其他任何代理寫在工單裡的圖表，都以同樣的方式繪製。
閱讀代理時有什麼不同
應用中所有顯示 Markdown 的地方都遵循同一條規則：mermaid 程式碼塊以圖表形式顯示。
在您閱讀代理的每個地方
對話檢視、檔案預覽和檔案分頁中的 Markdown 檔案、計劃審查中的計劃、筆記、專案記憶筆記、待辦工單及其評論，以及「私下提問」的回答。
代理邊寫邊畫
代理是一行一行地寫圖表的。AgentsRoom 會等文字穩定片刻再繪製，同時把上一個有效的圖表保留在螢幕上，所以程式碼塊不會在程式碼和圖形之間閃爍。
原始碼一鍵可見
懸停在圖表上並點選「顯示程式碼」，即可閱讀生成它的 Mermaid 文字，再點選「顯示圖表」返回。原始碼從不會被替換，只是換一種方式顯示。
出錯的圖表依然可讀
當 Mermaid 無法解析程式碼塊時，程式碼會留在螢幕上，下方附一行「無法繪製此圖表：已改為顯示其程式碼。」您可以原樣把它交還給代理。
Mermaid 11 的所有圖表
流程圖、時序圖、類圖、狀態圖、實體關係圖、甘特圖、思維導圖、Git 圖：Mermaid 11 能畫的，AgentsRoom 都能畫。
螢幕外的不繪製
圖表只有在接近螢幕時才會佈局，一次一個，結果會被保留。一段滿是圖表的長對話，對於您還沒滾動到的圖表不產生任何開銷。
如何使用
無需開啟任何設定。從提問到圖表，只需四步。
- 1
請求一張圖表
對任意代理用平常的話提出：把登入流程畫成 Mermaid 流程圖，或者把這個 API 呼叫展示成時序圖。通常只要提到 Mermaid，代理就會用 mermaid 程式碼塊回答。
- 2
在對話檢視中閱讀
把代理的面板切換到對話檢視：程式碼塊會以圖表形式出現在代理的回答中。下面的終端不會改變，仍然顯示文字。
- 3
或者開啟它寫的檔案
當代理把圖表放進 Markdown 檔案（README、架構說明、計劃）時，可以透過它回答中的檔案連結、右側面板的「檔案」分頁，或者 檔案 > 開啟檔案（macOS 上按 Cmd O，Windows 和 Linux 上按 Ctrl O）開啟：預覽和檔案分頁會繪製其中的每一張圖表。
- 4
檢查原始碼
懸停在圖表上並點選「顯示程式碼」來閱讀或複製 Mermaid 文字，再點選「顯示圖表」回到圖形。
終端、GitHub 和 Mermaid 技能已經能做什麼
Claude Code 和 Codex CLI 執行在終端裡，而終端輸出的是字元，不是圖形：mermaid 程式碼塊顯示為原始碼。這不是 CLI 少了某個設定，終端本來就是這樣。
所以人們會去找 Claude Code 的 Mermaid 技能、外掛或 MCP 伺服器。它們幫助代理寫出有效的圖表，或把它匯出為圖片檔案。但要閱讀圖表，您仍然得把程式碼貼上到能繪製它的地方：GitHub 會繪製 Markdown 檔案和評論中的 mermaid 程式碼塊，mermaid.live 會繪製您貼上的任何內容，編輯器的 Markdown 預覽則藉助 Mermaid 擴展來繪製。
AgentsRoom 並不取代這些工具。它省掉的是您本來就在閱讀代理時的複製貼上：圖表直接畫在對話、計劃或您已經在代理旁邊開啟的檔案裡。
限制
- 代理的原始終端仍然顯示原始碼：繪製發生在對話檢視和 Markdown 閱讀器中，而不是在終端網格里。
- 對話檢視適用於 AgentsRoom 能讀取其會話記錄的 CLI：Claude Code、Codex、Grok Build、Mistral Vibe、oh-my-pi、Pi 和 Antigravity CLI。使用其他 CLI 時，請開啟代理寫的 Markdown 檔案。
- 圖表使用 Mermaid 的 dark 和 neutral 主題，與應用的淺色或深色主題相匹配。它們不會採用您的強調色。
- 圖表中的連結只會開啟 http 或 https 地址，和 Markdown 連結一樣。指向本地檔案的連結不會有任何反應。
- 標籤都是純文字：圖表中的 HTML 和腳本會被移除，圖表裡寫的配置行也無法改變這一點。
- 沒有匯出按鈕：如果想把圖表儲存為 PNG 或 SVG 檔案，請讓代理用 Mermaid 的命令列工具匯出。
常見問題
Claude Code 能渲染 Mermaid 圖表嗎？
在終端裡不能。Claude Code 把 Mermaid 圖表寫成程式碼塊，終端只能把它作為文字輸出。在 AgentsRoom 中執行同一個代理，並把它的面板切換到對話檢視：程式碼塊會在回答中被畫成圖表，「顯示程式碼」按鈕可以調出原始碼。
如何預覽代理寫在 Markdown 檔案中的 Mermaid 圖表？
在 AgentsRoom 中開啟該檔案：點選代理回答中的檔案連結，在右側面板的「檔案」分頁中選擇它，或者使用 檔案 > 開啟檔案（macOS 上按 Cmd O，Windows 和 Linux 上按 Ctrl O）。Markdown 預覽，以及以分頁開啟時的檔案分頁，會繪製檔案中的每個 mermaid 程式碼塊。
它支援 Codex 和其他代理 CLI 嗎？
支援。無論是哪個 CLI 寫的，圖表都由應用的 Markdown 閱讀器根據文字繪製，所以來自 Codex、Claude Code 或其他任何代理的圖表，在檔案、計劃、筆記和工單中都以同樣方式繪製。對話檢視會在回答到達時就把它們畫出來，支援 Claude Code、Codex、Grok Build、Mistral Vibe、oh-my-pi、Pi 和 Antigravity CLI。
我需要 Mermaid 技能或 MCP 伺服器嗎？
閱讀圖表不需要。技能或 MCP 伺服器可以幫助代理寫出有效的 Mermaid，或把它匯出為圖片。AgentsRoom 只負責繪製已經寫好的內容，所以兩者可以配合使用：技能讓圖表更好，AgentsRoom 把它展示出來。
會繪製哪些圖表型別？語法錯誤怎麼辦？
Mermaid 11 能繪製的一切：流程圖、時序圖、類圖、狀態圖、實體關係圖、甘特圖、思維導圖、Git 圖，以及它目錄中的其餘型別。Mermaid 無法解析的程式碼塊會保持為程式碼，下方附一行說明圖表無法繪製。讓代理修正它：修正後的程式碼塊就會被繪製出來。
您可能還喜歡
對話檢視
面向 Claude Code、Codex 及另外五個代理 CLI 的聊天檢視：會話讀自 CLI 自己的會話記錄，工具呼叫摺疊，回答即時顯示，桌面和手機都能用。
計劃審查
你的代理提出計劃後，像讀文件一樣讀它，對任意段落評論、替換或刪除，再用一條訊息批准或退回。每個版本都會保留。
專案記憶
為您的 AI 編碼代理提供長期記憶。決策、架構和陷阱在會話之間持續存在，並與專案中的每個人共享。免費，無限制。
私下提問
向正在忙的 AI 程式設計代理提問，而不打斷它。它對話的一份唯讀副本在帶分頁的氣泡裡回答，終端照常工作。支援 Claude Code、Codex、Grok、GitHub Copilot CLI、OpenCode、Mistral Vibe、Antigravity CLI 和 Kimi Code，電腦和手機上都能用。
把代理的圖表當圖表來讀
下載適用於 macOS、Windows 或 Linux 的 AgentsRoom，讓代理畫一張 Mermaid 圖表，並把它的面板切換到對話檢視。
配套應用：隨時隨地監控你的 Agent
使用 Claude、Codex、Antigravity CLI 或其他 AI 提供商。
把 Bug 和需求直接傳送到您的公開待辦清單。