Claude Code 能畫圖嗎：流程圖、架構圖、原型頁怎麼讓它生成，artifact、Mermaid 和輸出風格三種做法

本文根據 Claude Code 官方文檔《Share session output as artifacts》《Output styles》《Common workflows》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是介面截圖。本站（bigolab.com）不是 Anthropic 官方網站。

適用於誰

• 搜「claude code 能畫圖嗎」「claude code 生成流程圖」的人；
• 想讓它把代碼結構、數據流、接口調用畫出來的人；
• 想要一個能點擊、能分享的原型或對比頁面的人。

結論先說

1. 終端本身只顯示文字，所以「畫圖」的實際做法是讓它生成文件（Mermaid 文本、SVG、HTML），或者發佈成 artifact。
2. artifact 是官方功能：官方說它把 Claude Code 的工作變成 claude.ai 上的實時交互頁面，可以保持私有、分享給組織或發佈成公開連結；適合「用眼睛看比一行行讀更方便」的輸出，比如圖表、對比方案、帶註釋的差異。
3. 官方的輸出風格文檔裏有一個 Mermaid 例子：寫一個「Diagrams first」風格，讓 Claude 解釋代碼、架構或數據流時先畫 Mermaid 圖。
4. Claude 也能讀圖：官方常用工作流頁說明可以把截圖、設計稿、圖表給它分析。反過來的「畫圖」要靠上面幾種辦法。
5. 生成的圖一定要對照代碼核對，箭頭和分支是否真實存在，別直接放進文檔。

圖：本站根據 Claude Code 官方文檔：Artifacts 整理的示意圖

一、做法一：讓它寫 Mermaid / SVG / HTML 文件

直接在提示裏說清楚要什麼、儲存到哪：

text
讀一下 src/auth/ 下的登入流程，用 Mermaid 的 sequenceDiagram 畫出
從用戶提交表單到拿到 token 的請求路徑，儲存為 docs/login-flow.md，
節點不超過 15 個，圖下面用三句話說明每一步。

text
根據 src/orders/ 的狀態流轉，畫一張 flowchart TD 的訂單狀態圖，
只畫代碼裏真實存在的狀態和轉換，沒有把握的地方標註「待確認」。

要點：

• 讓它讀代碼再畫，並要求「只畫代碼裏存在的」，避免它憑印象補步驟；
• 指定圖的類型：官方示例裏用的是 flowchart TD（控制流）和 sequenceDiagram（請求路徑），並建議保持在 15 個節點以內；
• 格式選擇：Mermaid 是文本源碼，需要支持它的環境才會顯示成圖（這點不在 Claude Code 官方文檔裏，請按你用的文檔工具確認）；想要不依賴渲染器的圖，可以讓它寫 SVG 或 HTML。官方 artifact 頁的省 token 建議也是：畫圖優先用 SVG，或 HTML 加 CSS，而不是嵌入位圖。

Claude 在對話裏生成圖片、PNG 圖表的能力屬於 Claude 應用，不屬於 Claude Code，區別見 /guides/claude-image-generation。

二、做法二：發佈成 artifact

官方舉的用法包括：給評審者帶註釋地走一遍 PR、用已拿到的數據渲染儀表盤、並排比較幾種設計或實現方案、在長任務裏維護調查時間線。提示詞示例（官方原文大意）：

text
做一個 artifact，帶註釋地講解這個 PR，把差異渲染出來，按嚴重程度給發現的問題上色。

畫流程圖時可以這樣說：

text
做一個 artifact：用 SVG 畫出支付回調的處理流程，每個節點可以點擊展開說明，
說明文字取自 src/payments/ 裏的註釋和代碼。

官方限制，務必先看：

• 套餐：Pro、Max、Ultra、Team、Enterprise；
• 登入：會話必須用 /login 登入 claude.ai 帳號；用 API 密鑰、網關令牌或雲廠商憑據的會話不能發佈；
• 平台：Anthropic API；Amazon Bedrock、Google Vertex、Microsoft Foundry 上不可用，平台差異見 /guides/claude-code-other-models-bedrock-vertex-foundry；
• 只能是一個靜態頁面：無後端，相對連結不能用，頁面渲染後要不超過 16 MiB；
• 頁面受嚴格的內容安全策略限制：外部圖片被全部攔截，腳本只能從官方列出的幾個公共 CDN 加載；
• 文件格式必須是 .html、.htm 或 .md，且為 UTF-8；
• 預設私有，只有你自己能看，分享要手動設定。

發佈後 Claude 會打印連結並打開瀏覽器，按 Ctrl+] 可以重新打開本會話最近的 artifact。不想自動打開瀏覽器，設 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0。想關掉這個功能，可以在 /config 裏關閉 Artifacts，或在設定裏寫 "enableArtifact": false。官方也提醒：一個帶樣式的頁面比同樣內容的終端文字更費 token。

網頁版 Claude 裏的 Artifacts 是另一套入口，見 /guides/claude-artifacts。

三、做法三：寫一個「先畫圖」的輸出風格

官方輸出風格頁給的例子就是：

markdown
---
name: Diagrams first
description: Lead every explanation with a diagram
keep-coding-instructions: true
---

When explaining code, architecture, or data flow, start with a Mermaid diagram showing the structure, then explain in prose.

## Diagram conventions

Use `flowchart TD` for control flow and `sequenceDiagram` for request paths. Keep diagrams under 15 nodes.

把它存為 ~/.claude/output-styles/ 或項目的 .claude/output-styles/ 下的 Markdown 文件，用 /output-style Diagrams first（或在 /config 裏選）切換。注意官方的兩點：終端裏是啟動時讀取風格文件，所以新建或修改後要重啟；輸出風格只是一份指令，不能保證每次都執行，需要保證每次發生的事應該用鉤子。輸出風格的完整介紹見 /guides/claude-code-output-styles-writing-assistant。

四、提示詞裏要交代什麼

圖：本站自己整理的清單，節點上限取自官方輸出風格示例

五、核對生成的圖

• 對照代碼檢查每個箭頭；讓它列出每條邊對應的文件和函數，便於你抽查；
• 漏掉的分支（錯誤、超時、重試）最常見，可以追問「還有哪些沒畫出來的分支」；
• 命名要和代碼一致，否則圖和代碼會越來越對不上；
• 把圖放進文檔後，在倉庫裏同步維護，可以把「改流程時同時更新 docs/ 下的圖」寫進 CLAUDE.md，見 /guides/claude-md-agents-md。

使用較多、想要更高的額度和穩定的訂閱，可以了解 /chongzhi/claude-pro 或 /chongzhi/claude-code。

常見問題

Q：為什麼提示「Artifacts need a claude.ai login」？

這是官方文檔裏列出的報錯之一，意思是會話沒有用 claude.ai 帳號登入，官方的錯誤說明頁有登入方法。

Q：圖能直接在終端裏顯示嗎？

官方文檔沒有說明終端內渲染 Mermaid。Claude Code 的終端輸出是文字；要看圖，請打開生成的文件或 artifact 頁面。

Q：能還原設計稿 / 畫原型嗎？

可以讓它在 artifact 裏做並排方案或頁面原型，官方用法列表裏就有「並排展示幾種設計或實現方案」。用設計工具連接設計稿屬於另一類用法，不在本文範圍。

相關教學

• /guides/claude-image-generation：Claude 能生成圖片嗎
• /guides/claude-artifacts：網頁版 Artifacts
• /guides/claude-code-slash-commands：斜槓命令速查

參考資料

• Claude Code 官方文檔：Share session output as artifacts — https://code.claude.com/docs/en/artifacts
• Claude Code 官方文檔：Output styles — https://code.claude.com/docs/en/output-styles
• Claude Code 官方文檔：Common workflows — https://code.claude.com/docs/en/common-workflows