让 AI 画图不再千篇一律：这个 Excalidraw Skill 让图表「会说话」

AI 画图最怕什么？——「框框连箭头」，一眼假

用过 Claude Code 或 Cursor 画图的朋友，大概都见过那种「机器感」十足的图：方块、箭头、千篇一律的蓝白配色，放进文档里一眼就能认出来——这是 AI 画的。

最近挖到一个 GitHub 开源 Skill，叫 excalidraw-diagram-skill，专门解决这个痛点。它能让 AI coding agent 直接生成「有说服力」的 Excalidraw 图表，而不是堆砌元素。

4,800+ Star，定位很清晰：Diagram that argues，not just displays。

它解决了什么问题？

大多数 AI 生成的图表，本质上是在「展示」信息，而不是「论证」观点。这个 Skill 的核心理念完全不同——每个形状、分组都在映射它所代表的概念：

• 一对多 → 用扇形展开（fan-out）
• 顺序流程 → 用时间轴
• 汇聚整合 → 用收敛图形
• 不会再出现「uniform card grids」那种敷衍布局

更实用的是：技术图表里会嵌入真实代码片段和 JSON 数据，不是占位符，不是 Lorem ipsum。

内置视觉校验，AI 自己看效果

这个 Skill 还带一套 Playwright 渲染流水线——AI 生成图表后，会在浏览器里实际跑一遍，检查有没有文字重叠、箭头没对齐、间距失衡这些问题，然后自动修复再交付。

相当于给 AI 装了一双「眼睛」，能看到自己的输出。

品牌色一键切换

所有颜色和品牌风格都集中在一个文件里：references/color-palette.md。改一处，全套图表跟着变。不再需要手动一个个调。

怎么安装？

最简单的方式，让 AI 帮你装：

「Set up the Excalidraw diagram skill renderer by following the instructions in SKILL.md.」

或者手动：

git clone https://github.com/coleam00/excalidraw-diagram-skill.git
cp -r excalidraw-diagram-skill .claude/skills/excalidraw-diagram
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium

装好后，直接用自然语言描述你要的图：

「Create an Excalidraw diagram showing how the AG-UI protocol streams events from an AI agent to a frontend UI」

剩下的概念映射、布局、JSON 生成、渲染、校验，Skill 全包。

适合谁用？

需要往文档、博客、文档里放技术图表的开发者/设计师；以及想让 AI 画出来的图「不那么像 AI 画的」的人。属于那种装完就回不去的效率工具。

GitHub 仓库 →

GitHub: https://github.com/coleam00/excalidraw-diagram-skill