你是不是也遇到过这样的困境想用 ChatGPT 生成一张教学用的流程图、架构图或者数据可视化图表却发现自己要写一个无比冗长、细节繁多的 Prompt从描述布局、颜色、字体到解释每个元素的关系最后得到的图片可能还不尽如人意。更让人头疼的是每次需要类似的图都得把这个痛苦的过程重复一遍。这背后是一个典型的效率瓶颈我们试图用自然语言去精确指挥一个本质上更适合用代码来定义的任务。生成复杂、规范的视觉素材恰恰是代码的强项。今天要介绍的核心思路就是**“用代码代替长Prompt”**。这不是简单地让 ChatGPT 写一段画图代码而是一种工作流的根本性转变将你的视觉设计意图封装成可复用、可参数化、可版本控制的代码脚本。本文将为你彻底拆解这套方法。你将不再需要为每一张图去“求”AI而是掌握一个“工厂”输入核心数据和逻辑运行一段脚本就能批量、稳定地输出高质量的教学视觉素材。无论是技术架构图、算法流程图、还是交互时序图你都能像调用函数一样轻松生成。1. 为什么“长Prompt”是低效的而“代码生成”是未来在深入具体操作之前我们必须先理解为什么传统的“长Prompt”方式在教学视觉素材生成上走不远。长Prompt的核心问题模糊性与歧义自然语言描述“一个三层架构左边是用户中间是服务层右边是数据库”AI可能会画出完全不同的布局、连接方式和图标风格。不可复用性为一张图精心雕琢的Prompt很难直接用于生成另一张类似但数据不同的图。每次都是“一次性劳动”。难以迭代如果想调整图中某个元素的颜色或位置你往往需要重新描述整个场景而不是像在代码中那样只修改一个变量或属性。缺乏版本控制你无法像管理代码一样去对比不同版本Prompt生成的图片差异也无法进行有效的协作和回溯。代码生成的核心优势精确性与一致性代码如Graphviz的DOT语言、Mermaid语法、PlantUML语法定义了严格的语法规则。一个节点、一条边的属性是明确无误的这保证了生成的图形每次都具有一致的结构和风格。高复用性与模板化你可以创建一个绘图函数或模板文件。需要新图时只需替换模板中的数据如节点名称、关系列表即可批量生成一系列风格统一的图表。易于迭代和维护修改颜色改一行样式定义。调整布局换一个布局引擎参数。所有更改清晰可见且可轻松回滚。无缝集成开发流程生成的代码脚本可以放入你的项目仓库作为文档的一部分。当项目架构更新时同步更新图表代码即可确保了文档与代码的同步。因此我们的目标不是让ChatGPT“画一张图”而是让它成为我们的“代码助手”帮助我们快速编写出这些图形定义代码。你的角色从一个“描述者”转变为一个“架构师”ChatGPT则是一个高效的“代码实现者”。2. 核心工具链选择从描述到图形的代码桥梁要实现“代码生成素材”我们需要一套工具链。这套链路由三部分组成定义语言、渲染引擎和我们的助手ChatGPT。2.1 图形定义语言我们用来“写”图的代码这是最关键的一环。你需要选择一种或几种适合你场景的文本化图形描述语言。语言/工具最适合场景优点缺点输出格式Mermaid流程图、时序图、类图、甘特图、饼图等。教学场景最推荐。语法简洁直观易于阅读和手写社区活跃支持广泛GitHub、Notion等原生支持。复杂自定义样式如精确控制某个节点的颜色相对麻烦。SVG, PNGGraphviz (DOT)有向/无向图、层级结构、网络拓扑、状态机。适合需要自动布局的复杂关系图。布局能力极其强大dot, neato, fdp等适合自动排列大量节点专业图表首选。语法比Mermaid稍复杂需要单独安装引擎。SVG, PNG, PDF等PlantUMLUML图类图、用例图、时序图等的权威标准。UML标准支持最完整序列图功能强大。语法特定于UML通用性稍弱。SVG, PNGDiagrams (Python库)云系统架构图AWS, Azure, GCP图标。直接使用官方云服务图标画云架构图非常方便美观。主要用于云架构领域较专一。PNG, SVG教学场景首选建议从Mermaid开始。它的学习曲线平缓能覆盖80%的教学图表需求流程图、时序图、类图且能轻松嵌入Markdown文档实现“文档即图表”。2.2 渲染引擎把代码变成图片定义了代码还需要工具将其渲染为图片。Mermaid 有在线编辑器也可通过mermaid-cli命令行工具或各类编辑器插件如 VS Code 的 Markdown Preview Enhanced本地渲染。Graphviz 需要安装 Graphviz 软件包然后使用dot命令进行渲染。PlantUML 需要Java环境可以本地运行jar包或使用在线服务器。Diagrams 作为Python库安装后运行Python脚本即可生成。2.3 ChatGPT的角色从需求到代码的翻译官与加速器ChatGPT在这里不是渲染器而是高级代码生成器和语法纠正器。你向它描述你的图形意图它为你生成对应的Mermaid、Graphviz等代码。你甚至可以让它基于一份数据如JSON来生成图表代码。3. 环境准备打造你的本地图表生成流水线为了获得最佳体验和效率建议搭建一个本地生成环境。我们将以最通用的Mermaid和Graphviz为例。3.1 基础环境Node.js 与 Python确保你的系统已安装Node.js ( 14) 用于运行mermaid-cli。Python ( 3.7) 用于可能的脚本编排和Diagrams库。 你可以通过以下命令检查node --version python --version3.2 安装 Mermaid CLIMermaid CLI 是一个命令行工具可以将.mmd文件转换为图片。npm install -g mermaid-js/mermaid-cli安装完成后你会得到mmdc命令。3.3 安装 GraphvizmacOS (使用 Homebrew):brew install graphvizUbuntu/Debian:sudo apt-get install graphvizWindows: 从 Graphviz 官网 下载安装包并安装记得将安装目录下的bin文件夹添加到系统环境变量PATH中。安装后在终端输入dot -V应能显示版本信息。3.4 准备你的工作区创建一个项目文件夹用于存放你的图表代码和生成的图片。mkdir teaching-visuals cd teaching-visuals mkdir src outputs # src放源码outputs放生成的图片4. 工作流核心如何与ChatGPT协作生成图表代码这才是与传统方式分道扬镳的关键步骤。你的Prompt不再是“画一个图”而是“请根据我的需求写一段Mermaid代码”。4.1 基础Prompt模式从需求描述到代码低效的旧方式“画一个流程图展示学生登录学习系统的过程。首先打开网站然后输入用户名密码如果错误就提示错误如果正确就进入主页主页有课程列表...”高效的新方式“请帮我生成一段Mermaid流程图代码。流程描述如下1. 开始于‘访问登录页’。2. 用户‘输入凭据’。3. 系统进行‘验证’。4. 如果验证失败流向‘显示错误信息’然后回到‘输入凭据’。5. 如果验证成功流向‘进入学习仪表盘’。6. 仪表盘下有‘查看课程列表’、‘进入学习模块’、‘查看进度’三个并行活动。请使用清晰的矩形节点判断节点用菱形并为‘验证’节点添加浅黄色背景以示强调。”ChatGPT 返回的代码示例graph TD A[访问登录页] -- B[输入凭据] B -- C{验证} C --|失败| D[显示错误信息] D -- B C --|成功| E[进入学习仪表盘] E -- F[查看课程列表] E -- G[进入学习模块] E -- H[查看学习进度] style C fill:#f9f,stroke:#333,stroke-width:2px,color:#fff将这段代码保存为src/login_flow.mmd然后用命令行生成图片mmdc -i src/login_flow.mmd -o outputs/login_flow.png -t dark -b transparent这样你就得到了一张精准、可复用的流程图。下次要改直接改.mmd文件里的代码即可。4.2 进阶Prompt模式数据驱动图表生成当图表需要展示真实数据时代码生成的优势更大。你可以将数据如JSON、CSV和模板要求一起给ChatGPT。Prompt示例“我有一个部门组织结构数据如下JSON格式{ name: 技术部, children: [ {name: 后端组, members: 5}, {name: 前端组, members: 4}, {name: 运维组, members: 3} ] }请生成一段Graphviz DOT语言代码将它可视化为一个树形组织结构图。要求根节点‘技术部’用蓝色叶子节点显示‘组名人数’的格式并使用矩形节点。”ChatGPT 返回的代码示例 (Graphviz DOT)digraph org_chart { rankdirTB; // 从上到下布局 node [shaperectangle, stylefilled]; // 根节点 tech_dept [label技术部, fillcolorlightblue]; // 叶子节点 backend [label后端组 (5), fillcolorlightgrey]; frontend [label前端组 (4), fillcolorlightgrey]; ops [label运维组 (3), fillcolorlightgrey]; // 连接关系 tech_dept - backend; tech_dept - frontend; tech_dept - ops; }保存为src/org_chart.dot然后用Graphviz渲染dot -Tpng src/org_chart.dot -o outputs/org_chart.png4.3 超级Prompt模式创建可复用的图表模板你可以要求ChatGPT为你编写一个参数化的Python脚本模板。这个脚本接受数据输入自动生成对应的图表代码并渲染。Prompt示例“请编写一个Python脚本它读取一个JSON文件该文件包含一个‘系统架构’描述例如有‘组件’列表和它们之间的‘依赖’关系。脚本使用Diagrams库Python的diagrams包自动生成一张系统架构图并保存为PNG。请写出完整的脚本并包含详细的注释。”ChatGPT可能会生成类似下面的脚本框架# 文件src/generate_architecture.py from diagrams import Diagram, Cluster from diagrams.aws.compute import EC2 from diagrams.aws.database import RDS from diagrams.aws.network import ELB import json def generate_architecture(data_file, output_file): 根据JSON数据文件生成架构图。 JSON格式示例 { title: Web应用架构, components: [ {type: ELB, id: lb, label: 负载均衡器}, {type: EC2, id: web1, label: Web服务器 1}, {type: EC2, id: web2, label: Web服务器 2}, {type: RDS, id: db, label: 数据库} ], dependencies: [ {from: lb, to: web1}, {from: lb, to: web2}, {from: web1, to: db}, {from: web2, to: db} ] } with open(data_file, r) as f: data json.load(f) # 映射组件类型到Diagrams的类这里需要根据你的JSON扩展 type_map { ELB: ELB, EC2: EC2, RDS: RDS, } graph_attr { label: data.get(title, 系统架构图), fontsize: 20, } with Diagram(, showFalse, directionLR, graph_attrgraph_attr): # 文件名由output_file参数控制 # 创建组件实例字典 components {} for comp in data[components]: comp_class type_map.get(comp[type]) if comp_class: # 这里简化处理实际可能需要更复杂的实例化 components[comp[id]] comp_class(comp[label]) else: print(f警告未知组件类型 {comp[type]}) # 根据依赖关系连接组件 for dep in data.get(dependencies, []): src components.get(dep[from]) dst components.get(dep[to]) if src and dst: src dst # Diagrams库的连接语法 else: print(f警告无法找到依赖关系中的组件 {dep}) if __name__ __main__: # 使用示例 generate_architecture(architecture_data.json, outputs/architecture.png) print(架构图已生成至 outputs/architecture.png)这个脚本本身就是一个强大的模板。你只需要维护architecture_data.json这个数据文件每次更新数据后运行脚本就能得到最新的架构图。5. 实战案例三步生成课堂教学素材库让我们通过一个完整的案例将上述流程串联起来。假设你是一名计算机科学讲师需要为“数据结构-栈”这一课准备视觉素材。5.1 第一步定义素材清单数据化你的需求不要空想用结构化的方式列出所有需要的图栈的概念图一个垂直的箱子从上到下放入和取出元素。栈的操作流程图压栈Push和弹栈Pop的算法流程。栈的应用实例图浏览器前进后退栈的示意图。栈与队列的对比图。5.2 第二步使用ChatGPT批量生成图表代码针对每个需求编写专门的Prompt。针对“栈的概念图”使用Mermaid“生成Mermaid流程图代码可视化‘栈’数据结构。要求1. 一个垂直的容器表示栈。2. 容器内有三个从上到下排列的方块分别标为‘数据3栈顶’、‘数据2’、‘数据1栈底’。3. 容器顶部有一个向下的箭头标注‘Push入栈’。4. 容器顶部有一个向上的箭头标注‘Pop出栈’。请让整体布局垂直清晰展示LIFO后进先出特性。”将返回的代码保存为src/stack_concept.mmd。针对“栈的操作流程图”使用Mermaid“生成Mermaid流程图代码描述栈的Push和Pop操作。流程从‘开始’起判断‘栈是否已满’如果满则‘报错溢出’否则‘元素放入栈顶’‘栈顶指针上移’最后‘结束’。另一分支Pop操作判断‘栈是否为空’如果空则‘报错下溢’否则‘取出栈顶元素’‘栈顶指针下移’最后‘结束’。请用两个并列的流程展示。”将返回的代码保存为src/stack_operations.mmd。5.3 第三步编写脚本一键渲染所有素材创建一个简单的Shell脚本或Python脚本自动执行所有渲染命令。src/render_all.sh(Mac/Linux):#!/bin/bash # 渲染所有Mermaid文件 for mmd_file in src/*.mmd; do if [ -f $mmd_file ]; then filename$(basename $mmd_file .mmd) echo 正在渲染: $filename.mmd mmdc -i $mmd_file -o outputs/${filename}.png -t forest -b white fi done # 渲染所有Graphviz文件 for dot_file in src/*.dot; do if [ -f $dot_file ]; then filename$(basename $dot_file .dot) echo 正在渲染: $filename.dot dot -Tpng $dot_file -o outputs/${filename}.png fi done echo 所有图表渲染完成输出至 outputs/ 目录。运行脚本chmod x src/render_all.sh ./src/render_all.sh现在你的outputs/文件夹里就有了所有高质量的PNG图片可以直接插入PPT、讲义或在线课程平台。6. 效果验证与调试确保生成的图表符合预期生成代码后不要盲目相信第一次的输出。建立快速的验证循环。6.1 使用在线编辑器实时预览对于Mermaid和PlantUML强烈建议使用其官方在线编辑器进行第一次预览和微调。Mermaid Live Editor: https://mermaid.live/PlantUML Online Server: https://www.plantuml.com/plantuml/uml/将ChatGPT生成的代码粘贴进去立即看到渲染效果。如果样式或布局不满意可以手动调整代码或者将问题反馈给ChatGPT“这段Mermaid代码生成的图我希望节点间距更大一些该如何修改”6.2 本地渲染并检查输出命令行渲染后用图片查看器打开生成的PNG或SVG文件。检查布局是否合理有无重叠、线条是否混乱。样式是否正确颜色、字体大小是否符合要求。内容是否准确所有标签、关系是否正确无误。6.3 调试常见图表代码问题Mermaid 图形溢出画布在代码最开头添加%%{init: {theme: base, themeVariables: { fontSize: 16px}}}%%调整主题和字体或尝试调整graph TD为graph TB从上到下有时能改善布局。Graphviz 节点重叠在DOT文件开头添加graph [splinespolyline, overlapfalse];或尝试不同的布局引擎如用neato -Tpng file.dot -o file.png。中文乱码确保你的系统或渲染命令指定了中文字体。对于Graphviz可以在节点属性中设置fontnameSimHei或fontnameMicrosoft YaHei。7. 常见问题与排查思路在实际操作中你可能会遇到以下问题问题现象可能原因排查方式解决方案mmdc命令未找到Node.js或mermaid-cli未正确安装运行which mmdc或mmdc --version重新安装npm install -g mermaid-js/mermaid-clidot命令未找到Graphviz 未安装或未加入PATH运行dot -V正确安装Graphviz并将安装目录的bin文件夹加入系统PATH环境变量。渲染出的图片空白或只有部分内容图表代码语法错误或太大超出画布1. 检查在线预览。2. 查看命令行有无报错。3. 简化图表或调整布局参数。修复代码语法错误。对于复杂图尝试在Mermaid代码开头使用%%{init: {themeVariables: { primaryColor: #fff, edgeLabelBackground:#fff}}}%%调整。中文显示为方框缺少中文字体支持查看渲染日志对于mmdc使用-p puppeteer-config.json参数指定字体配置文件内定义args: [--font-familyMicrosoft YaHei]。对于Graphviz在DOT代码中设置节点属性fontnameMicrosoft YaHei。ChatGPT生成的代码运行报错AI对某些复杂库如Diagrams的API不熟悉仔细阅读错误信息对照官方文档将错误信息反馈给ChatGPT要求其修正。对于复杂任务优先要求ChatGPT生成基础代码框架然后自己根据官方文档进行填充和修正。生成的图表风格不统一每次Prompt描述不一致回顾之前成功的Prompt建立一个“风格指南”文档记录下你喜欢的颜色代码、布局参数等。在每次新的Prompt中附上这个指南或之前成功的代码作为示例。8. 最佳实践与工程化建议将“代码生成视觉素材”这一方法工程化能让你长期受益。建立个人或团队的图表代码库将生成的.mmd、.dot、.puml文件像管理源代码一样用Git进行版本管理。为不同类型的图建立目录如/architectures、/flows、/sequence。创建标准化模板针对你最常绘制的几类图如系统上下文图、部署图、类图制作“黄金模板”文件。里面定义了颜色方案、字体、通用布局等。新图只需复制模板并替换内容。数据与样式分离对于数据驱动的图表如组织架构、依赖关系学习使用脚本Python/JavaScript从数据源JSON/YAML/CSV读取数据并注入到模板中生成最终的图表代码。这实现了“一份数据多处出图”。将图表生成集成到文档流水线如果你使用Markdown写文档如GitBook、Docsify、VuePress可以直接在Markdown中嵌入Mermaid代码块。在CI/CD流程中可以自动将文档中的代码块渲染为图片并部署。Prompt管理将你成功的、高效的Prompt保存下来。你可以创建一个笔记记录下“如何让ChatGPT生成一个漂亮的时序图Prompt”、“如何描述复杂的网络拓扑”。这能极大提升你下次的工作效率。理解工具的边界对于极其复杂、对美学要求极高的示意图如产品宣传图目前的文本绘图工具可能仍力有未逮。此时专业绘图软件或手动调整仍是必要的。本方法的核心价值在于快速、准确、可重复地生成用于说明、教学和文档的技术图表。从今天起尝试放弃那个需要你费力描述的长Prompt。转向用代码来定义你的视觉语言。让ChatGPT成为你最好的代码协作者将你的创意和数据结构快速、批量地转化为清晰、专业的教学视觉素材。这不仅仅是换了一个工具更是升级了一种思维模式从临时的、模糊的“请求”转向系统的、精确的“构建”。当你建立起这套流程后准备教学素材将不再是一项耗时耗力的苦差而是一个高效、甚至充满乐趣的自动化过程。 
长河君 · 2026/9/1 5:27:40 · 阅读 1.2k 告别冗长Prompt：用代码生成技术图表，打造高效教学素材库
你是不是也遇到过这样的困境想用 ChatGPT 生成一张教学用的流程图、架构图或者数据可视化图表却发现自己要写一个无比冗长、细节繁多的 Prompt从描述布局、颜色、字体到解释每个元素的关系最后得到的图片可能还不尽如人意。更让人头疼的是每次需要类似的图都得把这个痛苦的过程重复一遍。这背后是一个典型的效率瓶颈我们试图用自然语言去精确指挥一个本质上更适合用代码来定义的任务。生成复杂、规范的视觉素材恰恰是代码的强项。今天要介绍的核心思路就是**“用代码代替长Prompt”**。这不是简单地让 ChatGPT 写一段画图代码而是一种工作流的根本性转变将你的视觉设计意图封装成可复用、可参数化、可版本控制的代码脚本。本文将为你彻底拆解这套方法。你将不再需要为每一张图去“求”AI而是掌握一个“工厂”输入核心数据和逻辑运行一段脚本就能批量、稳定地输出高质量的教学视觉素材。无论是技术架构图、算法流程图、还是交互时序图你都能像调用函数一样轻松生成。1. 为什么“长Prompt”是低效的而“代码生成”是未来在深入具体操作之前我们必须先理解为什么传统的“长Prompt”方式在教学视觉素材生成上走不远。长Prompt的核心问题模糊性与歧义自然语言描述“一个三层架构左边是用户中间是服务层右边是数据库”AI可能会画出完全不同的布局、连接方式和图标风格。不可复用性为一张图精心雕琢的Prompt很难直接用于生成另一张类似但数据不同的图。每次都是“一次性劳动”。难以迭代如果想调整图中某个元素的颜色或位置你往往需要重新描述整个场景而不是像在代码中那样只修改一个变量或属性。缺乏版本控制你无法像管理代码一样去对比不同版本Prompt生成的图片差异也无法进行有效的协作和回溯。代码生成的核心优势精确性与一致性代码如Graphviz的DOT语言、Mermaid语法、PlantUML语法定义了严格的语法规则。一个节点、一条边的属性是明确无误的这保证了生成的图形每次都具有一致的结构和风格。高复用性与模板化你可以创建一个绘图函数或模板文件。需要新图时只需替换模板中的数据如节点名称、关系列表即可批量生成一系列风格统一的图表。易于迭代和维护修改颜色改一行样式定义。调整布局换一个布局引擎参数。所有更改清晰可见且可轻松回滚。无缝集成开发流程生成的代码脚本可以放入你的项目仓库作为文档的一部分。当项目架构更新时同步更新图表代码即可确保了文档与代码的同步。因此我们的目标不是让ChatGPT“画一张图”而是让它成为我们的“代码助手”帮助我们快速编写出这些图形定义代码。你的角色从一个“描述者”转变为一个“架构师”ChatGPT则是一个高效的“代码实现者”。2. 核心工具链选择从描述到图形的代码桥梁要实现“代码生成素材”我们需要一套工具链。这套链路由三部分组成定义语言、渲染引擎和我们的助手ChatGPT。2.1 图形定义语言我们用来“写”图的代码这是最关键的一环。你需要选择一种或几种适合你场景的文本化图形描述语言。语言/工具最适合场景优点缺点输出格式Mermaid流程图、时序图、类图、甘特图、饼图等。教学场景最推荐。语法简洁直观易于阅读和手写社区活跃支持广泛GitHub、Notion等原生支持。复杂自定义样式如精确控制某个节点的颜色相对麻烦。SVG, PNGGraphviz (DOT)有向/无向图、层级结构、网络拓扑、状态机。适合需要自动布局的复杂关系图。布局能力极其强大dot, neato, fdp等适合自动排列大量节点专业图表首选。语法比Mermaid稍复杂需要单独安装引擎。SVG, PNG, PDF等PlantUMLUML图类图、用例图、时序图等的权威标准。UML标准支持最完整序列图功能强大。语法特定于UML通用性稍弱。SVG, PNGDiagrams (Python库)云系统架构图AWS, Azure, GCP图标。直接使用官方云服务图标画云架构图非常方便美观。主要用于云架构领域较专一。PNG, SVG教学场景首选建议从Mermaid开始。它的学习曲线平缓能覆盖80%的教学图表需求流程图、时序图、类图且能轻松嵌入Markdown文档实现“文档即图表”。2.2 渲染引擎把代码变成图片定义了代码还需要工具将其渲染为图片。Mermaid 有在线编辑器也可通过mermaid-cli命令行工具或各类编辑器插件如 VS Code 的 Markdown Preview Enhanced本地渲染。Graphviz 需要安装 Graphviz 软件包然后使用dot命令进行渲染。PlantUML 需要Java环境可以本地运行jar包或使用在线服务器。Diagrams 作为Python库安装后运行Python脚本即可生成。2.3 ChatGPT的角色从需求到代码的翻译官与加速器ChatGPT在这里不是渲染器而是高级代码生成器和语法纠正器。你向它描述你的图形意图它为你生成对应的Mermaid、Graphviz等代码。你甚至可以让它基于一份数据如JSON来生成图表代码。3. 环境准备打造你的本地图表生成流水线为了获得最佳体验和效率建议搭建一个本地生成环境。我们将以最通用的Mermaid和Graphviz为例。3.1 基础环境Node.js 与 Python确保你的系统已安装Node.js ( 14) 用于运行mermaid-cli。Python ( 3.7) 用于可能的脚本编排和Diagrams库。 你可以通过以下命令检查node --version python --version3.2 安装 Mermaid CLIMermaid CLI 是一个命令行工具可以将.mmd文件转换为图片。npm install -g mermaid-js/mermaid-cli安装完成后你会得到mmdc命令。3.3 安装 GraphvizmacOS (使用 Homebrew):brew install graphvizUbuntu/Debian:sudo apt-get install graphvizWindows: 从 Graphviz 官网 下载安装包并安装记得将安装目录下的bin文件夹添加到系统环境变量PATH中。安装后在终端输入dot -V应能显示版本信息。3.4 准备你的工作区创建一个项目文件夹用于存放你的图表代码和生成的图片。mkdir teaching-visuals cd teaching-visuals mkdir src outputs # src放源码outputs放生成的图片4. 工作流核心如何与ChatGPT协作生成图表代码这才是与传统方式分道扬镳的关键步骤。你的Prompt不再是“画一个图”而是“请根据我的需求写一段Mermaid代码”。4.1 基础Prompt模式从需求描述到代码低效的旧方式“画一个流程图展示学生登录学习系统的过程。首先打开网站然后输入用户名密码如果错误就提示错误如果正确就进入主页主页有课程列表...”高效的新方式“请帮我生成一段Mermaid流程图代码。流程描述如下1. 开始于‘访问登录页’。2. 用户‘输入凭据’。3. 系统进行‘验证’。4. 如果验证失败流向‘显示错误信息’然后回到‘输入凭据’。5. 如果验证成功流向‘进入学习仪表盘’。6. 仪表盘下有‘查看课程列表’、‘进入学习模块’、‘查看进度’三个并行活动。请使用清晰的矩形节点判断节点用菱形并为‘验证’节点添加浅黄色背景以示强调。”ChatGPT 返回的代码示例graph TD A[访问登录页] -- B[输入凭据] B -- C{验证} C --|失败| D[显示错误信息] D -- B C --|成功| E[进入学习仪表盘] E -- F[查看课程列表] E -- G[进入学习模块] E -- H[查看学习进度] style C fill:#f9f,stroke:#333,stroke-width:2px,color:#fff将这段代码保存为src/login_flow.mmd然后用命令行生成图片mmdc -i src/login_flow.mmd -o outputs/login_flow.png -t dark -b transparent这样你就得到了一张精准、可复用的流程图。下次要改直接改.mmd文件里的代码即可。4.2 进阶Prompt模式数据驱动图表生成当图表需要展示真实数据时代码生成的优势更大。你可以将数据如JSON、CSV和模板要求一起给ChatGPT。Prompt示例“我有一个部门组织结构数据如下JSON格式{ name: 技术部, children: [ {name: 后端组, members: 5}, {name: 前端组, members: 4}, {name: 运维组, members: 3} ] }请生成一段Graphviz DOT语言代码将它可视化为一个树形组织结构图。要求根节点‘技术部’用蓝色叶子节点显示‘组名人数’的格式并使用矩形节点。”ChatGPT 返回的代码示例 (Graphviz DOT)digraph org_chart { rankdirTB; // 从上到下布局 node [shaperectangle, stylefilled]; // 根节点 tech_dept [label技术部, fillcolorlightblue]; // 叶子节点 backend [label后端组 (5), fillcolorlightgrey]; frontend [label前端组 (4), fillcolorlightgrey]; ops [label运维组 (3), fillcolorlightgrey]; // 连接关系 tech_dept - backend; tech_dept - frontend; tech_dept - ops; }保存为src/org_chart.dot然后用Graphviz渲染dot -Tpng src/org_chart.dot -o outputs/org_chart.png4.3 超级Prompt模式创建可复用的图表模板你可以要求ChatGPT为你编写一个参数化的Python脚本模板。这个脚本接受数据输入自动生成对应的图表代码并渲染。Prompt示例“请编写一个Python脚本它读取一个JSON文件该文件包含一个‘系统架构’描述例如有‘组件’列表和它们之间的‘依赖’关系。脚本使用Diagrams库Python的diagrams包自动生成一张系统架构图并保存为PNG。请写出完整的脚本并包含详细的注释。”ChatGPT可能会生成类似下面的脚本框架# 文件src/generate_architecture.py from diagrams import Diagram, Cluster from diagrams.aws.compute import EC2 from diagrams.aws.database import RDS from diagrams.aws.network import ELB import json def generate_architecture(data_file, output_file): 根据JSON数据文件生成架构图。 JSON格式示例 { title: Web应用架构, components: [ {type: ELB, id: lb, label: 负载均衡器}, {type: EC2, id: web1, label: Web服务器 1}, {type: EC2, id: web2, label: Web服务器 2}, {type: RDS, id: db, label: 数据库} ], dependencies: [ {from: lb, to: web1}, {from: lb, to: web2}, {from: web1, to: db}, {from: web2, to: db} ] } with open(data_file, r) as f: data json.load(f) # 映射组件类型到Diagrams的类这里需要根据你的JSON扩展 type_map { ELB: ELB, EC2: EC2, RDS: RDS, } graph_attr { label: data.get(title, 系统架构图), fontsize: 20, } with Diagram(, showFalse, directionLR, graph_attrgraph_attr): # 文件名由output_file参数控制 # 创建组件实例字典 components {} for comp in data[components]: comp_class type_map.get(comp[type]) if comp_class: # 这里简化处理实际可能需要更复杂的实例化 components[comp[id]] comp_class(comp[label]) else: print(f警告未知组件类型 {comp[type]}) # 根据依赖关系连接组件 for dep in data.get(dependencies, []): src components.get(dep[from]) dst components.get(dep[to]) if src and dst: src dst # Diagrams库的连接语法 else: print(f警告无法找到依赖关系中的组件 {dep}) if __name__ __main__: # 使用示例 generate_architecture(architecture_data.json, outputs/architecture.png) print(架构图已生成至 outputs/architecture.png)这个脚本本身就是一个强大的模板。你只需要维护architecture_data.json这个数据文件每次更新数据后运行脚本就能得到最新的架构图。5. 实战案例三步生成课堂教学素材库让我们通过一个完整的案例将上述流程串联起来。假设你是一名计算机科学讲师需要为“数据结构-栈”这一课准备视觉素材。5.1 第一步定义素材清单数据化你的需求不要空想用结构化的方式列出所有需要的图栈的概念图一个垂直的箱子从上到下放入和取出元素。栈的操作流程图压栈Push和弹栈Pop的算法流程。栈的应用实例图浏览器前进后退栈的示意图。栈与队列的对比图。5.2 第二步使用ChatGPT批量生成图表代码针对每个需求编写专门的Prompt。针对“栈的概念图”使用Mermaid“生成Mermaid流程图代码可视化‘栈’数据结构。要求1. 一个垂直的容器表示栈。2. 容器内有三个从上到下排列的方块分别标为‘数据3栈顶’、‘数据2’、‘数据1栈底’。3. 容器顶部有一个向下的箭头标注‘Push入栈’。4. 容器顶部有一个向上的箭头标注‘Pop出栈’。请让整体布局垂直清晰展示LIFO后进先出特性。”将返回的代码保存为src/stack_concept.mmd。针对“栈的操作流程图”使用Mermaid“生成Mermaid流程图代码描述栈的Push和Pop操作。流程从‘开始’起判断‘栈是否已满’如果满则‘报错溢出’否则‘元素放入栈顶’‘栈顶指针上移’最后‘结束’。另一分支Pop操作判断‘栈是否为空’如果空则‘报错下溢’否则‘取出栈顶元素’‘栈顶指针下移’最后‘结束’。请用两个并列的流程展示。”将返回的代码保存为src/stack_operations.mmd。5.3 第三步编写脚本一键渲染所有素材创建一个简单的Shell脚本或Python脚本自动执行所有渲染命令。src/render_all.sh(Mac/Linux):#!/bin/bash # 渲染所有Mermaid文件 for mmd_file in src/*.mmd; do if [ -f $mmd_file ]; then filename$(basename $mmd_file .mmd) echo 正在渲染: $filename.mmd mmdc -i $mmd_file -o outputs/${filename}.png -t forest -b white fi done # 渲染所有Graphviz文件 for dot_file in src/*.dot; do if [ -f $dot_file ]; then filename$(basename $dot_file .dot) echo 正在渲染: $filename.dot dot -Tpng $dot_file -o outputs/${filename}.png fi done echo 所有图表渲染完成输出至 outputs/ 目录。运行脚本chmod x src/render_all.sh ./src/render_all.sh现在你的outputs/文件夹里就有了所有高质量的PNG图片可以直接插入PPT、讲义或在线课程平台。6. 效果验证与调试确保生成的图表符合预期生成代码后不要盲目相信第一次的输出。建立快速的验证循环。6.1 使用在线编辑器实时预览对于Mermaid和PlantUML强烈建议使用其官方在线编辑器进行第一次预览和微调。Mermaid Live Editor: https://mermaid.live/PlantUML Online Server: https://www.plantuml.com/plantuml/uml/将ChatGPT生成的代码粘贴进去立即看到渲染效果。如果样式或布局不满意可以手动调整代码或者将问题反馈给ChatGPT“这段Mermaid代码生成的图我希望节点间距更大一些该如何修改”6.2 本地渲染并检查输出命令行渲染后用图片查看器打开生成的PNG或SVG文件。检查布局是否合理有无重叠、线条是否混乱。样式是否正确颜色、字体大小是否符合要求。内容是否准确所有标签、关系是否正确无误。6.3 调试常见图表代码问题Mermaid 图形溢出画布在代码最开头添加%%{init: {theme: base, themeVariables: { fontSize: 16px}}}%%调整主题和字体或尝试调整graph TD为graph TB从上到下有时能改善布局。Graphviz 节点重叠在DOT文件开头添加graph [splinespolyline, overlapfalse];或尝试不同的布局引擎如用neato -Tpng file.dot -o file.png。中文乱码确保你的系统或渲染命令指定了中文字体。对于Graphviz可以在节点属性中设置fontnameSimHei或fontnameMicrosoft YaHei。7. 常见问题与排查思路在实际操作中你可能会遇到以下问题问题现象可能原因排查方式解决方案mmdc命令未找到Node.js或mermaid-cli未正确安装运行which mmdc或mmdc --version重新安装npm install -g mermaid-js/mermaid-clidot命令未找到Graphviz 未安装或未加入PATH运行dot -V正确安装Graphviz并将安装目录的bin文件夹加入系统PATH环境变量。渲染出的图片空白或只有部分内容图表代码语法错误或太大超出画布1. 检查在线预览。2. 查看命令行有无报错。3. 简化图表或调整布局参数。修复代码语法错误。对于复杂图尝试在Mermaid代码开头使用%%{init: {themeVariables: { primaryColor: #fff, edgeLabelBackground:#fff}}}%%调整。中文显示为方框缺少中文字体支持查看渲染日志对于mmdc使用-p puppeteer-config.json参数指定字体配置文件内定义args: [--font-familyMicrosoft YaHei]。对于Graphviz在DOT代码中设置节点属性fontnameMicrosoft YaHei。ChatGPT生成的代码运行报错AI对某些复杂库如Diagrams的API不熟悉仔细阅读错误信息对照官方文档将错误信息反馈给ChatGPT要求其修正。对于复杂任务优先要求ChatGPT生成基础代码框架然后自己根据官方文档进行填充和修正。生成的图表风格不统一每次Prompt描述不一致回顾之前成功的Prompt建立一个“风格指南”文档记录下你喜欢的颜色代码、布局参数等。在每次新的Prompt中附上这个指南或之前成功的代码作为示例。8. 最佳实践与工程化建议将“代码生成视觉素材”这一方法工程化能让你长期受益。建立个人或团队的图表代码库将生成的.mmd、.dot、.puml文件像管理源代码一样用Git进行版本管理。为不同类型的图建立目录如/architectures、/flows、/sequence。创建标准化模板针对你最常绘制的几类图如系统上下文图、部署图、类图制作“黄金模板”文件。里面定义了颜色方案、字体、通用布局等。新图只需复制模板并替换内容。数据与样式分离对于数据驱动的图表如组织架构、依赖关系学习使用脚本Python/JavaScript从数据源JSON/YAML/CSV读取数据并注入到模板中生成最终的图表代码。这实现了“一份数据多处出图”。将图表生成集成到文档流水线如果你使用Markdown写文档如GitBook、Docsify、VuePress可以直接在Markdown中嵌入Mermaid代码块。在CI/CD流程中可以自动将文档中的代码块渲染为图片并部署。Prompt管理将你成功的、高效的Prompt保存下来。你可以创建一个笔记记录下“如何让ChatGPT生成一个漂亮的时序图Prompt”、“如何描述复杂的网络拓扑”。这能极大提升你下次的工作效率。理解工具的边界对于极其复杂、对美学要求极高的示意图如产品宣传图目前的文本绘图工具可能仍力有未逮。此时专业绘图软件或手动调整仍是必要的。本方法的核心价值在于快速、准确、可重复地生成用于说明、教学和文档的技术图表。从今天起尝试放弃那个需要你费力描述的长Prompt。转向用代码来定义你的视觉语言。让ChatGPT成为你最好的代码协作者将你的创意和数据结构快速、批量地转化为清晰、专业的教学视觉素材。这不仅仅是换了一个工具更是升级了一种思维模式从临时的、模糊的“请求”转向系统的、精确的“构建”。当你建立起这套流程后准备教学素材将不再是一项耗时耗力的苦差而是一个高效、甚至充满乐趣的自动化过程。