企业官网建设流程全解析

如果你画过稍微复杂一点的业务流程图，应该有过这种体验：打开绘图工具，拖几个图形，连几条线，正要保存的时候，产品经理走过来说“这里要加一个判断分支，那里要加一个异常处理”。你只能含着泪继续调整框的位置、线的走向、颜色的深浅。等图改完，需求又变了，一切推倒重来。

真正的问题不是“画图”这个动作有多难，而是流程图天然需要频繁改动，它需要反复表达、评审、对齐。既然流程本身是文字能说清楚的事，为什么还要在图形工具里手工维护一份容易过时的“截图”？这套思路的最终解，就是让 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 为什么选择 Mermaid

Mermaid 是一种用文本描述图表的开源语法。它支持流程图、时序图、状态图、甘特图、饼图等多种类型。之所以推荐 Mermaid，是因为：

用 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-cli

3.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

如果是 PNG：

npx @mermaid-js/mermaid-cli -i input.mmd -o output.png

4.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", encoding="utf-8").read() # 用户输入的结构化流程描述 user_input = """ 流程目标：用户登录 主流程步骤： 1. 打开登录页 2. 输入用户名和密码 3. 点击登录 4. 系统校验用户名和密码 分支条件： - 校验通过，生成Token并跳转首页 - 校验失败，提示错误信息并返回输入 """ resp = requests.post( base_url, headers={ "Authorization": f"Bearer {api_key}", "Content-Type": "application/json", }, json={ "model": model, "messages": [ {"role": "system", "content": skill_prompt}, {"role": "user", "content": user_input}, ], "temperature": 0.2, }, timeout=60, ) 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", encoding="utf-8") as f: f.write(match.group(1)) print("已生成 login.mmd") else: print("未识别到代码块，请检查模型输出")

运行前安装依赖：

pip install requests

导出环境变量并运行：

export LLM_API_KEY="你的密钥" export LLM_BASE_URL="https://api.openai.com/v1/chat/completions" export LLM_MODEL="gpt-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

如果要透明背景的 PNG：

npx @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. 常见问题与排查思路

下面这份排查表来自我日常使用中最常遇到的几类问题，按“现象 -> 原因 -> 排查方式 -> 解决思路”整理：

把所有问题归并一下会发现，绝大多数失败都集中在“输入不够结构化”和“输出格式约束不足”这两类。这不是模型能力能解决的，需要靠 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.mmd

8.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，让每次代码变更都会自动检查流程文档是否同步更新。

如果你所在团队还在用截图和脑图维护流程文档，建议先从一个最简单的模块试起。等团队习惯了“用文字描述流程，用代码保存流程图”的方式，你会明显感觉到同步成本低了很多。流程图这件事，越早从“画图工具”切换到“文本代码”，后面省下的时间就越多。