AI 生成图表的技术原理研究
Posted on Tue, 28 Jul 2026 09:36:48 +0800 by LiangMingJian
问题
- AI 怎么生成架构图？
- AI 怎么生成柱状图，折线图，饼图？
- AI 怎么生成类图？
当前市场 AI 生成图表的类型
直接绘图
使用 AI 的生图能力，直接将需要的图表绘制出来，不通过编写代码的方式进行修改。这种生成的图表不能修改，且文字容易出现错误，因此一般不推荐使用。
提示词：使用 AI 生图能力，绘制一个 4MAT 问题分析图。
HTML+SVG
SVG 的上限高，但下限也低。受限于 AI 没有视觉能力，因此在绘制 SVG 时，AI 只知道坐标，没办法“看见”元素的摆放方式，因此容易出现错位或者溢出的问题，导致绘制出来的图表会很难看。
与直接生图相比，SVG 绘制的内容是可以修改的，但是修改起来会比较麻烦，难以快速的进行修改。
受限于 AI 的能力，这个绘制质量会浮动的比较厉害。
提示词：使用 SVG 绘制一个 4MAT 问题分析图。
Hy4 绘制的 4MAT 问题分析图
Hy3 绘制的 4MAT 问题分析图
可以看见，“不聪明”的 AI 绘制的内容会有偏移。
SVG 代码
HTML+CSS+JavaScript
通过第三方的 JavaScript 库，结合 CSS 非常容易生成需要的图表。
通过这种方式生成的图表，不仅容易修改，同时摆放位置也容易进行管理。但这种方式的缺点也明显，容易受到 JavaScript 库的显示，样式比较固定。
这种方式 AI 只影响文字内容和布局，绘制图表的美观与否，受所使用的第三方的 JS 库影响。因此，这种方式对“不聪明”的 AI 比较友好。
推荐技术选型
架构图
推荐使用 HTML+ CSS，原生实现即可。
提示词：使用 HTML+CSS 生成一个课程资源管理平台的分层架构图
柱状图，折线图，饼图等
推荐使用 Apache ECharts，一个基于 JavaScript 的开源可视化图表库。
Apache ECharts 支持包括折线图，柱状图，饼图，散点图，雷达图在内多种图表。
提示词：使用 Apache ECharts，以某连锁 2026 年度经营看板为主题，绘制柱状图，折线图，饼图，雷达图。
类图
推荐使用 Mermaid.js，一个可以使用 md 绘制包括类图，Git 图，UML 图在内的一个 JavaScript 库，适用于技术图表。
提示词：使用 Mermaid.js，以智慧图书馆借阅管理系统为主题，绘制一个 UML 类图。
总结
在 AI 能力强大和不考虑自行修改的前提下，推荐直接使用 SVG 绘制上述所有图表，因为使用 SVG 时，AI 的能力不会受到限制，最为自由。
但是，在 AI 能力不足时，或者考虑自行修改的前提下，这里还是建议使用上述”推荐技术选型“，针对不同的图表，使用不同的技术生成。