这次我们来看一个能直接提升日常绘图效率的 skill 型方案把自己手搓的流程图生成 skill 接到大模型平台上用一句自然语言描述业务逻辑让 AI 直接吐出 Mermaid 流程图源码再粘贴到支持 Mermaid 的编辑器里渲染成图。整个过程不需要打开流程图软件拖方框、拉箭头也不需要记住什么复杂的绘图规范。这个方案最核心的几个特点第一输出的是标准 Mermaid 代码不是图片意味着可以继续编辑、版本管理、批量生成第二对硬件几乎没要求不需要独立显卡不需要部署大模型只要能用大模型 API 或者 Agent 平台就可以跑第三可以扩展成 HTTP 接口服务把一句话生成流程图的能力接到自己的工程化工具链里做批量任务也没问题。本文会带你完整走一遍手搓流程先讲清楚 Skill 的工作原理再给出输入 Schema 和系统提示词模板然后演示 Mermaid 渲染接入最后用几个典型测试用例验证效果并给出封装成 API 和批量生成的代码示例。适合经常画流程图做方案设计、写技术文档、做需求评审、梳理业务逻辑的开发者也适合想给自己的 AI 助手加一个画图技能的玩家。1. 核心能力速览能力项说明项目类型AI Skill / 提示词工程 工具链解决痛点手动绘制流程图效率低、修改成本高主要功能自然语言描述需求自动生成流程图源码输出格式Mermaid 代码可继续渲染或嵌入文档运行环境支持大模型 API 的 Agent 平台或自建服务显存需求无特殊要求不依赖本地 GPU启动方式取决于宿主平台可封装为 HTTP API接口 API可自行封装提供 POST 接口批量任务支持按输入文件批量调用适合场景方案设计、需求评审、算法讲解、文档编写需要说明的是这个方案不是一个固定版本的软件包而是一套可复用的技能定义和工作流。你可以在自己常用的 Agent 平台、大模型客户端或者代码服务里落地参数和提示词可以根据实际模型平台微调。2. 适用场景与使用边界先说适合的场景。日常工作中大量业务流程图其实是重复劳动用户登录流程、订单处理流程、用户管理模块流程、审批流程结构都差不多区别只在分支和状态。这类流程图用自然语言描述给 AI生成 Mermaid 源码再渲染成图效率比手拖控件高很多。算法讲解场景也很适合。比如画反向传播算法、Python for 循环结构、数据处理 PipelineAI 能根据文字描述把结构拆分清楚生成可读性不错的流程图省去手动排版的精力。但也要说清楚边界。这个方案不适合超大、超复杂的流程图。节点超过几十个时AI 生成的代码往往结构混乱人工调整的成本反而比从头画更高。专业的 UML 建模、带严格规范和版式要求的架构图仍然建议使用专业绘图工具。另外如果流程图需要非常精确的像素级排版比如某个节点必须放在画布的固定位置Mermaid 本身就不擅长AI 生成的代码更不会自动满足这种约束。还有一个边界是版权和数据安全。输入给 AI 的业务描述可能包含公司内部流程、客户信息甚至商业机密使用第三方大模型服务前要确认数据协议敏感内容尽量在本地或私有化环境处理。输出结果也可能涉及公司已有的流程设计文档、专利材料或受版权保护的示意图正式发布或商用前要做复核确保不侵权。3. 手搓 Skill 前需要搞清楚的三件事3.1 Skill 的本质是什么在 Agent 平台里Skill 到底定义了什么本质上是给大模型一套明确输入输出契约。平时我们直接聊天说帮我画个流程图模型可能会输出文字、ASCII 图、或者不知道该怎么处理。但 Skill 会把这件事固化下来什么时候启用、接收什么参数、按什么格式输出、输出后怎么渲染。这样每次调用结果都相对稳定。3.2 为什么输出 Mermaid 而不是直接出图很多人会问为什么不直接让 AI 生成一张图片因为直接出图有两个问题一是生成式绘图模型的流程图文字容易扭曲结构也不可控二是图片不方便后续修改。Mermaid 是文本描述型图表语法一套流程图就是一段代码改代码就是改图天然适合版本管理也适合批量生成后人工抽查。主流的 Markdown 编辑器、代码仓库、文档平台很多都支持 Mermaid 渲染。3.3 渲染链路怎么选Mermaid 代码拿到手之后需要通过渲染工具变成图片或可视化图表。可选方案有本地 CLI、在线渲染页面、文档编辑器内置渲染以及前端组件渲染。渲染这一层和 Skill 本身是解耦的所以后面封装 API 时只需要保证输出端是标准 Mermaid 源码客户端想怎么渲染都行。4. 定义 Skill输入 Schema 与输出约束手搓 Skill 的第一步是定义模型能读懂的输入参数。输入参数不能只给一句笼统的目标最好拆成结构化字段。下面是一个通用的输入 Schema 示例实际使用时字段可以按需增删{ goal: 请画出用户登录的流程图, start_point: 用户进入登录页, end_point: 登录成功 / 登录失败, direction: TD, max_nodes: 12, style: default }字段含义字段说明goal用户对流程图的核心需求描述start_point流程起点缺省时可让模型自动推断end_point流程终点缺省时可让模型自动推断direction图的布局方向TD 表示从上到下LR 表示从左到右max_nodes最大节点数防止生成过于膨胀的图style风格选项default 或 simple接下来是系统提示词。提示词的作用是约束模型只输出 Mermaid 代码不要输出一堆解释文字。下面是一个可以直接套用的模板你是一名流程图架构师。请根据用户需求输出 Mermaid 流程图源码。 要求 1. 使用 graph TD 或 graph LR具体布局方向由用户输入决定。 2. 开始节点使用圆括号语法例如 A([开始])。 3. 判断节点使用菱形语法例如 B{是否满足条件}。 4. 结束节点使用圆括号语法例如 C([结束])。 5. 每条边必须写清楚条件例如 B -- 是 -- C。 6. 节点数量不超过 max_nodes 字段给定的值。 7. 只输出 Mermaid 代码块不要输出解释文字。 8. 如果用户需求不够清晰先用一句话提问补齐关键信息。 用户需求 {goal}这里有两点值得注意。第一让模型只输出代码块非常重要。如果不加这个约束模型可能会在代码前后写以下是流程图代码之类的说明文字一旦封装成 API你还得写解析逻辑去剥离这些废话。直接在提示词阶段解决更省事。第二判断节点、开始节点、结束节点用不同语法能让渲染出来的图结构更清晰。如果你默认用graph TD那 AI 还会自动判断合适的布局方向但最好还是让用户通过 direction 参数显式控制。定义完输入和提示词后需要把这个 Skill 配到你的 Agent 平台上。具体操作取决于平台但核心只有三件事第一设置 Skill 的触发条件比如当用户提到流程图流程梳理绘制流程时启用第二把上面这段系统提示词绑定到 Skill第三定义 Skill 的输入字段让交互界面能自动收集 goal、direction、max_nodes 等参数。5. 渲染与预览Mermaid 代码怎么变成图Skill 输出的是 Mermaid 源码想要看到实际的流程图有几种常见方式。5.1 本地 CLI 渲染如果安装了 Node.js可以直接用 Mermaid CLI 把.mmd文件转成 SVG 或 PNG# 安装 mermaid-cli需要 Node.js 环境 npm install -g mermaid-js/mermaid-cli # 把 input.mmd 转成 output.svg mmdc -i input.mmd -o output.svg # 转成 png 并指定背景色 mmdc -i input.mmd -o output.png -b white这个方案的优点是可以批量处理和脚本化适合在本地批量渲染一整个目录的流程图。安装失败时优先检查 Node.js 版本有些旧版本 npm 对 CLI 的依赖解析不完整。5.2 在线预览临时验证时可以直接打开 mermaid.live 这个在线编辑器把 AI 生成的代码粘贴进去右侧会实时渲染。对零散的单张流程图来说这比启动本地服务更快。5.3 文档编辑器嵌入Typora、Notion 以及很多 Markdown 编辑器支持直接渲染 Mermaid 代码块。CSDN 的后台编辑器也支持部分图表的 Mermaid 渲染但格式版本可能不是最新的如果解析失败可以转成图片再发布。一些企业内部文档平台默认不解析 Mermaid比如飞书系列产品可能需要额外插件、转换服务或者把 Mermaid 在本地渲染成图片后上传。具体要看内部插件市场是否提供了对应的能力。稳妥的做法是先做小范围测试确认渲染效果再决定是否大规模接入。5.4 前端组件渲染如果你打算把这个 Skill 集成到前端页面里可以用社区维护的 mermaid.js 渲染库。核心思路是在页面中引入脚本然后调用渲染函数处理包含 Mermaid 代码的元素。渲染量大时要注意给每个图表实例分配独立 id避免重复渲染时互相覆盖。6. 功能测试让 AI 画四张典型流程图配好 Skill 后不要急着大规模使用先跑几个典型测试用例确认输出符合预期。下面给出四个不同维度的测试场景。6.1 用户登录流程图输入描述{ goal: 画出用户登录的流程图包含校验账号密码和登录成功/失败分支, start_point: 用户访问登录页, end_point: 登录成功 或 登录失败, direction: TD, max_nodes: 10 }预期结果AI 应该生成一个从上到下的流程开始时进入登录页然后判断账号密码是否为空再判断校验是否通过成功和失败两个分支走到不同终点。验证方法把生成的 Mermaid 代码粘贴到在线渲染器确认节点朝向、分支条件和结束节点都正确。失败时最常见的表现是分支条件丢失或者所有节点连成一条线这时说明提示词里的每条边必须写清楚条件约束没有被遵守可以把它提到更靠前的位置加大权重。6.2 用户管理模块流程图输入描述{ goal: 画出用户管理模块的流程图包含新增用户、编辑用户、删除用户、查询用户列表, direction: LR, max_nodes: 15 }预期结果这是一个带四个子功能的流程AI 应该先识别出用户管理这个入口再分别展开四个操作的走向。用 LR 方向渲染时整体会横向展开适合做模块功能梳理图。验证方法重点检查四个功能是否都有独立分支以及节点之间是否有跳转关系。如果模型把四个子流程压成一个大串联通常是 max_nodes 上限太小或者提示词缺少按子功能拆分成多个分支的约束可以新增一条提示词当存在多个并列功能时使用并联分支结构。6.3 Python for 循环结构流程图输入描述{ goal: 用流程图说明 python for 循环结构的工作原理展示可迭代对象、循环体和结束条件, direction: TD, max_nodes: 8 }预期结果AI 应该画出进入循环、判断是否还有剩余元素、执行循环体、退出循环这几个阶段。这个测试主要考察模型是否理解编程逻辑而不只是把文字翻译成方框。验证方法看循环回边是否用带箭头的条件线表示退出循环的节点是否明确。常见问题是模型画出的循环没有回到条件判断节点的回边导致逻辑上不闭环这是失败项需要在提示词里补充循环结构必须画出回到条件判断的回边。6.4 反向传播算法流程图输入描述{ goal: 用流程图说明反向传播算法的工作原理包含前向传播、损失计算、梯度计算和参数更新, direction: TD, max_nodes: 14 }预期结果反向传播流程比前几个复杂AI 需要先画前向传播链路再回到损失计算然后反向传播梯度最后更新参数。这张图如果生成成功说明 Skill 能处理多阶段算法流程。验证方法检查图中是否有清晰的前向和反向两个阶段梯度计算节点是否出现在损失计算之后、参数更新之前。如果模型输出的流程只有单向链路没有体现反向语义说明它对反向传播的理解不到位这种结果不能直接使用需要人工修正或补充更详细的输入描述。四张测试图都通过后可以认为这个 Skill 的基本输出能力是稳定的。接下来再考虑接口化和批量任务。7. 把 Skill 封装成接口服务与批量任务单独在聊天框里让 AI 画流程图很方便但真正要落地到工程里最好把这个能力封装成 HTTP 接口。这里用一个通用 FastAPI 服务做示例实际项目需要根据你选的大模型 SDK 和平台鉴权方式替换内部实现。7.1 接口服务示例from fastapi import FastAPI from pydantic import BaseModel app FastAPI() class FlowInput(BaseModel): goal: str start_point: str end_point: str direction: str TD max_nodes: int 12 app.post(/generate_flow) def generate_flow(item: FlowInput): # 这里替换成调用大模型 Skill 的代码 # 1. 构造系统提示词拼入 item.goal / item.direction / item.max_nodes # 2. 调用大模型接口获取 Mermaid 代码 # 3. 返回给客户端 return { status: ok, mermaid_code: graph TD\nA([开始]) -- B{条件}\nB -- 是 -- C([结束]) }启动服务后用 curl 测试curl -X POST http://127.0.0.1:8000/generate_flow \ -H Content-Type: application/json \ -d {goal:画出用户登录流程,direction:TD,max_nodes:12}返回结果里带上 mermaid_code 字段客户端拿到后可以直接渲染也可以保存为.mmd文件。7.2 批量生成任务批量任务的核心思路很简单准备一批输入描述文件逐个调用接口把返回的 Mermaid 代码写入输出目录。下面这段代码演示了单机版批量处理import requests import json from pathlib import Path input_dir Path(./inputs) output_dir Path(./outputs) output_dir.mkdir(exist_okTrue) for desc_file in input_dir.glob(*.json): data json.loads(desc_file.read_text(encodingutf-8)) try: resp requests.post( http://127.0.0.1:8000/generate_flow, jsondata, timeout120 ) if resp.status_code 200: result resp.json() mermaid_code result[mermaid_code] output_path output_dir / f{desc_file.stem}.mmd output_path.write_text(mermaid_code, encodingutf-8) print(f[OK] {desc_file.name} - {output_path}) else: print(f[FAIL] {desc_file.name}, status{resp.status_code}) except Exception as exc: print(f[ERROR] {desc_file.name}, {exc})批量任务的输入文件示例{ goal: 画出订单从创建到发货的流程图, direction: TD, max_nodes: 12 }批量执行时需要注意三点第一给每个请求设置超时避免个别复杂流程把线程卡死第二把成功的输出和失败的输入分开记录失败文件可以重试第三如果并发量大要控制请求频率避免触发大模型服务的限流。7.3 失败重试策略批量处理时遇到偶发超时很常见。最简单的策略是记录失败任务整体跑完后统一重试两到三次。重试仍然失败的再人工处理。这样做比一次失败就中断整个队列稳定得多。8. 常见问题与排查方法问题现象可能原因排查方式解决方案AI 输出大量解释文字而不是纯代码系统提示词约束不够强查看原始返回内容在提示词中强调只输出 Mermaid 代码块并给出错误示例生成的 Mermaid 代码渲染报错语法不兼容或节点命名冲突把代码复制到 mermaid.live 看错误信息在提示词中规定节点命名使用大写字母或下划线避免中文直接作为节点 id流程图方向不符合预期direction 参数没有传入模型检查接口日志中的请求参数确认系统提示词拼接时读取了 direction 字段中文字体显示为方块渲染工具缺少中文字体查看渲染端字体配置使用 Mermaid CLI 时指定系统已安装的中文字体或在 HTML 中引入字体节点太多图非常乱max_nodes 设置过大或提示词缺少控制统计实际生成节点数调低 max_nodes或在提示词中要求合并相似节点分支条件丢失模型没有生成带条件的边检查 Mermaid 代码中边的写法在提示词中补充每条边必须写清条件格式 B -- 条件 -- C批量任务某个文件一直失败输入描述包含歧义或特殊字符查看失败文件内容和异常信息单独用该文件测试必要时补充更明确的目标描述接口服务返回超时大模型响应慢或网络不稳定查看服务端日志和依赖接口耗时调大客户端超时时间或使用异步任务队列替代同步请求飞书等平台不渲染 Mermaid该平台默认不支持 Mermaid 语法查阅平台插件市场或官方说明安装支持 Mermaid 的插件或在本地渲染成图片后上传这里单独说飞书的情况。从很多使用者反馈来看飞书文档对 Mermaid 的原生支持并不统一能否解析取决于版本、插件开启状态和管理员配置。遇到贴了代码但没渲染出图的情况优先确认是不是插件或权限问题不要急着怀疑 Skill 生成的代码有问题。可以把同样的代码放到 mermaid.live 里验证如果那里能渲染说明 Skill 输出正常问题出在平台侧。9. 最佳实践与使用建议9.1 先固定输出 Schema 再调模型能力很多人会在提示词里反复让模型画好看一点画清楚一些这种模糊指令对调整效果帮助有限。更工程化的做法是先把输出 Schema 固定下来节点命名规则、边条件写法、开始结束节点样式、最大节点数全部写死在提示词里。这样每次调用都是同一种结构后续做批量任务和数据校验才方便。9.2 输入描述越结构化出图越稳直接写帮我画个登录流程也能出图但效果波动大。建议在输入里把起点、终点、关键分支说清楚。一次输入一个完整需求比多次对话调优更稳定。9.3 输出目录和命名规范跑批量任务时最好按日期 业务模块 序号的方式组织输出文件名。例如outputs/20250110_login_001.mmd outputs/20250110_order_002.mmd这样后面渲染、回滚、找历史版本都方便。Mermaid 代码本身是文本非常适合放进 Git 仓库做版本管理。9.4 建立人工复核环节AI 生成的流程图不是百分百准确。业务规则错误、分支条件遗漏、边界情况缺失都有可能。建议把AI 生成 人工复核作为标准流程。尤其在涉及正式方案、合规文档、对外交付材料时必须有人确认流程逻辑和真实业务一致后再发布。9.5 敏感信息与授权边界前面提到的合规问题要落到操作层面。涉及人脸、声音、版权素材的场景需要明确授权涉及公司内部流程、客户资料、商业机密的文本优先在私有化环境或数据协议允许的服务中处理。对话记录和生成结果如果包含敏感信息也需要按公司的数据管理规范保存和销毁。9.6 保持一套最小可运行配置调试过程中建议保留一份最小可运行配置一个最简单的测试输入、一段最精简的提示词、一条 curl 命令。后续升级 Skill 或更换模型平台时先用这套最小配置回归确认输出依然稳定再继续扩展。这样做能极大减少排查问题的范围。10. 总结与下一步这个方案最值得尝试的点是它把画流程图从手动拖拽变成了一次结构化输出。你不需要再为每一张图打开绘图软件也不需要记忆复杂的绘图操作。只要把 Skill 配好让模型按固定 Schema 输出 Mermaid 代码后面不管是单张生成、接口串接还是批量出图都变成流水线工作。建议你第一步先做最小验证复制本文的输入 Schema 和系统提示词在你自己常用的 Agent 平台上配一个 Skill输入用户登录流程跑一张图确认渲染结果符合预期。这一步通过后再考虑封装 API、接入批量任务或者把 Mermaid 渲染嵌到自己的 Web 工具里。最容易踩的坑有三个一是不约束输出格式AI 返回大量解释文字导致解析困难二是不限制节点数量一张图生成几十个节点乱成蜘蛛网三是忽略平台侧 Mermaid 渲染兼容性代码正确但编辑器不认。把这三点提前控制住这个 Skill 用起来会顺很多。后续可以扩展的方向也很多把 Skill 的输入扩展成支持从需求文档自动抽取流程描述或者把 Mermaid 渲染结果直接导出为图片也可以在批量任务里加一个简单的前端页面让业务人员填表就能生成流程图。总之让 AI 先画出你心目中的流程图剩下的人工调整集中在真正需要业务判断的地方。