/ 目錄 / 演練場 / excalidraw-skill
● 社群 Agents365-ai ⚡ 即開即用

excalidraw-skill

作者 Agents365-ai · Agents365-ai/excalidraw-skill

Claude Code 技能,可將自然語言描述的系統架構轉換為手繪風格的 Excalidraw 圖表,支援 SVG/PNG/可編輯 .excalidraw 匯出。

Agents365-ai 的 Excalidraw 技能能自動偵測討論內容是否需要圖表(3 個以上元件、多層系統、工作流程),並產生對應類型:流程圖、架構圖、時序圖、心智圖或泳道圖。可透過 Kroki API(免安裝)或搭配 Firefox 的本機 excalidraw-brute-export-cli 匯出。可編輯的 .excalidraw 檔案可直接在 excalidraw.com 開啟。

為什麼要用

核心特性

即時演示

實際使用效果

excalidraw-skill.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "excalidraw-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "excalidraw-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Agents365-ai/excalidraw-skill",
        "~/.claude/skills/excalidraw-skill"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "excalidraw-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Agents365-ai/excalidraw-skill",
          "~/.claude/skills/excalidraw-skill"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add excalidraw-skill -- git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: excalidraw-skill

根據文字描述草繪微服務架構圖

👤 撰寫設計文件的工程師 ⏱ ~10 min beginner

何時使用: 你正在撰寫 RFC,想在不開啟其他工具的情況下插入架構圖。

前置條件
  • 將技能複製到 ~/.claude/skills/excalidraw-skill — git clone https://github.com/Agents365-ai/excalidraw-skill ~/.claude/skills/excalidraw-skill
  • 可連線至 kroki.io(免安裝路徑) — 只要對外 HTTPS 可用,無需任何設定
步驟
  1. 描述系統
    Use the excalidraw skill — draw a microservices e-commerce architecture with clients, API gateway, 4 services, RabbitMQ, and per-service databases.✓ 已複製
    → Claude 產生版面配置並透過 Kroki 匯出 SVG
  2. 調整並重新匯出
    Add Redis in front of the product service and regenerate.✓ 已複製
    → 加入 Redis 後版面重新平衡的更新圖表
  3. 儲存可編輯版本
    Save as .excalidraw so I can edit it on excalidraw.com.✓ 已複製
    → 檔案儲存至目前工作目錄

結果: 在 5 分鐘內於文件中產生手繪風格的架構圖。

注意事項
  • 10 個以上元件時圖表過於雜亂 — 先請 Claude 依層級分組;此技能內建對應的版面配置規則
搭配使用: filesystem

根據剛除錯完的 API 互動產生時序圖

👤 為隊友記錄流程的後端工程師 ⏱ ~10 min beginner

何時使用: 你終於搞清楚 5 個服務的 OAuth 流程,想把它記錄下來。

步驟
  1. 貼上日誌或描述流程
    Excalidraw skill — sequence diagram: user → frontend → auth service → identity provider → callback → session.✓ 已複製
    → 產生含正確箭頭與回傳訊息的時序圖
  2. 細化
    Add the error path when the IdP returns 401.✓ 已複製
    → 以明顯不同的方式呈現替代流程

結果: 一張可直接附在 PR 說明中的時序圖。

組合

與其他 MCP 搭配,撬動十倍槓桿

excalidraw-skill + filesystem

將產生的圖表直接儲存至文件資料夾

Generate the architecture diagram and save it to docs/architecture/v2.svg.✓ 已複製
excalidraw-skill + github

將圖表與規格文件一起提交,附加到 PR 中

Create the diagram, commit to docs/, and reference it in the PR body.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
generate_flowchart process description 流程包含決策點與循序步驟時 0 via Kroki, 0 local
generate_architecture components + relationships 系統具有層級結構或服務邊界時 0
generate_sequence actors + messages 需要記錄具時間順序的互動流程時 0
export_png diagram ID 需要點陣圖格式以供不支援 SVG 的文件使用時 0 (requires local CLI)

成本與限制

運行它的成本

API 配額
Kroki 沒有明確的配額限制,但請勿頻繁大量請求
每次呼叫 Token 數
圖表規格相當精簡(通常少於 2k tokens)
費用
免費——技能為本機檔案,Kroki 亦為免費服務。
提示
一次性使用選 Kroki;只有在需要離線使用時才安裝 excalidraw-brute-export-cli。

安全

權限、密鑰、影響範圍

憑證儲存: 無需任何憑證——純粹以提示詞運作
資料出站: 使用 Kroki 路徑時,圖表規格會傳送至 kroki.io。使用本機 CLI 路徑時不會傳送任何資料。

故障排查

常見錯誤與修復

要求繪圖時技能未被觸發

請明確提及 'excalidraw' 或 'diagram';或確認複製的目錄是否存在。

驗證: ls ~/.claude/skills/excalidraw-skill/SKILL.md
SKILL.md frontmatter wrong

重新複製;frontmatter 驅動自動觸發機制。

驗證: head ~/.claude/skills/excalidraw-skill/SKILL.md
觸發關鍵字有誤——Claude 改用 Mermaid 輸出

請明確說出 'excalidraw';單說「畫一張圖」可能會觸發其他工具。

替代方案

excalidraw-skill 對比其他方案

替代方案何時用它替代權衡
Mermaid via markdown你的文件平台已原生支援 Mermaid 渲染(如 GitHub 等)無手繪風格美學,版面配置控制較少
drawio via desktop app你偏好以手動點擊方式操作版面配置無法由 AI 代理驅動

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills