WorkBuddy+skill：一键生成UI/图表/原型图
一、自然语言生成可编辑图表需求
在云开发、系统架构 全流程中，专业的图表是技术文档、方案汇报、代码说明的核心载体。
二、介绍 Drawio-skill
1.1
drawio-skill 是什么
drawio-skill 是一款开源、兼容 MCP 智能体协议的绘图技能插件，专门为 LLM AI Agent 设计，底层对接 Draw.io 原生 XML 规范，能够将自然语言需求转换为标准.drawio源文件，而非静态图。
它不属于独立绘图软件，而是给 WorkBuddy、CodeBuddy 这类智能体补充专业制图能力，遵循通用 Skill 安装规范，支持一键导入、全局启用、项目隔离配置，兼容 Windows/macOS 全平台 Draw.io 桌面客户端，是打通 AI 文本与专业架构图的中间层工具。来看看其官网是如何介绍这款插件的：
drawio-skill 能做什么
核心亮点
6 种图表类型预设 —— ER 图、UML 类图、序列图、架构图、ML/深度学习、流程图
这些可以使用Drawio可以直接编辑的专业图有没有让你心动。心动不如行动，下面跟随本博文教程一步一步来动手实践吧。
三、Drawio-skill 安装
前置依赖：本地提前安装 Draw.io 桌面版（官网下载对应系统安装包，完成初始化）。我本机安装的Drawio的版本信息如下
在正式安装Drawio.skill前，我提前将skill的工程下载到本地，下载后的信息如下：
这就是drawio-skill的文件目录，其中skills文件就是我们的真实技能文件，本节将详细介绍如何在WorkBuddy和CodeBuddy中进行该技能的安装和配置，skill几乎不需要什么配置 ，直接安装即可。
WorkBuddy 中安装方法
WorkBuddy 内置技能市场，支持在线一键安装，无需手动下载源码，但这里我们使用离线安装的模式：
•
打开 WorkBuddy 客户端，在交互对话框中的技能按钮点击导入技能；
•
点击【添加】，上传对应的skill的文件或者压缩包；
•
验证：在对话框中中的技能下拉选项中看到drawio-skill即安装成功。
CodeBuddy 中安装方法
CodeBuddy 面向代码开发环境，支持全局 / 单项目两种安装模式，打开模式都是一样的，如下图所示：
根据不同的方式选择项目使用还是全局，这里根据各位开发者自己的需要进行调整。
方式 1：全局 一键安装
方式 2：单项目局部安装
单项目局部安装的方法差不多，就是选择的类型不一样。安装后，在项目中就可以看到以下内容，标识skill安装成功。
万事俱备只欠东风，在安装好以上的插件后，接下来我们就可以在AI工具中来调用这个技能，生成符合我们业务需要的专业图。
四、案例生成实践
本节将结合几个实例，通过提示词的方式讲解如何在WorkBuddy和CodeBuddy中集成drawio-skill这个技能。相信通过实例让大家对其性能和功能了解更深。
1：WorkBuddy 生成云系统架构图
场景需求
智慧水务云平台架构：前端 Web 管理端、腾讯云负载均衡、SpringBoot 微服务集群、Redis 缓存、MySQL 数据库、文件对象存储 COS、定时任务服务，标注数据流走向与内外网隔离边界。
自然语言提示词（直接复制使用）
代码块
JavaScript
生成智慧水务完整云平台架构图，可编辑drawio格式，结构分层：
1. 外网层：用户Web前端、移动端小程序，经过腾讯CLB负载均衡；
2. 应用层：多实例SpringBoot业务微服务集群、定时调度服务；
3. 缓存层：Redis分布式缓存；
4. 数据持久层：MySQL主从数据库；
5. 对象存储层：腾讯云COS存储监测附件；
标注模块之间数据流向，使用腾讯云官方图标，分层布局清晰，输出原生.drawio文件。
生成效果
WorkBuddy 调用 drawio-skill 自动解析文本逻辑，分层绘制完整架构拓扑，区分内外网安全边界，自动匹配腾讯云组件图标，直接输出可下载.drawio文件，无需手动排版。完成后可以使用本地安装的drawio软件进行查看，结果如下图所示：
2：CodeBuddy 生成项目结构图
场景需求
前面在WorkBuddy中演示如何生成项目加架构图，很多开发的朋友一定会说。平时开发代码使用的是CodeBuddy这种的code编辑器，又应该如何集成和实现呢？下面结合CodeBuddy来进行讲解一个项目，这里就以之前见过的水力模型Java实现的组件为说明，如何生成项目的结构图。
自然语言提示词
代码块
JavaScript
生成效果
CodeBuddy 结合代码开发语义，自动生成树形工程结构图，清晰标注包之间调用链路，适配后端开发文档配图需求，生成文件可直接放入项目 README。
3、使用 DrawIO 进行二次完善
AI 生成的图表完成基础逻辑搭建，通过 Draw.io 桌面端做标准化二次优化，操作流程：
双击.drawio文件，自动唤起 Draw.io 客户端打开工程；
布局规整：使用自动分布、对齐工具统一节点间距，消除 AI 生成的杂乱排版；
样式统一：批量修改字体、线条粗细、模块配色，对齐团队文档规范；
细节补充：新增备注节点、标注接口协议、补充异常流程分支；
素材替换：替换自定义行业图标、增加水印、分区色块区分模块；
导出归档：优化完成后保存源文件，同时导出 SVG 矢量图用于文档交付。
🧩
五、总结
本文完整落地了 drawio-skill 在 WorkBuddy、CodeBuddy 双智能体的集成实战，打通自然语言描述→AI 自动制图→Draw.io 可编辑二次优化的完整工作流，核心价值总结如下：
效率大幅提升：原本半小时的制图工作缩短至 1 分钟，一句话生成完整专业图表，减少工具切换、拖拽排版的重复劳动；
解决静态图片不可编辑痛点：原生.drawio文件支持无限次迭代修改，适配架构方案、代码工程持续更新场景；
全研发场景覆盖：WorkBuddy 适配云架构、业务流程，CodeBuddy 适配代码分层、工程结构，覆盖开发全周期制图需求；
部署门槛低：插件标准化安装，支持在线商店一键部署与内网离线源码部署，适配企业办公、开发环境；
文档交付标准化：统一图标、分层规范，团队输出图表风格统一，减少评审返工。