尧图网站建设 
如果你画过稍微复杂一点的业务流程图应该有过这种体验打开绘图工具拖几个图形连几条线正要保存的时候产品经理走过来说“这里要加一个判断分支那里要加一个异常处理”。你只能含着泪继续调整框的位置、线的走向、颜色的深浅。等图改完需求又变了一切推倒重来。真正的问题不是“画图”这个动作有多难而是流程图天然需要频繁改动它需要反复表达、评审、对齐。既然流程本身是文字能说清楚的事为什么还要在图形工具里手工维护一份容易过时的“截图”这套思路的最终解就是让 AI 根据自然语言描述直接输出流程图代码再把代码渲染成图。难点在于AI 不是不能画而是没有一个稳定、可复用的规则来约束它输出。同一个需求措辞一变输出就千奇百怪结构一复杂它就漏分支。解决这个问题的办法是设计一个“流程图生成 Skill”。它不是某款产品里特有的插件而是一套用 Markdown 写成的“技能说明书”告诉大模型遇到流程图需求时应该怎么思考、怎么询问、按什么格式输出。本文会从零开始拆解这套 Skill 的设计思路提供可以直接复制到项目里的定义文件、一份通过 API 调用大模型生成 Mermaid 源码的 Python 示例以及一堆真正落地时才会踩到的坑。读完这篇文章你能解决三个问题让 AI 稳定输出可渲染的 Mermaid 流程图把流程图变成仓库里可 diff、可评审的文本文件把“画流程图”这个手工过程压缩成“输入一段描述得到一张图”。1. 这篇文章真正要解决的问题很多人以为流程图难在“工具不好用”。其实工具只是最后一步真正的成本在流程梳理、结构表达和后续维护。你可能会遇到这些场景需求文档里写了一长串文字直接画图需要反复理解、拆解逻辑。流程图画完还要人工排版稍微增加一个分支整张图就得重排。图存在本地项目里的其他同事拿不到最新版评审时总有人拿旧图说话。流程图跟代码是割裂的代码改了图没改时间一长图就没有参考价值。如果只靠“让 AI 画图”这个简单指令效果非常不稳定。AI 有时输出 PlantUML有时输出 Mermaid有时直接丢给你一份 ASCII 字符画遇到复杂业务还会漏掉异常分支。这说明底层模型的能力没有问题缺少的是“任务约束”。Skill 的价值就是建立一个固定的行为规范。它把同类任务的处理流程固化下来让模型每次都用同一套方法完成。这样得到的输出才能被后续工具链稳定消费无论是渲染成图片还是嵌入 Markdown 文档或者进入 CI 流程做语法校验。所以本文真正要解决的问题是如何把“AI 生成流程图”从“一次性的灵光乍现”变成“团队里人人可用的标准工具”。2. 流程图生成的核心概念与原理这里有两个关键概念需要先讲清楚Skill 和 Mermaid。2.1 Skill 是什么在 Agent 或大模型应用语境中Skill 可以理解为一个“能力模块”。它通常由一个指令文件组成告诉模型这个任务的目标是什么、输入应该长什么样、输出必须符合哪些要求、遇到信息缺失时该怎么处理。可以把它类比成新员工入职时的《岗位操作手册》。没有手册新人做事根据感觉来有手册新人按标准流程执行结果稳定可控。对大模型来说Skill 就是一份动态补充的“系统提示词”只在相关任务触发时生效。实际落地时Skill 不一定要依赖某个商业平台。你完全可以把它写成一个SKILL.md文件放在项目的.ai-skills/flowchart-generator/目录下然后在调用大模型时把文件内容作为系统提示词传入。这种方式通用性强也方便团队一起维护。2.2 为什么选择 MermaidMermaid 是一种用文本描述图表的开源语法。它支持流程图、时序图、状态图、甘特图、饼图等多种类型。之所以推荐 Mermaid是因为方案可修改性版本管理团队协作自动化程度手绘/白板差改一个节点要重画无低低Draw.io / Visio中需人工排版弱靠文件传输低PlantUML中文本化强强中Mermaid强文本化强强高可嵌入 Markdown用 Mermaid 生成流程图最核心的变化不是“画图方式变了”而是“流程图变成代码了”。代码可以进 Git 仓库可以做代码评审可以 diff可以用脚本来校验。只要流程是文字描述Mermaid 源码就很容易跟随需求变化。2.3 让 AI 生成代码而不是生成图片这里有一个常见的误解为什么不直接让 AI 生成一张图片原因很简单生成图片的模型很难保证图中文字准确尤其是中文业务术语。图片不可编辑改一个分支就要重新生成。图片无法进 Git 做文本 diff。图片很难嵌入到自动化的文档流程中。所以更合理的链路是大模型负责把自然语言转换成结构化的 Mermaid 代码本地用渲染器把代码变成 SVG 或 PNG。修改时直接改代码再重新渲染一次即可。这个设计真正的优势在于流程图的稳定性由“规则”保证而不是由模型的“临场发挥”保证。3. 环境准备与前置条件实操环节开始。先准备本地环境。本文示例不绑定特定操作系统Windows、macOS、Linux 都可以。3.1 安装 Node.js渲染 Mermaid 需要用到mermaid-js/mermaid-cli它依赖 Node.js 环境。node -v npm -v如果你还没有安装 Node.js建议从官网下载 LTS 版本版本以官方最新版本为准。本文重点演示通用思路版本不影响操作流程。3.2 安装 Mermaid 渲染工具推荐使用npx直接调用不需要全局安装npx mermaid-js/mermaid-cli -v第一次运行时会提示是否安装输入y确认。安装成功后会输出版本号。如果你希望每次使用更短的命令也可以全局安装npm install -g mermaid-js/mermaid-cli3.3 准备 VS Code 插件可选如果你不想用命令行也可以用 VS Code 的 Markdown Preview 相关插件预览 Mermaid 图。装好插件后新建一个.md文件把下面内容粘贴进去# 用户登录流程注意在编辑 Markdown 时插件会自动识别 Mermaid 代码块并渲染。为了让本文示例更通用后面统一使用命令行渲染。3.4 准备大模型访问方式你可以直接使用任意对话型大模型产品把SKILL.md文件内容粘贴到系统提示词位置然后输入流程描述。也可以准备一份兼容 OpenAI 接口的 API Key用脚本完成自动生成。这里需要强调不要在生产环境直接使用外部公开服务处理敏感业务数据。如果需要处理内网数据建议先做脱敏或使用企业内部部署的模型服务。4. 核心流程拆解从描述到成图先不看代码把整个流程拆解清楚。只有流程清晰后面的实现才不会乱。4.1 定义流程图生成技能第一步是写一份SKILL.md。它决定了 AI 在收到“帮我画流程图”这类请求时会用什么样的思维方式处理问题。这份文件至少要包含四个部分任务目标这个 Skill 负责生成什么。输入要求用户需要提供哪些信息。处理规则模型在思考时应该遵循哪些步骤。输出格式最终结果必须长成什么样。4.2 让用户提供结构化描述很多 AI 生成流程图不稳定的原因是用户输入太模糊。比如“帮我画个登录逻辑”这种描述换一个模型就会给出完全不同的理解。解决办法是在 Skill 里定义一个输入模板要求用户尽量提供“流程目标、参与角色、主流程步骤、分支条件、异常分支”。如果用户没有提供完整信息模型应该先反问而不是自行脑补。这一步是整个方案里最重要的一环。稳定的输入结构才能带来稳定的输出结果。4.3 生成 Mermaid 源码模型按照 Skill 中的规则输出一段 Mermaid 源码。为了让渲染工具能识别源码需要放进一个代码块并且第一行标记为mermaid语言类型。当然由于部分 Markdown 渲染器不支持直接解析 Mermaid 代码块在本文中我统一用plaintext代码块展示源码实际使用时你可以直接复制到支持 Mermaid 的编辑器中。4.4 渲染成图像拿到 Mermaid 源码后保存为.mmd文件再调用mmdc命令就能输出 SVG 或 PNG 图片。npx mermaid-js/mermaid-cli -i input.mmd -o output.svg如果是 PNGnpx mermaid-js/mermaid-cli -i input.mmd -o output.png4.5 纳入版本管理最后把.mmd文件和渲染出来的.svg一起放进 Git 仓库。以后需求变更改的是代码而不是原图片。评审时直接看 diff谁改了哪些分支、哪些节点一目了然。5. 完整示例与代码实现下面提供一个完整可运行的示例。整个示例包含四个部分Skill 定义文件、手工调用示例、Python 自动生成脚本、命令行渲染命令。5.1 编写 SKILL.md 技能定义文件在项目根目录创建.ai-skills/flowchart-generator/SKILL.md文件# 技能名称Flowchart Generator ## 任务目标 根据用户提供的流程描述生成符合 Mermaid 语法的 flowchart 流程图源码。 ## 触发条件 用户希望将文字流程转化为流程图时触发。 ## 处理步骤 1. 阅读用户描述提取流程目标、参与角色、步骤、分支条件、异常分支。 2. 如果信息不足先向用户提问不要臆造步骤。 3. 将流程建模为 Mermaid flowchart。 4. 检查每个分支条件是否都有出口。 5. 输出最终源码。 ## 输入模板 用户需要尽量提供以下信息 - 流程目标 - 参与角色可选 - 主流程步骤 - 分支条件 - 异常分支 如果用户未提供按上面的顺序追问。 ## 输出要求 1. 默认使用 flowchart TD从上到下布局。 2. 必须有开始节点和结束节点。 3. 普通步骤使用方括号 []。 4. 判断节点使用花括号 {}。 5. 分支标签用 -- 标签 -- 表示。 6. 输出一个代码块代码块第一行写 mermaid 作为语言标识。 7. 代码块外不要追加额外解释除非用户主动询问。 ## 示例 用户输入登录流程输入账号密码校验通过进入首页失败则提示错误。 输出 [此处插入 Mermaid 代码块示例]注意文件里的“示例”部分在实际使用时可以补一段真正的 Mermaid 源码。这里为了避免嵌套代码块影响阅读先省略。核心是让模型学会“规则优先、追问优先、格式优先”。5.2 手工调用示例把SKILL.md内容复制到支持长提示词的对话型产品中然后输入请用 Flowchart Generator 技能帮我画一个用户登录流程 - 流程目标用户登录 - 主流程步骤打开登录页输入用户名密码点击登录系统校验 - 分支条件校验通过则生成Token跳转首页校验失败则提示错误返回输入模型按照 Skill 规则输出 Mermaid 源码示例flowchart TD A([开始]) -- B[打开登录页] B -- C[输入用户名和密码] C -- D[点击登录] D -- E{校验用户名和密码} E -- 通过 -- F[生成Token] F -- G[进入首页] G -- H([结束]) E -- 不通过 -- I[提示错误信息] I -- C这段代码保存为login.mmd后就能渲染成流程图。从效果上看AI 已经承担了从“文字”到“结构化图形”的主要工作量人只需要核对逻辑是否完整。5.3 用 Python 脚本自动生成 Mermaid 源码如果希望流程完全自动化可以使用 Python 脚本调用大模型 API。以下代码以兼容 OpenAI 接口的服务为例避免绑定特定平台。创建文件generate_flow.py# 文件路径generate_flow.py import os import re import requests # 优先从环境变量读取密钥不推荐硬编码 api_key os.getenv(LLM_API_KEY) base_url os.getenv(LLM_BASE_URL, https://api.openai.com/v1/chat/completions) model os.getenv(LLM_MODEL, gpt-4o-mini) # 读取 Skill 定义作为 system prompt skill_prompt open(SKILL.md, encodingutf-8).read() # 用户输入的结构化流程描述 user_input 流程目标用户登录 主流程步骤 1. 打开登录页 2. 输入用户名和密码 3. 点击登录 4. 系统校验用户名和密码 分支条件 - 校验通过生成Token并跳转首页 - 校验失败提示错误信息并返回输入 resp requests.post( base_url, headers{ Authorization: fBearer {api_key}, Content-Type: application/json, }, json{ model: model, messages: [ {role: system, content: skill_prompt}, {role: user, content: user_input}, ], temperature: 0.2, }, timeout60, ) resp.raise_for_status() content resp.json()[choices][0][message][content] print(content) # 提取代码块中的 Mermaid 源码保存为 .mmd 文件 match re.search(r[a-zA-Z]*\n(.*?), content, re.DOTALL) if match: with open(login.mmd, w, encodingutf-8) as f: f.write(match.group(1)) print(已生成 login.mmd) else: print(未识别到代码块请检查模型输出)运行前安装依赖pip install requests导出环境变量并运行export LLM_API_KEY你的密钥 export LLM_BASE_URLhttps://api.openai.com/v1/chat/completions export LLM_MODELgpt-4o-mini python generate_flow.py脚本会把模型返回内容打印出来并自动提取 Mermaid 源码保存到login.mmd。这段代码虽然不长但已经把“调用模型 - 获取源码 - 落盘文件”的链路走通了。后续要接入团队文档生成、自动化测试都可以在此基础上扩展。5.4 用 mermaid-cli 渲染成图继续使用命令行把.mmd文件渲染成图片。npx mermaid-js/mermaid-cli -i login.mmd -o login.svg如果要透明背景的 PNGnpx mermaid-js/mermaid-cli -i login.mmd -o login.png -b transparent渲染完成后在相同目录下会出现login.svg或login.png用浏览器或图片查看工具打开即可。6. 运行结果与效果验证最终效果其实很直观一段描述进去一张流程图出来。验证成功的标准不只是“图片生成成功”而是三个维度同时满足结构完整开始节点、结束节点、所有主流程步骤都存在。分支正确每个判断节点都有两个出口且分支标签与业务语义一致。可维护修改.mmd源码后重新渲染图片变化符合预期。如果生成失败优先看两个地方第一打开login.mmd检查 Mermaid 语法是否正确。常见的语法错误包括节点 ID 重复、括号不配对、分支标签缺少--分隔符。第二查看渲染命令的输出日志。mermaid-cli会明确指出某一行语法有误顺着提示修改源码即可。许多人在这一步会误以为“模型不行”但实际上问题出在SKILL.md的约束还不够细。比如没有强制要求“分支标签必须使用中文双引号包裹”或者没有要求“节点 ID 使用有意义的英文单词”。把规则写清楚之后成功率会显著提高。7. 常见问题与排查思路下面这份排查表来自我日常使用中最常遇到的几类问题按“现象 - 原因 - 排查方式 - 解决思路”整理问题现象可能原因排查方式解决方案渲染报错提示语法错误Mermaid 源码括号或引号不匹配直接打开.mmd文件检查让模型修复对应行或手动补齐括号输出内容不是代码块模型没遵循输出格式查看模型完整返回文本在 SKILL.md 中强化“输出代码块”要求增加 few-shot 示例中文文字显示为方块源文件编码不是 UTF-8检查文件编码检查系统字体用 UTF-8 保存文件安装中文字体分支方向混乱模型没理解业务逻辑检查用户输入是否存在歧义在输入模板中要求用户补充分支条件节点过多导致图太拥挤没有拆分流程图观察主流程是否过长建议把大流程拆成多个子图或按模块拆分API 返回 401API Key 错误或未授权检查环境变量是否设置正确重新生成 API Key确认服务权限npx命令找不到Node.js 版本过旧或未安装运行node -v检查安装 LTS 版本 Node.js模型跳过异常分支输入描述中没提到异常场景回看输入是否完整在输入模板中把“异常分支”设为必填项把所有问题归并一下会发现绝大多数失败都集中在“输入不够结构化”和“输出格式约束不足”这两类。这不是模型能力能解决的需要靠 Skill 和提示词工程来弥补。8. 最佳实践与工程建议如果只是自己偶尔画一张流程图上面的内容已经够用了。但如果想把这个 Skill 引入团队协作下面几条建议值得认真考虑。8.1 把输入模板当成团队规范不要只让 AI 记住输入模板要让团队成员也按模板写需求。最简单的做法是在SKILL.md之外再维护一个TEMPLATE.md# 流程描述模板 ## 流程目标 一句话说明这个流程解决什么问题。 ## 参与角色 例如用户、系统、管理员。 ## 主流程步骤 1. 步骤一 2. 步骤二 3. 步骤三 ## 分支条件 - 条件A结果描述 - 条件B结果描述 ## 异常分支 - 异常场景处理方式需求评审时只要按照这个模板讨论流程后续 AI 生成流程图的准确度会大幅提升。8.2 流程图纳入 Git 仓库项目里新建docs/diagrams/目录把.mmd文件和渲染出的.svg都放进去。这样每个流程图都有历史记录谁改了什么、为什么改都能在提交记录里看到。建议命名规范docs/diagrams/login-flow.mmd docs/diagrams/order-status.mmd docs/diagrams/deploy-pipeline.mmd8.3 在 CI 里校验流程图是否合法如果团队要求流程文档和代码同步更新可以在 CI 中加一步对docs/diagrams/下所有.mmd文件执行一遍渲染命令。渲染成功说明语法没有问题某个流程图失效说明有人改了代码但没有同步更新文档CI 就会亮红灯。8.4 善用 few-shot 示例有稳定示例的 Skill比只有规则描述的 Skill 可靠得多。建议在SKILL.md里放一到两个完整的输入输出示例。模型看到示例后会更容易理解“好的输出长什么样”。8.5 注意数据安全流程图往往包含业务逻辑甚至是一些没有公开的内部规则。在使用外部大模型 API 时先做去标识化处理不要直接粘贴手机号、身份证信息、内部系统地址。更稳妥的做法是使用企业内部的私有化模型服务或者对描述做一层脱敏后再调用。8.6 从流程图扩展到更多图表这套思路同样适用于状态图、时序图、ER 图。只需要在SKILL.md中增加对应的 Mermaid 语法说明并把输入模板调整一下即可。9. 总结与后续学习方向整套方案的思路其实就一句话把“手搓流程图”改成“让 AI 按固定规则生成文本图源码再用渲染器成图”。过去画一张登录流程图要拖拽十分钟现在只需要写一段结构化描述再用一个命令渲染整个过程不超过两分钟。更重要的是这张图从“一次性产物”变成了“仓库里的活文档”可以评审、可以 diff、可以维护。下一步你可以做三件事直接复制本文的SKILL.md试用几次把它调整成适合你自己业务场景的规则。把 Python 脚本改成“读取指定目录下所有流程描述文本批量生成.mmd文件”的批处理工具。把mmdc渲染命令接入 CI让每次代码变更都会自动检查流程文档是否同步更新。如果你所在团队还在用截图和脑图维护流程文档建议先从一个最简单的模块试起。等团队习惯了“用文字描述流程用代码保存流程图”的方式你会明显感觉到同步成本低了很多。流程图这件事越早从“画图工具”切换到“文本代码”后面省下的时间就越多。 让AI稳定生成流程图：基于Skill与Mermaid的工程化实践
如果你画过稍微复杂一点的业务流程图应该有过这种体验打开绘图工具拖几个图形连几条线正要保存的时候产品经理走过来说“这里要加一个判断分支那里要加一个异常处理”。你只能含着泪继续调整框的位置、线的走向、颜色的深浅。等图改完需求又变了一切推倒重来。真正的问题不是“画图”这个动作有多难而是流程图天然需要频繁改动它需要反复表达、评审、对齐。既然流程本身是文字能说清楚的事为什么还要在图形工具里手工维护一份容易过时的“截图”这套思路的最终解就是让 AI 根据自然语言描述直接输出流程图代码再把代码渲染成图。难点在于AI 不是不能画而是没有一个稳定、可复用的规则来约束它输出。同一个需求措辞一变输出就千奇百怪结构一复杂它就漏分支。解决这个问题的办法是设计一个“流程图生成 Skill”。它不是某款产品里特有的插件而是一套用 Markdown 写成的“技能说明书”告诉大模型遇到流程图需求时应该怎么思考、怎么询问、按什么格式输出。本文会从零开始拆解这套 Skill 的设计思路提供可以直接复制到项目里的定义文件、一份通过 API 调用大模型生成 Mermaid 源码的 Python 示例以及一堆真正落地时才会踩到的坑。读完这篇文章你能解决三个问题让 AI 稳定输出可渲染的 Mermaid 流程图把流程图变成仓库里可 diff、可评审的文本文件把“画流程图”这个手工过程压缩成“输入一段描述得到一张图”。1. 这篇文章真正要解决的问题很多人以为流程图难在“工具不好用”。其实工具只是最后一步真正的成本在流程梳理、结构表达和后续维护。你可能会遇到这些场景需求文档里写了一长串文字直接画图需要反复理解、拆解逻辑。流程图画完还要人工排版稍微增加一个分支整张图就得重排。图存在本地项目里的其他同事拿不到最新版评审时总有人拿旧图说话。流程图跟代码是割裂的代码改了图没改时间一长图就没有参考价值。如果只靠“让 AI 画图”这个简单指令效果非常不稳定。AI 有时输出 PlantUML有时输出 Mermaid有时直接丢给你一份 ASCII 字符画遇到复杂业务还会漏掉异常分支。这说明底层模型的能力没有问题缺少的是“任务约束”。Skill 的价值就是建立一个固定的行为规范。它把同类任务的处理流程固化下来让模型每次都用同一套方法完成。这样得到的输出才能被后续工具链稳定消费无论是渲染成图片还是嵌入 Markdown 文档或者进入 CI 流程做语法校验。所以本文真正要解决的问题是如何把“AI 生成流程图”从“一次性的灵光乍现”变成“团队里人人可用的标准工具”。2. 流程图生成的核心概念与原理这里有两个关键概念需要先讲清楚Skill 和 Mermaid。2.1 Skill 是什么在 Agent 或大模型应用语境中Skill 可以理解为一个“能力模块”。它通常由一个指令文件组成告诉模型这个任务的目标是什么、输入应该长什么样、输出必须符合哪些要求、遇到信息缺失时该怎么处理。可以把它类比成新员工入职时的《岗位操作手册》。没有手册新人做事根据感觉来有手册新人按标准流程执行结果稳定可控。对大模型来说Skill 就是一份动态补充的“系统提示词”只在相关任务触发时生效。实际落地时Skill 不一定要依赖某个商业平台。你完全可以把它写成一个SKILL.md文件放在项目的.ai-skills/flowchart-generator/目录下然后在调用大模型时把文件内容作为系统提示词传入。这种方式通用性强也方便团队一起维护。2.2 为什么选择 MermaidMermaid 是一种用文本描述图表的开源语法。它支持流程图、时序图、状态图、甘特图、饼图等多种类型。之所以推荐 Mermaid是因为方案可修改性版本管理团队协作自动化程度手绘/白板差改一个节点要重画无低低Draw.io / Visio中需人工排版弱靠文件传输低PlantUML中文本化强强中Mermaid强文本化强强高可嵌入 Markdown用 Mermaid 生成流程图最核心的变化不是“画图方式变了”而是“流程图变成代码了”。代码可以进 Git 仓库可以做代码评审可以 diff可以用脚本来校验。只要流程是文字描述Mermaid 源码就很容易跟随需求变化。2.3 让 AI 生成代码而不是生成图片这里有一个常见的误解为什么不直接让 AI 生成一张图片原因很简单生成图片的模型很难保证图中文字准确尤其是中文业务术语。图片不可编辑改一个分支就要重新生成。图片无法进 Git 做文本 diff。图片很难嵌入到自动化的文档流程中。所以更合理的链路是大模型负责把自然语言转换成结构化的 Mermaid 代码本地用渲染器把代码变成 SVG 或 PNG。修改时直接改代码再重新渲染一次即可。这个设计真正的优势在于流程图的稳定性由“规则”保证而不是由模型的“临场发挥”保证。3. 环境准备与前置条件实操环节开始。先准备本地环境。本文示例不绑定特定操作系统Windows、macOS、Linux 都可以。3.1 安装 Node.js渲染 Mermaid 需要用到mermaid-js/mermaid-cli它依赖 Node.js 环境。node -v npm -v如果你还没有安装 Node.js建议从官网下载 LTS 版本版本以官方最新版本为准。本文重点演示通用思路版本不影响操作流程。3.2 安装 Mermaid 渲染工具推荐使用npx直接调用不需要全局安装npx mermaid-js/mermaid-cli -v第一次运行时会提示是否安装输入y确认。安装成功后会输出版本号。如果你希望每次使用更短的命令也可以全局安装npm install -g mermaid-js/mermaid-cli3.3 准备 VS Code 插件可选如果你不想用命令行也可以用 VS Code 的 Markdown Preview 相关插件预览 Mermaid 图。装好插件后新建一个.md文件把下面内容粘贴进去# 用户登录流程注意在编辑 Markdown 时插件会自动识别 Mermaid 代码块并渲染。为了让本文示例更通用后面统一使用命令行渲染。3.4 准备大模型访问方式你可以直接使用任意对话型大模型产品把SKILL.md文件内容粘贴到系统提示词位置然后输入流程描述。也可以准备一份兼容 OpenAI 接口的 API Key用脚本完成自动生成。这里需要强调不要在生产环境直接使用外部公开服务处理敏感业务数据。如果需要处理内网数据建议先做脱敏或使用企业内部部署的模型服务。4. 核心流程拆解从描述到成图先不看代码把整个流程拆解清楚。只有流程清晰后面的实现才不会乱。4.1 定义流程图生成技能第一步是写一份SKILL.md。它决定了 AI 在收到“帮我画流程图”这类请求时会用什么样的思维方式处理问题。这份文件至少要包含四个部分任务目标这个 Skill 负责生成什么。输入要求用户需要提供哪些信息。处理规则模型在思考时应该遵循哪些步骤。输出格式最终结果必须长成什么样。4.2 让用户提供结构化描述很多 AI 生成流程图不稳定的原因是用户输入太模糊。比如“帮我画个登录逻辑”这种描述换一个模型就会给出完全不同的理解。解决办法是在 Skill 里定义一个输入模板要求用户尽量提供“流程目标、参与角色、主流程步骤、分支条件、异常分支”。如果用户没有提供完整信息模型应该先反问而不是自行脑补。这一步是整个方案里最重要的一环。稳定的输入结构才能带来稳定的输出结果。4.3 生成 Mermaid 源码模型按照 Skill 中的规则输出一段 Mermaid 源码。为了让渲染工具能识别源码需要放进一个代码块并且第一行标记为mermaid语言类型。当然由于部分 Markdown 渲染器不支持直接解析 Mermaid 代码块在本文中我统一用plaintext代码块展示源码实际使用时你可以直接复制到支持 Mermaid 的编辑器中。4.4 渲染成图像拿到 Mermaid 源码后保存为.mmd文件再调用mmdc命令就能输出 SVG 或 PNG 图片。npx mermaid-js/mermaid-cli -i input.mmd -o output.svg如果是 PNGnpx mermaid-js/mermaid-cli -i input.mmd -o output.png4.5 纳入版本管理最后把.mmd文件和渲染出来的.svg一起放进 Git 仓库。以后需求变更改的是代码而不是原图片。评审时直接看 diff谁改了哪些分支、哪些节点一目了然。5. 完整示例与代码实现下面提供一个完整可运行的示例。整个示例包含四个部分Skill 定义文件、手工调用示例、Python 自动生成脚本、命令行渲染命令。5.1 编写 SKILL.md 技能定义文件在项目根目录创建.ai-skills/flowchart-generator/SKILL.md文件# 技能名称Flowchart Generator ## 任务目标 根据用户提供的流程描述生成符合 Mermaid 语法的 flowchart 流程图源码。 ## 触发条件 用户希望将文字流程转化为流程图时触发。 ## 处理步骤 1. 阅读用户描述提取流程目标、参与角色、步骤、分支条件、异常分支。 2. 如果信息不足先向用户提问不要臆造步骤。 3. 将流程建模为 Mermaid flowchart。 4. 检查每个分支条件是否都有出口。 5. 输出最终源码。 ## 输入模板 用户需要尽量提供以下信息 - 流程目标 - 参与角色可选 - 主流程步骤 - 分支条件 - 异常分支 如果用户未提供按上面的顺序追问。 ## 输出要求 1. 默认使用 flowchart TD从上到下布局。 2. 必须有开始节点和结束节点。 3. 普通步骤使用方括号 []。 4. 判断节点使用花括号 {}。 5. 分支标签用 -- 标签 -- 表示。 6. 输出一个代码块代码块第一行写 mermaid 作为语言标识。 7. 代码块外不要追加额外解释除非用户主动询问。 ## 示例 用户输入登录流程输入账号密码校验通过进入首页失败则提示错误。 输出 [此处插入 Mermaid 代码块示例]注意文件里的“示例”部分在实际使用时可以补一段真正的 Mermaid 源码。这里为了避免嵌套代码块影响阅读先省略。核心是让模型学会“规则优先、追问优先、格式优先”。5.2 手工调用示例把SKILL.md内容复制到支持长提示词的对话型产品中然后输入请用 Flowchart Generator 技能帮我画一个用户登录流程 - 流程目标用户登录 - 主流程步骤打开登录页输入用户名密码点击登录系统校验 - 分支条件校验通过则生成Token跳转首页校验失败则提示错误返回输入模型按照 Skill 规则输出 Mermaid 源码示例flowchart TD A([开始]) -- B[打开登录页] B -- C[输入用户名和密码] C -- D[点击登录] D -- E{校验用户名和密码} E -- 通过 -- F[生成Token] F -- G[进入首页] G -- H([结束]) E -- 不通过 -- I[提示错误信息] I -- C这段代码保存为login.mmd后就能渲染成流程图。从效果上看AI 已经承担了从“文字”到“结构化图形”的主要工作量人只需要核对逻辑是否完整。5.3 用 Python 脚本自动生成 Mermaid 源码如果希望流程完全自动化可以使用 Python 脚本调用大模型 API。以下代码以兼容 OpenAI 接口的服务为例避免绑定特定平台。创建文件generate_flow.py# 文件路径generate_flow.py import os import re import requests # 优先从环境变量读取密钥不推荐硬编码 api_key os.getenv(LLM_API_KEY) base_url os.getenv(LLM_BASE_URL, https://api.openai.com/v1/chat/completions) model os.getenv(LLM_MODEL, gpt-4o-mini) # 读取 Skill 定义作为 system prompt skill_prompt open(SKILL.md, encodingutf-8).read() # 用户输入的结构化流程描述 user_input 流程目标用户登录 主流程步骤 1. 打开登录页 2. 输入用户名和密码 3. 点击登录 4. 系统校验用户名和密码 分支条件 - 校验通过生成Token并跳转首页 - 校验失败提示错误信息并返回输入 resp requests.post( base_url, headers{ Authorization: fBearer {api_key}, Content-Type: application/json, }, json{ model: model, messages: [ {role: system, content: skill_prompt}, {role: user, content: user_input}, ], temperature: 0.2, }, timeout60, ) resp.raise_for_status() content resp.json()[choices][0][message][content] print(content) # 提取代码块中的 Mermaid 源码保存为 .mmd 文件 match re.search(r[a-zA-Z]*\n(.*?), content, re.DOTALL) if match: with open(login.mmd, w, encodingutf-8) as f: f.write(match.group(1)) print(已生成 login.mmd) else: print(未识别到代码块请检查模型输出)运行前安装依赖pip install requests导出环境变量并运行export LLM_API_KEY你的密钥 export LLM_BASE_URLhttps://api.openai.com/v1/chat/completions export LLM_MODELgpt-4o-mini python generate_flow.py脚本会把模型返回内容打印出来并自动提取 Mermaid 源码保存到login.mmd。这段代码虽然不长但已经把“调用模型 - 获取源码 - 落盘文件”的链路走通了。后续要接入团队文档生成、自动化测试都可以在此基础上扩展。5.4 用 mermaid-cli 渲染成图继续使用命令行把.mmd文件渲染成图片。npx mermaid-js/mermaid-cli -i login.mmd -o login.svg如果要透明背景的 PNGnpx mermaid-js/mermaid-cli -i login.mmd -o login.png -b transparent渲染完成后在相同目录下会出现login.svg或login.png用浏览器或图片查看工具打开即可。6. 运行结果与效果验证最终效果其实很直观一段描述进去一张流程图出来。验证成功的标准不只是“图片生成成功”而是三个维度同时满足结构完整开始节点、结束节点、所有主流程步骤都存在。分支正确每个判断节点都有两个出口且分支标签与业务语义一致。可维护修改.mmd源码后重新渲染图片变化符合预期。如果生成失败优先看两个地方第一打开login.mmd检查 Mermaid 语法是否正确。常见的语法错误包括节点 ID 重复、括号不配对、分支标签缺少--分隔符。第二查看渲染命令的输出日志。mermaid-cli会明确指出某一行语法有误顺着提示修改源码即可。许多人在这一步会误以为“模型不行”但实际上问题出在SKILL.md的约束还不够细。比如没有强制要求“分支标签必须使用中文双引号包裹”或者没有要求“节点 ID 使用有意义的英文单词”。把规则写清楚之后成功率会显著提高。7. 常见问题与排查思路下面这份排查表来自我日常使用中最常遇到的几类问题按“现象 - 原因 - 排查方式 - 解决思路”整理问题现象可能原因排查方式解决方案渲染报错提示语法错误Mermaid 源码括号或引号不匹配直接打开.mmd文件检查让模型修复对应行或手动补齐括号输出内容不是代码块模型没遵循输出格式查看模型完整返回文本在 SKILL.md 中强化“输出代码块”要求增加 few-shot 示例中文文字显示为方块源文件编码不是 UTF-8检查文件编码检查系统字体用 UTF-8 保存文件安装中文字体分支方向混乱模型没理解业务逻辑检查用户输入是否存在歧义在输入模板中要求用户补充分支条件节点过多导致图太拥挤没有拆分流程图观察主流程是否过长建议把大流程拆成多个子图或按模块拆分API 返回 401API Key 错误或未授权检查环境变量是否设置正确重新生成 API Key确认服务权限npx命令找不到Node.js 版本过旧或未安装运行node -v检查安装 LTS 版本 Node.js模型跳过异常分支输入描述中没提到异常场景回看输入是否完整在输入模板中把“异常分支”设为必填项把所有问题归并一下会发现绝大多数失败都集中在“输入不够结构化”和“输出格式约束不足”这两类。这不是模型能力能解决的需要靠 Skill 和提示词工程来弥补。8. 最佳实践与工程建议如果只是自己偶尔画一张流程图上面的内容已经够用了。但如果想把这个 Skill 引入团队协作下面几条建议值得认真考虑。8.1 把输入模板当成团队规范不要只让 AI 记住输入模板要让团队成员也按模板写需求。最简单的做法是在SKILL.md之外再维护一个TEMPLATE.md# 流程描述模板 ## 流程目标 一句话说明这个流程解决什么问题。 ## 参与角色 例如用户、系统、管理员。 ## 主流程步骤 1. 步骤一 2. 步骤二 3. 步骤三 ## 分支条件 - 条件A结果描述 - 条件B结果描述 ## 异常分支 - 异常场景处理方式需求评审时只要按照这个模板讨论流程后续 AI 生成流程图的准确度会大幅提升。8.2 流程图纳入 Git 仓库项目里新建docs/diagrams/目录把.mmd文件和渲染出的.svg都放进去。这样每个流程图都有历史记录谁改了什么、为什么改都能在提交记录里看到。建议命名规范docs/diagrams/login-flow.mmd docs/diagrams/order-status.mmd docs/diagrams/deploy-pipeline.mmd8.3 在 CI 里校验流程图是否合法如果团队要求流程文档和代码同步更新可以在 CI 中加一步对docs/diagrams/下所有.mmd文件执行一遍渲染命令。渲染成功说明语法没有问题某个流程图失效说明有人改了代码但没有同步更新文档CI 就会亮红灯。8.4 善用 few-shot 示例有稳定示例的 Skill比只有规则描述的 Skill 可靠得多。建议在SKILL.md里放一到两个完整的输入输出示例。模型看到示例后会更容易理解“好的输出长什么样”。8.5 注意数据安全流程图往往包含业务逻辑甚至是一些没有公开的内部规则。在使用外部大模型 API 时先做去标识化处理不要直接粘贴手机号、身份证信息、内部系统地址。更稳妥的做法是使用企业内部的私有化模型服务或者对描述做一层脱敏后再调用。8.6 从流程图扩展到更多图表这套思路同样适用于状态图、时序图、ER 图。只需要在SKILL.md中增加对应的 Mermaid 语法说明并把输入模板调整一下即可。9. 总结与后续学习方向整套方案的思路其实就一句话把“手搓流程图”改成“让 AI 按固定规则生成文本图源码再用渲染器成图”。过去画一张登录流程图要拖拽十分钟现在只需要写一段结构化描述再用一个命令渲染整个过程不超过两分钟。更重要的是这张图从“一次性产物”变成了“仓库里的活文档”可以评审、可以 diff、可以维护。下一步你可以做三件事直接复制本文的SKILL.md试用几次把它调整成适合你自己业务场景的规则。把 Python 脚本改成“读取指定目录下所有流程描述文本批量生成.mmd文件”的批处理工具。把mmdc渲染命令接入 CI让每次代码变更都会自动检查流程文档是否同步更新。如果你所在团队还在用截图和脑图维护流程文档建议先从一个最简单的模块试起。等团队习惯了“用文字描述流程用代码保存流程图”的方式你会明显感觉到同步成本低了很多。流程图这件事越早从“画图工具”切换到“文本代码”后面省下的时间就越多。