方法框架图，让AI直接画成SVG
写完方法部分，还要把模块、箭头和层级重新摆一遍，框架图经常卡在这里。

今天接着分享一个画图方向的GitHub项目：diagram-design。把结构讲清楚，让AI编程助手生成HTML＋SVG，后面还能继续改文字、颜色和位置👇

① 适合拿来画什么？
方法框架、数据处理流程、系统架构，尤其是模块关系已经明确、需要把逻辑排清楚的时候。

② 输入时，把这4件事说清楚
有哪些模块；箭头从哪到哪；哪些是并行或分支；最后要用于论文还是组会。直接给模块清单和连接关系，比只说“画得高级一点”更具体。

③ 看图型，再改第二版
图3放了项目的Architecture图例：组件、主路径、内容分支在同一张图里。图4用并行分支框架展示修改前后，模块和箭头保留，再把分组补清楚。

HTML可以用浏览器打开看整体；SVG方便继续修改，也可以导出PNG放进汇报。想改第二版，直接说具体改哪里。

④ 一段可以直接改的指令
“使用diagram-design，把下面的方法结构画成横向框架图。模块：[填写]；连接：[填写]；分组：[填写]。保留所有模块名和箭头方向，不新增步骤。先给HTML预览，再导出SVG和PNG。”

⑤ 怎么开始？
在支持Agent Skills的AI编程助手中安装：
npx skills add cathrynlavery/diagram-design

生成时仍需要你正在使用的AI助手。导出PNG用到Playwright和Chromium，第一次需要配置。

GitHub搜：cathrynlavery/diagram-design

你现在更需要画方法框架，还是把实验流程整理清楚？