AI+drawio生成流程图探索

Drawio是一个开源的绘图工具，渲染流程图是基于一个 xml 结构类型文本，本期我们尝试给提示词让 AI 生成这个文本，看看效果如何。

本次实验采用的是千问3-coder-plus 模型

统一提示词

下面实验都使用这个系统提示词：你是一个drawio方面的专家，能根据用户提的需求生成符合drawio的xml文件，只要输出xml文件，不要其他文本

生成组织结构

用户输入：
根据下面信息生成组织结构图，不同层级背景色不同，背景色采用浅色系 最高管理层 张伟 - 首席执行官 (CEO) 直接下属： 李娜、王强、陈明 高级管理层 李娜 - 首席运营官 (COO) 直接下属： 赵敏、刘洋、周涛 王强 - 首席技术官 (CTO) 直接下属： 孙浩、吴迪、郑凯、徐静 陈明 - 首席财务官 (CFO) 直接下属： 黄娟、朱莉、高飞 中层管理及骨干员工 赵敏 - 运营总监 (向李娜汇报) 直接下属： 林峰、何静 刘洋 - 市场总监 (向李娜汇报) 直接下属： 马超 周涛 - 人力资源总监 (向李娜汇报) 孙浩 - 技术研发部经理 (向王强汇报) 直接下属： 钱程 吴迪 - 产品部经理 (向王强汇报) 郑凯 - 数据科学主管 (向王强汇报) 徐静 - 信息安全主管 (向王强汇报) 黄娟 - 财务主管 (向陈明汇报) 朱莉 - 审计主管 (向陈明汇报) 高飞 - 投资关系主管 (向陈明汇报) 基层员工 林峰 - 高级运营专员 (向赵敏汇报) 何静 - 运营专员 (向赵敏汇报) 马超 - 市场专员 (向刘洋汇报) 钱程 - 软件工程师 (向孙浩汇报)

效果：

看起来灰灰的，我们追加提示词：背景颜色使用彩色浅色，不要都是灰的，线条不要穿插遮挡，让AI重新修改

效果：

这个效果我们看到颜色他是理解并修改了，但线条穿插没理解到。

生成流程图

用户输入：设计一个登录模块的流程图，要求有背景色，布局美观

效果：

效果看着还行，但那个灰色背景色，可能是我提示词写有歧义导致。

生成时序图

用户输入：设计一个登录模块的时序图，要求有背景色，布局美观

效果：

时序部分还是表达清楚了，但前面一条长长的横线是怎么回事？

生成数据库关系图

用户输入：生成下面uml数据库关系图，要求准确连线外键 user--用户 id，name，age target--目标 id，planId(外键来源plan的id) plan--计划 id，name,useids(外键来源user的id)

效果：

输出结果没什么毛病，但连线和美观度总觉还是差点意思。

总结

使用AI，通过理解用户意图，生成适合drawio的xml文档的大方向是可行的，通过二开drawio的源码可以把AI的功能加进去。

从效果看，目前我只是测试了千问coder的模型，其他模型可能会有更好的表现，还有提示词的优化也会影响最终效果。

大家可以多做一些尝试。从当前实验的模型看，基本能理解用户意图，并绘制出图形，但美观方面，这个模型无法准确理解，例如怎样排版才能让线不要互相挡住，默认也不会给元素使用背景色。

往期文章

• 小智AI声波配网
• 小智AI完全自定义唤醒词
• 小智AI服务端部署实现播放自己的歌单
• 小智AI+MCP