一句话出流程图！我把 OpenClaw + Skill 做成了自动生成业务图的能力

之前我写过一个 Coze 插件专门用来把自然语言转换成 Mermaid业务图。没想到这个插件后面热度还挺高用的人不少也让我更确定了一件事大家对“一句话生成流程图、时序图、甘特图这类业务图”这件事确实有真实需求。不过做着做着我也慢慢发现真正值得往前再做一步的不是继续在原来的插件上补功能而是把这项能力单独沉淀出来。所以这次我把它整理成了一个 OpenClaw skillxfc-mermaid。我把 xfc-mermaid 接进了绘图 Agent实际跑了一遍效果如下我先给 Agent 下了一条很直接的指令帮我画一个公司年度预算分配饼图需要展示以下数据比例并且并在图上显示具体的百分比研发投入 (RD)45%市场营销 (Marketing)25%运营成本 (Operations)15%人力资源 (HR)10%其他储备 (Reserve)5% 。等几秒结果就出来了既有可编辑链接也有预览和下载结果。可以直接进入编辑链接编辑数据也可以直接下载图片到本地1. 前言这段时间做 OpenClaw、做 Agent、做自动化流程越来越多之后我慢慢发现真正值得沉淀的不是某个平台里的某个插件节点而是“让 Mermaid 听懂人话”这项能力本身。所以这次我干脆把它整理成了一个可以被 Agent 直接调用的 OpenClaw skill。2. xfc-mermaid 设计与实现★ 2.1. xfc-mermaid 架构设计这次做 xfc-mermaid我其实就想解决一件事怎么把“让 Mermaid 听懂人话”这件事整理成一个能稳定复用的能力而不是一次性的插件效果。所以在结构上我没有把逻辑都塞进一个大脚本里而是继续按更适合 Agent 调用的方式去拆。整体上还是三层前面接收自然语言中间处理核心能力最后输出结果。这样拆的好处很直接前面负责把人话变成 Mermaid中间负责把关键动作拆开后面再按不同场景返回链接、图片或者文件整个链路会清楚很多。★ 2.2. xfc-mermaid 实现在实现上xfc-mermaid没有做得很重而是按 OpenClaw 更好调用的方式拆成了 3 个脚本分别负责校验、生成编辑链接和导出 SVG。看起来不复杂但真正顺手的地方就在这里它不是一次性工具而是一组可以被 Agent 反复调用的标准动作。话不多说正式开始Skill搭建目录结构设计如下xfc-mermaid/├── SKILL.md # 必填使用说明 元数据├── scripts/ # 必填可执行代码└── package.json # 必填代码版本配置选择本地任意目录新建skill项目。2.2.1 SKILL.md设计编写SKILL.md可以理解为整个Skill的大脑和说明书。具体怎么写也不复杂本质上就是先把这个 Skill 的用途、触发条件、工具调用方式和输入输出规则提前写清楚。2.2.2 代码部分编写**1.**validate.mjs负责语法校验先看语法校验这部分核心思路就是先把 Mermaid 代码过一遍避免模型生成的内容看起来像对的实际却跑不起来。最关键的逻辑其实就这几行await validateMermaid(code, config);printJson({ ok: true, valid: true, config});**2.**generate-link.mjs负责生成 Mermaid Live 可编辑链接生成编辑链接这部分本质上是先把代码和配置整理成 state再序列化成 token最后拼成 Mermaid Live 可继续编辑的链接。核心代码如下const state buildState({ code, config });const token serializeState(state, pako);const links buildLinks({ token, baseUrl: https://mermaid.live, mode: both });printJson({ ok: true, token, state, ...links });**3.**export-svg.mjs 负责导出 SVG至于导出 SVG核心就是把 Mermaid 渲染结果输出出来必要时再写到本地文件里。真正关键的逻辑也就是下面这几行const result await renderMermaidSvg(code, config);if (outputPath) { await writeOutputFile(outputPath, result.svg);}printJson({ ok: true, svg: result.svg, outputPath });这也是我这次做 xfc-mermaid 最想解决的点不是只把图画出来而是把这件事沉淀成一个能反复复用的标准能力。说白了真正值钱的不是某一张图而是这套能力以后还能被继续调用很多次。3. xfc-mermaid 集成到 OpenClaw 实现绘图工坊★ 3.1. skill上传到服务器skill 编写完成后集成到 OpenClaw 的方式也很简单只需要找到任意 FTP 工具上传到 OpenClaw 所在服务器即可。上传成功后二次确认是否存在★ 3.2. 整合到绘画Agent看过我文章的读者都知道我之前在单Openclaw的基础上细化出了6个Agent其中有个绘图Agent就是专门绘图的我将这个Skill集成到了绘图Agent中修改了其SOUL.mdSOUL.md编写思路判断用户输入意图如果用户想生成美食手账图则调用xiaohongshu-card-maker如果用户想让我解读图片则调用xfc-img-understand如果用户想生成业务图则先生成对应mermaid语法再调用xfc-mermaid集成后开始绘制流程图测试输入指令请帮我画一个用户登录流程图包含以下步骤 1. 用户输入账号密码 2. 前端校验格式 3. 发送请求到后端 4. 后端验证用户信息 5. 如果验证成功生成 token 返回 6. 如果失败返回错误信息 7. 前端根据结果跳转页面或显示错误点击编辑链接即可在线编辑流程图也可以点击下载链接直接下载svg图片不得不说Openclaw多Agent方案真好用我的写作Agent已经基本成型了这篇文章就是它辅助我写的绘画Agent还在搭建中未来会变成我的专属绘画工厂。学AI大模型的正确顺序千万不要搞错了2026年AI风口已来各行各业的AI渗透肉眼可见超多公司要么转型做AI相关产品要么高薪挖AI技术人才机遇直接摆在眼前有往AI方向发展或者本身有后端编程基础的朋友直接冲AI大模型应用开发转岗超合适就算暂时不打算转岗了解大模型、RAG、Prompt、Agent这些热门概念能上手做简单项目也绝对是求职加分王给大家整理了超全最新的AI大模型应用开发学习清单和资料手把手帮你快速入门学习路线:✅大模型基础认知—大模型核心原理、发展历程、主流模型GPT、文心一言等特点解析✅核心技术模块—RAG检索增强生成、Prompt工程实战、Agent智能体开发逻辑✅开发基础能力—Python进阶、API接口调用、大模型开发框架LangChain等实操✅应用场景开发—智能问答系统、企业知识库、AIGC内容生成工具、行业定制化大模型应用✅项目落地流程—需求拆解、技术选型、模型调优、测试上线、运维迭代✅面试求职冲刺—岗位JD解析、简历AI项目包装、高频面试题汇总、模拟面经以上6大模块看似清晰好上手实则每个部分都有扎实的核心内容需要吃透我把大模型的学习全流程已经整理好了抓住AI时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】