AI生成架构图、流程图和PPT：一套无需绘图软件的高效工作流

在做技术方案汇报时架构图、流程图、PPT 是绕不开的“三件套”。以前我的习惯是打开 Visio 或 ProcessOn一格格拖拽、连线、配色一份架构图少说要花一两个小时遇到临时被要求“补一张流程图”还要现找模板效率很低。后来我发现如果把这三种材料拆解成“结构化信息 渲染模板”让 AI 大模型先帮我们把信息和代码生成好剩下的渲染交给免费在线工具或命令行脚本整个流程会轻量很多。这篇文章就围绕“不用绘图软件如何让 AI 生成架构图、流程图和 PPT”完整展开从原理、提示词、代码示例到排错建议一次讲清楚。这里有一个前提需要先说明AI 并不会像人类一样打开画板给你拖一个矩形出来它更擅长生成文本、代码和结构化数据。所以本文讲的不是“AI 一键生成图片”那种黑魔法而是一套可落地、可复现、可版本管理的工作流。读完你至少能掌握三种技能第一让 AI 写出 Mermaid、PlantUML 架构图和流程图源码第二让 AI 写出 HTML/CSS 卡片式架构图第三让 AI 生成 Markdown 版 PPT 或者 python-pptx 脚本并在本地导出真正的.pptx文件。1. AI 生成架构图、流程图和 PPT 的核心思路在开始实操之前先理清一个关键问题架构图、流程图、PPT 本质上都是“结构化信息 视觉呈现”。架构图是一组节点和连线的集合比如“网关 - 用户服务 - MySQL”这就是一条结构化描述流程图是“开始 - 判断条件 - 两个分支 - 结束”这种顺序逻辑PPT 则是标题、正文、图片、版式按照页面顺序排列的结果。既然它们本质上都可以被文本描述那就完全可以让 AI 先生成描述性文本再通过渲染工具变成图形和幻灯片。这套通用方法论可以拆成三个层次。第一层是信息层。你需要清楚地告诉 AI系统包含哪些模块模块之间怎么调用流程图从哪里开始、哪个环节会分支PPT 一共要讲几个主题。这一层的描述越准确后面的图形就越接近你的真实需求。第二层是代码层。AI 根据信息层的内容把图形转换成 Mermaid 代码、PlantUML 代码、Graphviz DOT 代码、HTML/CSS 结构或者 PPT 生成脚本。第三层是渲染层。你用在线编辑器、Typora、Obsidian、浏览器、Marp、Python 脚本把这些代码渲染成 PNG、SVG、PDF、PPTX。只要掌握这三层你就不需要再依赖 Visio 和 PowerPoint 的拖拽画布。从个人经验看这套方法最大的优势是“可修改”。传统绘图软件里改一张架构图要么删除重画要么手工挪线而用代码方式AI 生成完代码后你自己改一行文字、换一个方向图形就会自动变化。对于经常更新架构文档、流程文档的团队来说这个优势非常明显。2. 环境准备与工具链既然目标是“不用绘图软件”我们实际需要的东西并不多一个 AI 对话工具 若干个轻量渲染工具。AI 对话工具可以选择国内可用的 DeepSeek、Kimi、豆包、通义千问等本文示例的提示词都是通用写法不绑定具体平台。渲染工具按需组合不必全部安装Mermaid 渲染可以用 mermaid.live 在线编辑器、Typora、Obsidian以及 GitHub 仓库的 Markdown 预览。PlantUML 渲染VS Code 安装 PlantUML 插件或使用 PlantUML 官方在线服务。Graphviz 渲染本地安装 Graphviz 后用dot -Tpng 文件名.dot -o 输出.png生成图片。HTML/CSS 渲染普通浏览器即可打印为 PDF 或截图导出高清图。Marp 渲染需要 Node.js 环境使用npx marp-team/marp-cli将 Markdown 转 PPTX。python-pptx 渲染需要 Python 3.6用pip install python-pptx安装后运行脚本生成 PPT。如果只是临时画一张图建议优先选择 mermaid.live打开浏览器就能粘贴代码不需要安装任何环境。如果需要批量生成 PPT或者在公司内网使用再考虑本地安装 Node.js 和 Python。版本方面需要提醒一点Mermaid、Marp、python-pptx 都处于持续迭代状态不同版本的语法和命令可能略有差异。因此本文示例以通用语法为主具体版本以你本机安装的版本为准。如果遇到“语法报错”“命令找不到”等问题优先查看对应工具的官方升级说明不要让旧教程限定了思路。3. 让 AI 生成架构图3.1 先学会写“架构图提示词”让 AI 画架构图核心不是“画得好”而是“说得清”。一个合格的架构图提示词应该包含四个要素角色、场景、布局、输出格式。举个例子你是一名系统架构师。请用 Mermaid 语法绘制一个微服务系统架构图。 要求 1. 包含接入层、应用层、服务层、数据层。 2. 服务层包含用户服务、订单服务、支付服务。 3. 使用 graph TB 从上到下布局。 4. 用 subgraph 分组组内节点标注主要技术Spring Boot、MySQL、Redis、Kafka。 只输出 Mermaid 代码不要额外解释。这里为什么强调“只输出代码”因为很多 AI 工具会在代码外面包一层说明文字复制起来很烦。加了这句话后输出内容会更干净你只需要直接粘贴到渲染工具即可。如果你不确定架构图里要放哪些模块也可以让 AI 先帮你梳理。比如输入“请帮我梳理一个电商系统的核心模块并输出成 Mermaid 架构图”。AI 会先根据常识列出用户、商品、订单、支付、库存等模块再生成图形代码。这时候你只需要把生成结果复制到 mermaid.live 或 Typora 中预览。3.2 用 Mermaid 生成微服务架构图下面是一段 AI 生成的微服务架构图源码使用的就是上面示例中的提示词。注意这段代码需要粘贴到 mermaid.live、Typora 或 Obsidian 中才能看到图形我这里只用普通代码块展示源码结构。graph TB subgraph 接入层 A[Nginx 网关] end subgraph 应用层 B[Web 前端] C[移动 App] end subgraph 服务层 D[用户服务] E[订单服务] F[支付服务] end subgraph 数据层 G[(MySQL)] H[(Redis)] I[(Elasticsearch)] end A -- B A -- C B -- D B -- E C -- D C -- E D -- E E -- F D -- G E -- G F -- G F -- I H -- D H -- E这段代码的含义很直接graph TB表示从上到下布局subgraph表示一个分组A[Nginx 网关]表示一个矩形节点方括号里是显示名称--表示连线。渲染出来后你会得到一张带分组背景色的微服务架构图。如果你觉得线条太乱可以让 AI 改成A -.- B这种虚线关系或者调整连线的疏密。使用 Mermaid 时有几个容易踩坑的点需要注意。第一节点名称尽量不要包含特殊符号比如括号、引号容易造成语法解析失败如果必须包含可以用引号包起来例如A[Nginx(网关)]。第二中文节点在多数渲染器里都能正常显示但如果你用旧版 Typora可能需要更新到最新版本。第三如果图形太大可以考虑把数据层的 Redis、Kafka 等基础设施放到另一个 subgraph 中不要把所有节点平铺在一张图里。3.3 使用 PlantUML 和 Graphviz 生成组件架构图除了 MermaidAI 还可以生成 PlantUML 和 Graphviz 代码。PlantUML 适合表达组件依赖关系Graphviz 适合表达复杂拓扑结构。两者的思路一致先让 AI 生成结构化文本再渲染成图片。例如下面这段 PlantUML 代码描述了一个简单的 Java 后端组件架构startuml !theme plain component 接入层 as nginx { [Nginx 网关] } component 服务层 as service { [用户服务] [订单服务] } component 存储层 as store { database MySQL as mysql database Redis as redis } nginx -- service service -- store enduml将代码粘贴到 PlantUML 在线服务或 VS Code 插件中就能生成对应的组件图。PlantUML 的优点是自带一套图形语法支持组件、时序、用例等多种图表类型适合喜欢“约定大于配置”的开发者。Graphviz 的 DOT 语言则更偏底层。你可以让 AI 生成这样一个最小示例digraph G { rankdirTB; node [shapebox, stylerounded]; 接入层 [shapebox]; 服务层 [shapebox]; 接入层 - 用户服务 - 订单服务; 订单服务 - MySQL [label读写]; 用户服务 - Redis [label缓存]; }在装有 Graphviz 的机器上执行命令dot -Tpng 输入.dot -o 输出.png就能得到一张 PNG 图片。相比 MermaidGraphviz 提供的布局算法更稳定适合大量节点的架构关系图。当然学习成本也稍微高一点日常使用我更推荐 Mermaid。3.4 用 HTML/CSS 生成可直接预览的架构图有些场景不适合用 Mermaid 分组比如要给客户看一张“产品形态部署图”希望颜色更柔和、卡片更精细。这时候可以让 AI 生成 HTML/CSS 页面用 flex 布局和圆角卡片模拟架构图。提示词可以这样写请用 HTML CSS 绘制一张系统架构图。 要求 1. 页面宽度 1200px居中显示。 2. 分为四层接入层、应用层、服务层、数据层。 3. 每层使用不同背景色层内放置多个圆角卡片。 4. 层与层之间用垂直居中的连接线或箭头表示。 5. 输出完整 HTML 代码可直接保存为 .html 文件打开。AI 生成的 HTML 通常包含一段style样式和div结构。你把它保存为architecture.html用浏览器打开就能看到一张排版精美的架构图。如果需要高清图片可以用浏览器打印功能导出 PDF再用 PDF 转 PNG如果只是发给同事看直接截图也够用。HTML/CSS 方案最大的优势是样式自由度极高。你可以让 AI 把网关节点放在最上方把服务注册中心放在侧边把数据库放在底部还可以随意调整颜色和圆角。缺点是不能像 Mermaid 那样自动计算连线所有内容都是固定的。所以这个方案适用于“展示效果优先、结构相对固定”的架构图。4. 让 AI 生成流程图4.1 从流程描述到 flowchart 代码流程图的难点不是画图而是把流程逻辑拆清楚。通常我先用一两句话把流程告诉 AI再让它转换成 flowchart 代码。比如用户登录流程提示词可以这样写请用 Mermaid flowchart LR 生成用户登录流程图。 流程如下 用户输入账号密码前端校验是否为空如果不为空后端校验账号密码是否正确 正确则生成 Token 并返回错误则返回错误提示。 前端校验为空时也返回错误提示。 只输出 Mermaid 代码。AI 生成的代码类似这样flowchart TD A[开始] -- B[输入账号密码] B -- C{前端校验是否为空} C -- 否 -- D{后端校验账号密码} C -- 是 -- E[返回错误提示] D -- 是 -- F[生成 Token 并返回] D -- 否 -- E E -- A F -- G[结束]这里{}表示判断节点-- 是 --表示连线上的分支标签。渲染后就是一个标准登录流程图。你可能会发现 AI 生成的连线顺序和你想的不完全一样比如“返回错误提示”后又连回了“开始”这是流程表达方式的问题。遇到这种情况不要手工去画直接在提示词中补充一句“如果校验失败流程结束不再回到开始”AI 就会重新调整分支方向。流程图生成之后一定要检查几个关键点判断节点是否覆盖了所有分支是否有死循环结束节点是否唯一。AI 生成流程图的逻辑能力虽然不错但它不理解你业务里的特殊规则。比如“用户连续输错三次账号锁定”这个条件如果不写在提示词里AI 一定不会自己加进去。所以给 AI 的信息越完整流程图的可用性越高。4.2 用 sequenceDiagram 表达接口时序除了流程分支接口调用时序也是技术文档里经常需要绘制的内容。Mermaid 的sequenceDiagram非常适合表达这种“多个对象之间按时间顺序发送消息”的场景。提示词示例请用 Mermaid sequenceDiagram 描述一个用户下单的时序图。 参与对象前端、订单服务、支付服务、库存服务。 流程 1. 前端发起下单请求 2. 订单服务创建订单 3. 订单服务调用库存服务扣减库存 4. 订单服务调用支付服务生成支付单 5. 支付成功回调订单服务更新订单状态。 只输出 Mermaid 代码。生成的代码类似sequenceDiagram participant 前端 participant 订单服务 participant 库存服务 participant 支付服务 前端-订单服务: 提交订单 订单服务-订单服务: 创建订单 订单服务-库存服务: 扣减库存 库存服务--订单服务: 扣减结果 订单服务-支付服务: 创建支付单 支付服务--订单服务: 支付单号 前端-支付服务: 发起支付 支付服务--订单服务: 支付回调 订单服务-订单服务: 更新订单状态渲染后你会得到一张带有生命线和消息箭头的时序图。时序图在方案评审时特别有用它能直观展示服务间调用关系。和 flowchart 一样时序图也适合用代码方式维护业务变化时让 AI 改一行消息重新渲染即可。5. 让 AI 生成 PPT5.1 用 Markdown Marp 快速生成幻灯片PPT 是这三件套里最麻烦的因为版式、字号、图片、对齐都要考虑。如果想快速做一版文字型 PPT可以用 Markdown 写成幻灯片然后用 Marp 转成 PPTX。先让 AI 生成 Markdown 版幻灯片提示词可以这样写请用 Marp 格式生成一个主题为“软件架构设计原则”的 PPT。 要求 1. 包含封面、目录、5 页正文、结尾页。 2. 每页必须有标题和要点。 3. 使用 --- 作为分页符。 4. 输出 Markdown 源码。AI 会生成类似下面的内容--- theme: default paginate: true --- # 软件架构设计原则 - 单一职责 - 开闭原则 - 依赖倒置 - 接口隔离 - 迪米特法则 --- ## 目录 - 设计原则概述 - 单一职责 - 开闭原则 - 依赖倒置 - 小结 --- ## 单一职责 一个模块只承担一个职责减少变更扩散。 --- ## 开闭原则 对扩展开放对修改关闭。 ---把这段内容保存为slides.md本机安装 Node.js 后运行下面的命令npx marp-team/marp-cli slides.md -o slides.pptxMarp 就会生成一个slides.pptx文件你可以用 PowerPoint 或 WPS 打开。想要 PDF 时把命令改成-o slides.pdf即可。Marp 也支持调整主题在 Markdown 开头的 YAML 配置里写theme: uncover或theme: gaia可以得到不同风格的版式。这个方案非常适合快速出汇报初稿AI 写内容Marp 排版你再在 PowerPoint 里做细节调整。整个过程不需要手动拖拽文本框也不用下载付费模板。如果公司要求使用内部模板你可以在生成 PPTX 后用 PowerPoint 的“设计”功能套用模板或者把模板作为 PPTX 母版预先放入项目目录再在 Marp 中引用。5.2 用 python-pptx 脚本生成 PPT如果 PPT 里要插入大量数据图表、多个固定版式Markdown 转 PPT 就不够灵活了。这时可以用 python-pptx 库让 AI 直接生成 Python 脚本本地运行后输出.pptx文件。首先安装依赖pip install python-pptx接下来让 AI 生成一个三页 PPT 脚本。提示词示例使用 python-pptx 创建一个三页 PPT 第一页标题为“AI 生成 PPT 实战”副标题为“用脚本代替手工拖拽” 第二页标题为“核心思路”正文内容为“1. AI 生成脚本 2. 本地运行脚本 3. 自动输出 pptx” 第三页标题为“总结”正文内容为“AI 模板 脚本可以批量生成演示文稿”。 请输出完整 Python 代码。AI 生成的代码可能是这样from pptx import Presentation from pptx.util import Inches # 创建一个演示文稿对象 prs Presentation() # 使用第 1 种版式标题和内容 layout prs.slide_layouts[1] # 第一页 slide prs.slides.add_slide(layout) slide.shapes.title.text AI 生成 PPT 实战 slide.placeholders[1].text 用脚本代替手工拖拽 # 第二页 slide prs.slides.add_slide(layout) slide.shapes.title.text 核心思路 slide.placeholders[1].text 1. AI 生成脚本\n2. 本地运行脚本\n3. 自动输出 pptx # 第三页 slide prs.slides.add_slide(layout) slide.shapes.title.text 总结 slide.placeholders[1].text AI 模板 脚本可以批量生成演示文稿 # 保存文件 prs.save(demo.pptx) print(生成完成demo.pptx)把代码保存为make_ppt.py在命令行执行python make_ppt.py当前目录下就会出现demo.pptx。用 PowerPoint 打开后第一页是标题页后面两页是内容页。这个脚本的关键是slide_layouts[1]。不同版本、不同模板的 PPT 占位符索引可能不同如果你运行后发现正文没有显示可能就是因为模板中的布局索引不一致。可以先打印prs.slide_layouts查看有哪些布局再选择合适的索引。python-pptx 的好处是脚本可以重复执行。比如你一个月要生成 30 份周报 PPT只需要把数据和标题写成列表循环生成即可。AI 帮你写好了一次性脚本后续修改数据时不用重新画图直接改 Excel 或 JSON再运行一次脚本就完成了。5.3 把复杂图嵌入 PPT 的工作流PPT 里经常需要嵌架构图、流程图。现在我们已经有前几步的基础所以一个完整的工作流可以是让 AI 生成 Mermaid 架构图或流程图源码。在 mermaid.live 中渲染并导出为 SVG 或 PNG 图片。让 AI 生成 python-pptx 脚本在脚本中用add_picture方法把图片插入到指定位置。运行脚本生成 PPT。例如在 python-pptx 脚本里插入图片的片段如下from pptx import Presentation from pptx.util import Inches prs Presentation() slide prs.slides.add_slide(prs.slide_layouts[6]) # 空白版式 slide.shapes.add_picture(architecture.png, Inches(1), Inches(1), widthInches(8)) prs.save(with_architecture.pptx)这样就把“吃流程图的 PPT”变成了“脚本生成的 PPT”整套流程都可以用代码维护。不过要注意add_picture的图片路径必须是本机实际存在的文件AI 生成的代码不会自动帮你导出图片。你需要确保在运行脚本前已经通过 Mermaid 渲染工具把图片导出到工作目录。6. 常见问题与排查思路在实际使用中最容易遇到的问题集中在语法、布局、字体三个方面。我整理了一张排查表供你快速定位问题现象可能原因解决思路Mermaid 渲染报错语法版本不兼容、节点名称含特殊符号检查报错行去掉节点名称中的括号改用英文引号包裹架构图层级不对提示词没有明确分组和分层补充“先 subgraph 分组再连线”“按自上而下分层”等约束流程图分支混乱判断条件语义不清晰先让 AI 列出流程步骤再确认分支条件后转 flowchartPPT 导出后中文字体丢失Marp 主题未指定中文字体在 YAML 或 CSS 中设置font-family: Microsoft YaHei或宋体python-pptx 生成后没有正文布局索引选错打印prs.slide_layouts的占位符索引选择包含正文占位符的布局导出图片不清晰直接截图导致模糊优先导出 SVG 或 PDF再用工具转成高分辨率 PNGAI 生成代码很啰嗦没有限定输出格式提示词结尾加“只输出代码不要解释”如果遇到 Mermaid 报错最直接的办法不是自己去改而是把报错信息原样复制给 AI让 AI 帮你修复。比如你可以说“下面这段 Mermaid 代码在 Typora 中报错请根据报错信息帮我修正并解释原因”。AI 会根据你的描述重新生成符合语法的代码。这个方法比手动检查快很多。另外很多 AI 对话工具有“连续上下文”能力。你在同一个对话里先让它生成架构图再让它生成流程图它可以记住你之前提到的模块名。但如果换了一个新对话所有背景信息都要重新描述。所以长时间做一个方案文档时建议把系统模块、技术选型、业务规则等背景写在一段固定上下文里每次画图时粘贴提示词保证 AI 连续输出的风格一致。7. 最佳实践与工程建议这套方法用多了以后我总结了几个工程化建议也是维护效率的关键。第一提示词模板化。把你常用的架构图、流程图、PPT 生成需求写成模板存放在一个 Markdown 文件里。每次需要画图时复制模板替换其中的模块名、流程步骤或章节主题即可。例如我的模板长这样你是产品经理/架构师。请用 Mermaid 绘制【XX 图】。 结构... 布局从【上/左】到【下/右】。 要求使用 subgraph 分组节点名称使用中文连线不得交叉。 只输出代码。第二代码优先图片其次。尽可能保留 AI 生成的.mmd、.dot、.md、.py文件而不是只导出 PNG。这些源码就是架构图、流程图、PPT 的源文件。同事需要修改时把源码交给 AI 改比重新截图标注省力得多。配合 Git 管理还能看到每次图形的变更记录。第三敏感信息脱敏。如果你工作中涉及内网地址、真实用户名、密钥、未公开业务数据不要让 AI 直接生成带有这些敏感信息的架构图。可以先做一层脱敏处理比如把192.168.1.10改成内网网关把user-001改成用户A。在公有 AI 工具中不要粘贴机密代码块。涉及生产环境的系统链路建议使用本地私有化模型或在公司允许的内部 AI 平台中处理。第四批量内容用脚本。架构图通常比较少手动调没问题但 PPT 如果是周报、月报、培训课件这类重复型内容尽量选择 python-pptx 脚本化方案。AI 生成一次脚本后续替换数据源即可不用每次都重新生成 PPT。第五善用渲染工具的导出能力。Mermaid 在线编辑器可以导出 PNG 和 SVGTypora 可以直接复制图片到剪贴板浏览器打印可以导出 PDF。技术上“有没有绘图软件”已经不影响产出质量。关键是让 AI 把图形信息转换成代码渲染工作交给稳定工具。8. 写在最后在我看来AI 生成架构图、流程图、PPT 并不是一个“替代设计师”的神话而是一种新的生产习惯把画图问题转换成代码生成问题把“鼠标拖拽”变成“描述 提示词 渲染”。我身边的同事已经开始用这个方式处理方案文档遇到需要修改时直接在源码里改一行比重新画一遍快得多。如果你还不太熟悉 Mermaid 语法不必焦虑。你不需要背语法只需要会用自然语言描述图形结构然后让 AI 帮你翻译成代码。把“用户登录后判断权限有权限进入首页没有权限返回错误提示”这句话交给 AI它生成 flowchart 源码你复制到 mermaid.live 渲染一张流程图就出来了。整个过程十五分钟以内。下一步你可以试着从一个小场景开始把你当前项目的模块清单发给 AI让它生成一张 Mermaid 架构图再渲染出来看看结构是否符合预期。接着把一个操作流程描述给 AI生成 flowchart最后用 Marp 做一个三页 PPT 初稿。当这三样都跑通后你的办公桌上真的可以少装不少“重量级软件”而产出效率反而更高。