Draw.io 交互网页生成器

要解决的问题

在 draw.io 里画完架构图后，常见需求是把图发布成网页：团队成员点开链接就能看，甚至能点击某个模块跳到详情页。传统做法要么手动截图贴进文档，要么在 HTML 里照着重画一遍——图一改，页面就得跟着改，两边很快对不上。

这个技能直接把 .drawio 当作唯一事实来源，生成一份静态 HTML，并可选地带上「点哪个节点跳哪里」的交互。

工作原理

输出的页面分两种：

• 纯查看模式：不提供 actions 文件时，输出一份只读 HTML，适合「画完即发布」。
• 可点击模式：提供 actions JSON 文件时，输出带交互的 HTML。

核心流程大致是：

1. 在 draw.io/diagrams.net 里编辑 .drawio 源文件；
2. 若需要点击交互，在源文件旁放 actions.json（或更易写的 actions.txt，构建时自动翻译），用户可见资源统一放在旁边的 assets/ 目录；
3. 执行 build_all.ps1，它负责导出 SVG 再生成 HTML，产物默认写在 .drawio 旁边、同名的 .html；
4. 改动脚本或 actions 之后跑 quick_check.ps1 做基本校验；
5. 在浏览器里目视确认布局和交互是否正常。

交互的绑定方式很直接：actions JSON 里把 draw.io 的 mxCell id 映射到具体的点击行为，节点引用的本地资源用相对路径。想偷懒时，还可以在 assets/action-snippets/ 里维护一批可复制的 JSON 片段。

适用边界与注意点

• draw.io 可执行文件的路径不要写死。脚本按 -DrawioExe 参数 → DRAWIO_EXE 环境变量 → PATH → 常见安装目录 → 卸载注册表的顺序依次探测，全部失败才会让你手动指定。
• 节点在 draw.io 里被删除重建后，mxCell id 会变，actions JSON 里的旧 id 会失效，需要重新核对。
• 仓库里的全景图（panorama）示例只是示例，不要默认它的 actions 能套到任意 .drawio 文件上。
• 正确姿势是改 actions JSON 然后重新构建，而不是手改生成出来的 HTML——后者在下次构建时会被覆盖。
• 命令行未指定 -Drawio 时，技能会用自带示例输出到 output/clickable.generated.html，主要用于测试。