用途:根据文本提示生成手绘 Excalidraw 风格图表,输出 SVG 与 PNG(2 倍分辨率),适合流程图、架构草图、系统设计等。
主要能力:使用 Virgil 手写字体与 Cascadia 等宽字体;渲染器为 scripts/render.mjs(roughjs + xmldom + resvg);元素格式规范见 references/element-format.md。
使用方式:先分析请求中的组件、关系与流向,确定形状类型、连线、布局方向与画布尺寸;再按元素格式生成 JSON,保存到临时文件后运行:node <SKILL_DIR>/scripts/render.mjs /tmp/excalidraw-diagram.json "<OUTPUT_DIR>"。默认输出目录为 ~/Downloads/Excalidraw/,可在配置中改为任意绝对路径。
格式要点:为每个收发箭头的形状设置唯一 id,箭头用 from/to 引用;标题描述用 subtitle 属性,形状技术细节用 annotation 属性,区域名称用 sectionLabel,避免创建重叠的独立文本元素;箭头标签保持 1-3 个词;无注释形状最小高度 60-80px,有注释至少 90-120px;形状间距至少 60-80px,画布边缘留 40px;服务矩形用 rounded: true,填充使用调色板中的柔和色,区域矩形用极浅填充。
限制与要求:需 Node.js 18+,并执行 cd scripts && npm install 安装依赖;字号不得低于 13px;避免文本重叠、浮动注释、区域标签用文本元素、形状过挤及底部文本堆叠。
示例:/excalidraw user -> API gateway -> auth service -> database;/excalidraw microservices architecture with 4 services;/excalidraw decision flowchart for code review process。