Tabula相册整理工具2026
27.5MB · 2026-04-07
大家好，我是小肥肠。之前我写过一个 Coze 插件，专门用来把自然语言转换成 Mermaid 业务 图。没想到这个插件后面热度还挺高，用的人不少，也让我更确定了一件事：大家对“一句话生成流程图、时序图、甘特图这类业务图”这件事，确实有真实需求。
不过做着做着我也慢慢发现，真正值得往前再做一步的，不是继续在原来的插件上补功能，而是把这项能力单独沉淀出来。所以这次我把它整理成了一个 OpenClaw skill：xfc-mermaid。
我把 xfc-mermaid 接进了绘图 Agent，实际跑了一遍，效果如下，如对多Agent感兴趣可以移步：OpenClaw多Agent实战|手把手教你用一只小龙虾接入多个飞书Bot
我先给 Agent 下了一条很直接的指令：
帮我画一个公司年度预算分配饼图，需要展示以下数据比例，并且并在图上显示具体的百分比：
研发投入 (R&D)：45%
市场营销 (Marketing)：25%
运营成本 (Operations)：15%
人力资源 (HR)：10%
其他储备 (Reserve)：5% 。
等几秒，结果就出来了：既有可编辑链接，也有预览和下载结果。
可以直接进入编辑链接编辑数据：
也可以直接下载图片到本地：
我之前那篇文章：让Mermaid听懂人话：用Coze空间+MCP一句话搞定所有业务图，主要是把“自然语言生成业务图”这件事先跑通。说白了，就是让 Mermaid 先能听懂人话。
当时我更多是在验证这条路能不能走通。结果还不错，用的人不少，也让我更确定：大家对这种更省事的出图方式，确实有需求。
这段时间做 OpenClaw、做 Agent、做自动化流程越来越多之后，我慢慢发现，真正值得沉淀的，不是某个平台里的某个插件节点，而是“让 Mermaid 听懂人话”这项能力本身。所以这次我干脆把它整理成了一个可以被 Agent 直接调用的 OpenClaw skill。
这次做 xfc-mermaid，我其实就想解决一件事：怎么把“让 Mermaid 听懂人话”这件事，整理成一个能稳定复用的能力，而不是一次性的插件效果。
所以在结构上，我没有把逻辑都塞进一个大脚本里，而是继续按更适合 Agent 调用的方式去拆。整体上还是三层：前面接收自然语言，中间处理核心能力，最后输出结果。
这样拆的好处很直接：前面负责把人话变成 Mermaid，中间负责把关键动作拆开，后面再按不同场景返回链接、图片或者文件，整个链路会清楚很多。
在实现上，xfc-mermaid 没有做得很重，而是按 OpenClaw 更好调用的方式拆成了 3 个脚本，分别负责校验、生成编辑链接和导出 SVG。看起来不复杂，但真正顺手的地方就在这里：它不是一次性工具，而是一组可以被 Agent 反复调用的标准动作。
话不多说，正式开始Skill搭建，目录结构设计如下：
xfc-mermaid/
├── SKILL.md # 必填：使用说明 + 元数据
├── scripts/ # 必填：可执行代码
└── package.json # 必填：代码版本配置
选择本地任意目录新建skill项目。
SKILL.md 可以理解为整个Skill的大脑和说明书。具体怎么写也不复杂，本质上就是先把这个 Skill 的用途、触发条件、工具调用方式和输入输出规则提前写清楚。
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 最想解决的点：不是只把图画出来，而是把这件事沉淀成一个能反复复用的标准能力。说白了，真正值钱的不是某一张图，而是这套能力以后还能被继续调用很多次。
skill 编写完成后，集成到 OpenClaw 的方式也很简单，只需要找到任意 FTP 工具上传到 OpenClaw 所在服务器即可。
上传成功后二次确认是否存在：
看过我文章的读者都知道，我之前在单Openclaw的基础上细化出了6个Agent，其中有个绘图Agent就是专门绘图的，我将这个Skill集成到了绘图Agent中，修改了其SOUL.md，SOUL.md编写思路：
判断用户输入意图
如果用户想生成美食手账图则调用xiaohongshu-card-maker
如果用户想让我解读图片则调用xfc-img-understand
如果用户想生成业务图则先生成对应mermaid语法再调用xfc-mermaid
集成后，开始绘制流程图测试，输入指令：
请帮我画一个用户登录流程图，包含以下步骤
1. 用户输入账号密码
2. 前端校验格式
3. 发送请求到后端
4. 后端验证用户信息
5. 如果验证成功，生成 token 返回
6. 如果失败，返回错误信息
7. 前端根据结果跳转页面或显示错误
点击编辑链接即可在线编辑流程图：
也可以点击下载链接直接下载svg图片：
不得不说Openclaw+多Agent方案真好用，我的写作Agent已经基本成型了，这篇文章就是它辅助我写的，绘画Agent还在搭建中，未来会变成我的专属绘画工厂。
以上就是 OpenClaw + Skill 生成 Mermaid 业务图的全部内容，动手能力强的读者可以跟着教程实践一遍。上述skill已经被收录到了小肥陪跑群中，需要原件可以加入社群直接使用哦。
所以这次我做 xfc-mermaid，并不是为了否定之前那个热度很高的 Coze 插件。恰恰相反，正因为它已经被很多人用过、验证过，我才觉得这项能力值得继续往前做一步。以前我做的是“怎么让 Mermaid 听懂人话”，现在我更想做的是“怎么把这项能力沉淀成一个真正能长期复用的 skill”。
如本次分享对你有帮助，欢迎一键三连支持一下小肥肠，我们下期再见~
