Excalidraw 图生成器：给 GitHub Copilot 的 Excal…

一、它是什么

（一）一句话定位

excalidraw-diagram-generator 是一个 skill for generating Excalidraw-format diagrams from natural language descriptions。它解决的痛点是：很多人想画流程图、架构图、思维导图，但又不爱手动拖拽排版。你只要把「画个什么、元素之间什么关系」用中文或大白话讲清楚，技能就去生成一份 Excalidraw 能直接打开的 JSON 文件，省去手工摆图形的麻烦。它的 SKILL.md 头部 description 明确写了触发词：当被要求「create a diagram」「make a flowchart」「visualize a process」「draw a system architecture」「create a mind map」或「generate an Excalidraw file」时启用。

（二）属于 awesome-copilot 大家族

这个技能不是孤立项目，而是 github/awesome-copilot 仓库的一部分。awesome-copilot 的官方描述是「Community-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot」，也就是社区贡献的指令、智能体、技能与配置合集，帮助开发者把 GitHub Copilot 用得更顺手。根据 meta.json，该仓库拥有 38,797 Stars、4,916 Forks、36 个开放 Issue，主语言 JavaScript，采用 MIT 许可，创建于 2025-06-11，并带有 agent-skills、agents、github-copilot、prompt-engineering 等话题标签。excalidraw-diagram-generator 就安静地待在它的 skills 目录里，是这个庞大生态的一个零件。

二、支持哪些图：9 种类型

技能把可生成的图分成了 9 类，每一类都对应一组典型触发词，方便 Copilot 在收到不同请求时自动匹配：

• 流程图 Flowcharts：顺序流程、工作流、决策树；
• 关系图 Relationship Diagrams：实体关系、系统组件、依赖；
• 思维导图 Mind Maps：概念层级、头脑风暴、主题拆解；
• 架构图 Architecture Diagrams：系统设计、模块交互、数据流；
• 数据流图 DFD：数据流动与变换过程；
• 泳道图 Business Flow：跨职能流程、按角色切分的 actor 流程；
• 类图 Class Diagrams：面向对象设计、类结构与关系；
• 时序图 Sequence Diagrams：对象随时间的消息交互；
• ER 图：数据库实体关系与数据模型。

README 还配了一张「用户意图 → 图型」对照表，比如「workflow / process / steps」落流程图，「architecture / system / modules」落架构图，「mind map / concepts / ideas」落思维导图，让模型选对形状语言。这种「意图 → 图型」的映射，让 Copilot 不必每次都反问你要哪种图，而是根据关键词自动选对形状语言，减少来回确认，也降低了新手「不知道该画什么图」的上手门槛。

三、六步工作流

（一）理解请求与选类型

第一步是 Analyze the user’s description：判定图型（流程 / 关系 / 思维 / 架构）、提取关键元素（实体、步骤、概念）、理清关系（流向、连接、层级）并估计复杂度。第二步按上面的对照表选对图型——这是后面所有排版决策的基础。

（二）抽取结构化信息

不同图型要抓取的信息不同：流程图要列步骤、决策点、起止；关系图要实体 + from→to 关系并带 label；思维导图要中心主题、3–6 条主分支；DFD 要外部实体、处理过程、数据存储、数据流向，并且「只表示数据流动、不表示处理顺序」；泳道图要 actor 作为表头列、流程框落在对应泳道里；类图要类名、带可见性的属性与带参数的方法、以及继承 / 实现 / 关联 / 依赖 / 聚合 / 组合的连线与多重性；时序图要对象、生命线、同步 / 异步消息、返回值；ER 图要实体、属性、PK/FK、基数与中间关联实体。这套清单把「画图」翻译成了「填字段」。

（三）生成 Excalidraw JSON

第四步落代码：创建一个 .excalidraw 文件，可用元素类型有 rectangle、ellipse、diamond、arrow、text。关键属性包括坐标 x/y、尺寸 width/height、样式 strokeColor / backgroundColor / fillStyle，以及字体。这里有一条硬规则——所有文本元素必须 fontFamily: 5（Excalifont），否则视觉不一致。第五步按固定结构组装文件：顶层 type: excalidraw、version: 2、source、elements 数组，appState 里设 viewBackgroundColor: #ffffff 与 gridSize: 20，files: {}。第六步保存为 <descriptive-name>.excalidraw 并告诉用户如何打开。

四、工程化：图标库与 Python 脚本

当涉及 AWS / GCP / Azure 这类需要专业图标的架构图时，技能提供了「图标库 + 脚本」的进阶路线。先去 libraries.excalidraw.com 下载对应的 .excalidrawlib，放进 skills/excalidraw-diagram-generator/libraries/，再跑 split-excalidraw-library.py 把库拆成单个图标文件并生成 reference.md 查表。随后用 Python 脚本把图标塞进图里：

python scripts/add-icon-to-diagram.py diagram.excalidraw EC2 400 300 --label "Web Server"
python scripts/add-arrow.py diagram.excalidraw 300 250 500 300 --label "HTTPS"

README 强调这条「用脚本」是推荐路径，因为它有三大好处：图标 JSON（每个 200–1000 行）不进 AI 上下文，零 token 消耗；坐标变换由脚本确定性计算，不会算错；ID 自动生成，避免冲突。相比之下，手动读图标 JSON、算包围盒、改坐标、造新 ID，既烧 token 又容易撞 ID，因此被明确标为「不推荐」。

对于没有图标库的场景，技能也有兜底：用基础形状（矩形 / 椭圆 / 箭头）加配色与文本标签照样能画，并提示用户「之后可以手动在 Excalidraw 里替换成图标」。换句话说，图标库是「锦上添花」而非前置条件，新手先跑通基础流程，再按需引入云厂商图标即可。

五、输出规范与校验清单

技能对每一次交付都有一份 Validation Checklist：所有元素有唯一 ID、坐标不重叠、文字字号 ≥16 可读、所有文本用 fontFamily: 5、箭头逻辑连通、配色一致、文件是合法 JSON、元素数合理（建议 <20 以保证清晰）。排版上也有量化建议：横向间距 200–300px、纵向 100–150px；主元素浅蓝 #a5d8ff、次要浅绿 #b2f2bb、核心黄色 #ffd43b、警示浅红 #ffc9c9。若元素太多，技能会建议拆成多张图——比如先画 6 个主组件的高层架构，再为每个子系统出详图。

这套规范还细到了「每种图建议多少元素」：流程图步骤 3–10（上限 15）、关系图实体 3–8（上限 12）、思维导图主分支 4–6（每支子主题 2–4）。README 甚至给了网格布局与放射布局的参考算法（用列数开平方排网格、用角度均分画放射），把「怎么摆才不挤」也变成了可复制的规则，而不只是「凭感觉」。

六、局限与未来

README 不回避短板：复杂曲线会被简化为直线或基础曲线；手绘粗糙度固定为 1；不支持嵌入图片；单图推荐元素上限 20；没有自动碰撞检测，得靠间距规范规避重叠。未来的增强方向包括自动布局优化算法、从 Mermaid / PlantUML 语法导入、模板库扩充，以及生成后的交互式编辑。

七、适用场景

它最适合已经把 GitHub Copilot 当日常工具、又想要「说一句话就出图」的开发者：用自然语言快速产出流程图做方案评审、把类结构对话式地画成类图、把数据库设计聊成 ER 图、或把跨团队流程落成泳道图。因为它产出的是标准 .excalidraw 文件，生成后还能在 Excalidraw 里继续手绘微调，人机协作的边界很自然。

README 里附了三个可直接套用的例子：用户注册流程图（四矩形 + 三箭头）、User/Post/Comment 的实体关系图、机器学习概念思维导图（中心词 + 四个主分支）。这些例子其实在示范一种工作流——你不必从零描述，只要给一句「为 user registration 画流程图」，技能就会自动抽取步骤、生成文件，并告诉你如何在 excalidraw.com 拖拽打开或用 VS Code 插件打开。

八、常见问题 FAQ

九、总结

excalidraw-diagram-generator 的价值，在于把「我想画张图」这件事从手工排版中解放出来，变成「描述意图 → 拿到可编辑的 Excalidraw 文件」。它背靠 awesome-copilot 这个 38.8k Stars 的社区大合集，用 9 种图型覆盖、量化排版规范、脚本化图标集成和交付前校验清单，构成了一套相当工程化的图表生成方案。对已经用着 GitHub Copilot 的团队，它是顺手就能装上的生产力小齿轮。

在撰写本文的过程中，我主要参考了以下来源：github/awesome-copilot 合集中 skills/excalidraw-diagram-generator 的 SKILL.md（即素材 README.md）与 meta.json（awesome-copilot：38,797 Stars、4,916 Forks、MIT、创建于 2025-06-11）。文中数据以官方公开信息为准，可能随版本更新而变化。