技能分享（附下载）：纯文本大模型生成可编辑的架构图技能html-to-drawio

纯文本大模型生成可编辑的架构图技能html-to-drawio

还在用AI生成不可编辑的架构图？试试这个工作流！

一、大家都怎么制作架构图的？

1.1 直接用豆包、Image2生成——图片格式，不可编辑

现在很多人用AI生成架构图，通常的做法是：

• 豆包、Image2 等工具：输入提示词，直接生成一张架构图图片
• 问题：生成的是 PNG/JPG 图片，想调整一下布局、修改一下文字，发现源文件找不到，只能重新生成

图片生成的架构图

痛点：

• 不可编辑：生成后就是一张"死"图片
• 无法复用：下次想改，只能重新生成
• 无法与其他工具打通：想放到PPT里，只能贴图，无法编辑

1.2 生成HTML格式——可以预览，但不可手动调整

有些人会让AI生成 HTML格式 的架构图，优点是：

• 可以预览效果
• 可以调整代码来改变布局

HTML生成架构图

但问题依然存在：

• 不可手动调整：想拖拽一个框、调整一下位置，必须改代码
• 学习成本高：不是每个人都会HTML/CSS
• 无法与PPT/Word打通：HTML不能直接导入Office

1.3 在PPT里手绘——人工手搓，太花时间

那怎么办？很多人只能：

1. 打开PowerPoint
2. 一个个画框、画线、加文字
3. 调整布局、对齐、配色
4. 人工手搓，太花时间！

痛点：

• 效率低：一个简单的架构图，手搓半小时
• 不专业：配色、对齐、布局，没有设计经验做不好
• 难复用：下次做类似的图，又得重头来过

二、自创技能：html-to-drawio 技能

2.1 核心理念

AI生成大体满意的HTML框架 →导出类XML的draw.io 格式 → 导入 draw.io 微调 → 导出到文档/PPT

这个工作流的核心是：

1. AI生成框架：用AI快速生成一个大体满意的架构图框架（HTML格式，用于预览）
2. 转换为可编辑格式：用 html-to-drawio 技能 将HTML转换为 draw.io 的原生XML格式（.drawio文件）
3. 在draw.io中微调：打开.drawio文件，手动拖拽调整布局、修改文字、改配色
4. 导出到文档/PPT：在draw.io中导出为 可编辑的PowerPoint (.pptx) 或 SVG/PDF

2.2 为什么选择 draw.io？

draw.io（diagrams.net） 是一个强大的图表工具，但它真正的价值在于：

最重要的是：

• ✅ 在draw.io中导出PPT时，每个元素都是可编辑的形状！
• ✅ 不是贴图，而是真正的Office形状，可以后续修改

三、html-to-drawio 技能详解

3.1 功能介绍

html-to-drawio 是一个AI技能，它的核心功能是：

将AI生成的HTML可视化（流程图、架构图、PPT页面）转换为draw.io的原生XML格式

3.2 技术原理

技能的核工作流程：

第一步：分析源HTML结构

AI根据提示词生成HTML的架构图，再读取已生成的HTML文件，提取以下信息：

第二步：映射为draw.io XML元素

将每个HTML元素对应到draw.io的mxCell：

第三步：生成draw.io XML文件

严格遵循以下XML结构模板（这是唯一正确的格式）：

<mxfile host="app.diagrams.net" modified="[时间戳]" agent="[Agent名]" version="21.0.0" type="device">
  <diagram name="[图表名称]" id="[唯一ID]">
    <mxGraphModel dx="[宽度]" dy="[高度]" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="[画布宽]" pageHeight="[画布高]" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- 所有图形元素放在这里 -->
        <mxCell id="element1" value="Hello World" 
          style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e3f2fd;strokeColor=#1565c0;" 
          vertex="1" parent="1">
          <mxGeometry x="100" y="100" width="200" height="100" as="geometry" />
        </mxCell>
        
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

第四步：验证与输出

1. 将生成的.drawio文件保存到与HTML同目录
2. 确认XML格式正确（标签闭合、无非法字符）
3. 提示用户用draw.io桌面版或 app.diagrams.net 打开

3.3 核心优势

四、使用场景与工作流

场景一：快速生成可编辑的架构图

传统方式：

1. 让AI生成一张架构图（图片格式）
2. 发现有个框位置不对
3. 重新生成 → 又不对 → 反复调试
4. 最终还是得用画图工具手动调整

使用 html-to-drawio 技能：

1. 让AI生成HTML版本的架构图（可视化预览）

HTML生成的架构图

1. 调用技能转换为 .drawio 格式
   

   转化为drawio格式
2. 在draw.io的网页diagrams.net中打开，直接拖拽调整，所有配色和样式均可调整

Drawio编辑页面

1. 导出为SVG或PPTX，完成！

场景二：作为PPT生成的引用工具

如果你正在做一个PPT生成系统（比如我的pyPPT-Engine项目），那么：

1. 传统PPT生成：直接生成图片插入PPT → 用户无法编辑
2. 使用draw.io中间格式：
   • 先生成 .drawio 文件（可编辑）
   • 用户在draw.io中调整满意后
   • 用draw.io的导出功能生成 .pptx（每个元素都是可编辑的形状！）

场景三：富文本内容生成的引用

在生成技术文档、报告、文章时，经常需要插入流程图、架构图等。使用这个技能：

1. AI生成图表内容（纯文本描述）
2. 转换为 .drawio 格式
3. 可以嵌入到文档中作为可编辑的附件
4. 读者可以根据自己的需求调整图表

五、技术实现细节（给开发者的）

5.1 铁律（踩坑记录）

在开发这个技能时，我踩过很多坑，总结出来的铁律：

1. ✅ 只用扁平化mxCell — 所有元素都是 <mxCell> 的直接子节点
2. ❌ 禁止使用mxCard/mxGeometry嵌套 — draw.io打开会报错 "Could not add object mxPoint"
3. ❌ 禁止使用非标准属性 — 只用draw.io原生支持的style属性
4. ✅ 每个mxCell必须有id — 全局唯一
5. ✅ vertex="1"表示形状节点，edge="1"表示连线

5.2 常用组件代码片段

详见技能目录中的 templates/components.xml，包含可直接复用的组件代码。

5.3 推荐配色方案

六、示例展示

示例一：业务迁移方案流程图

这是我用AI生成的一个系统迁移方案的架构图：

1. AI生成HTML版本：快速生成框架，预览效果
2. 转换为.drawio格式：用html-to-drawio技能转换
3. 在draw.io中微调：调整布局、修改文字、优化配色
4. 导出为PPT：每个元素都是可编辑的形状

特性：

• 多校区策略卡片
• AB双系统并行期流程图
• 两阶段迁移路径（增量同步 → 全量迁移）
• 关键关注点清单

价值：生成后可以在draw.io中随意调整布局、修改文字、改配色，然后导出为PPT或SVG。

示例二：GEM架构图

这是我工作的AI协作系统（毕达哥拉斯工作准则）的三层架构图：

• G层 (Gene)：策略模板池，常驻注入
• E层 (Executive)：调度路由，运行时行为
• M层 (Memory)：长短期记忆，知识存储与检索

价值：这种复杂的分层架构图，用传统方式画需要很久，现在AI可以直接生成可编辑的.drawio文件。

七、总结：为什么这个技能值得关注？

7.1 核心理念

架构图不应该是"死"的图片，而应该是可编辑、可复用、可与其他工具打通的活文档。

7.2 技术价值

1. 降低编辑成本：从"重新生成"到"打开调整"
2. 打通工具链：HTML → draw.io → PPT/SVG/PDF
3. 可编程生成：AI可以直接输出XML，不需要截图或渲染
4. 极低费用：纯文本处理，不需要图片理解或生成
5. 极高可用性：生成的是标准XML，draw.io 100%可打开

7.3 适用人群

• 开发者：需要快速生成可编辑的架构图、流程图
• 技术写作者：需要在文档中插入可编辑的图表
• PPT制作者：需要批量生成可编辑的图表页面
• AI应用开发者：需要将可视化输出转化为可编辑格式

八、附录：如何使用这个技能？

如果你也想尝试这个技能，基本使用流程是：

1. 安装技能：在WorkBuddy中安装 html-to-drawio 技能
2. 生成HTML可视化：让AI生成你需要的图表（HTML格式）
3. 转换为.drawio：调用技能，传入HTML文件路径
4. 在draw.io中打开：用桌面版或 app.diagrams.net 打开生成的.drawio文件
5. 编辑并导出：调整满意后，导出为PPT/SVG/PDF

项目开源地址：https://github.com/jafferchong/html-to-drawio-skill

如果你觉得这个思路有价值，欢迎在评论区分享你的使用场景！