● 社群
coleam00
⚡ 即開即用
Excalidraw Diagram Skill
作者 coleam00 · coleam00/excalidraw-diagram-skill
Skill that gives Claude the ability to generate Excalidraw diagrams.
This skill teaches Claude to produce Excalidraw .excalidraw JSON files — architecture diagrams, sequence diagrams, mind maps — that open natively in Excalidraw and stay editable. No screenshot-and-pray.
為什麼要用
核心特性
- Outputs native .excalidraw JSON (fully editable)
- Pre-baked layouts for architecture, sequence, flow, mind map
- Smart auto-layout to avoid label overlap
- Annotation arrows with proper anchoring
- Works in any agent (Claude Code, Cursor, Codex)
即時演示
實際使用效果
excalidraw-diagram-skill.replay
▶ 就緒
使用場景
實戰用法: Excalidraw Diagram Skill
何時使用: You want a diagram you can iterate on, not a static PNG.
前置條件
- Server/skill installed and authenticated — See repo README
步驟
-
Describe the system
Using the Excalidraw skill, draw our auth flow: SPA → API gateway → auth-service → Postgres → emit event to Kafka.✓ 已複製
→ A .excalidraw file with labeled boxes + arrows
-
Iterate
Add a Redis cache between API gateway and auth-service.✓ 已複製
→ Updated file with the new node + correct re-routed arrows
結果: A diagram you actually edit, not redraw.
注意事項
- For very large diagrams (>30 nodes) auto-layout struggles — For very large diagrams (>30 nodes) auto-layout struggles — split into multiple diagrams or group by concern.
成本與限制
運行它的成本
- API 配額
- See provider docs for rate limits
- 每次呼叫 Token 數
- Varies by tool
- 費用
- See repo README for pricing details
- 提示
- Cache tool results and avoid repeated identical calls.
安全
權限、密鑰、影響範圍
憑證儲存: Use environment variables; never commit secrets
資料出站: Tool calls go to the provider's API as documented
故障排查
常見錯誤與修復
file doesn't open in Excalidraw
Make sure the file ends with .excalidraw and is valid JSON. The skill outputs both, but check the extension.
驗證: Open at excalidraw.com → load file
arrows pointing wrong way
Excalidraw's arrow startBinding/endBinding matters. The skill's templates handle it, but custom edits can break it.
驗證: Reload the file
替代方案
Excalidraw Diagram Skill 對比其他方案
| 替代方案 | 何時用它替代 | 權衡 |
| BV-Venky/excalidraw-architect-mcp | You want it as an MCP server instead of a skill | MCP is heavier setup; skill is just a folder |