OpenClaw+Skill自动化业务流程图生成实战指南

2026-05-28阅读 0热度 0

OpenClaw

我们之前开发过一个Coze插件，能将自然语言直接转换为Mermaid业务图。这个插件的实际使用热度超出了预期，这清晰地印证了一个市场趋势：用户对于“用一句话生成流程图、时序图或甘特图”的需求，不仅是真实的，而且是高频且强烈的。

然而，随着项目实践的深入，一个更本质的思路变得明确：真正具备长期价值、值得沉淀和迭代的，并非绑定在某个特定平台上的插件功能，而是“让Mermaid理解并执行自然语言指令”这项核心能力本身。因此，我们决定将其系统性地重构，封装成一个独立的、可被广泛调用的OpenClaw技能：xfc-mermaid。

将这个技能接入我们的绘图Agent后，实际效果如何？来看一个直观的案例。向Agent发出指令：“生成一份公司年度预算分配饼图，需展示以下数据比例，并在图中标注具体百分比：研发投入 (R&D)：45%；市场营销 (Marketing)：25%；运营成本 (Operations)：15%；人力资源 (HR)：10%；其他储备 (Reserve)：5%。”

稍等片刻，结果便已生成：它不仅提供了可在线实时编辑的图表链接，还支持即时预览和直接下载高清图片。

你可以通过编辑链接，随时调整图表的数据与样式：

也可以一键下载高清图片到本地：

1. 前言

我们早期的探索，主要解决了“从自然语言到业务图”从无到有的问题，核心是让Mermaid语法能够准确解析人类的自然语言指令。那次尝试，更像是一次技术可行性的概念验证。

结果令人满意，来自用户的真实反馈表明，市场对这种更直观、更高效的图表生成方式，存在着明确且持续的需求。

随着我们在OpenClaw平台、智能体（Agent）架构以及自动化流程构建上投入更多精力，一个更深层的认知逐渐成型：最具价值的并非某个封闭环境中的特定插件节点，而是“让Mermaid听懂人话”这项可被标准化、模块化调用的底层能力。因此，本次工作的核心目标，就是将其封装成一个可供各类Agent直接、稳定调用的OpenClaw技能。

2. xfc-mermaid 设计与实现

2.1. 架构设计思路

在设计xfc-mermaid时，我们的核心目标非常聚焦：如何将一项灵光一现的插件功能，转化为稳定、可复用、标准化的服务能力。

因此，在架构层面，我们摒弃了将所有逻辑堆砌在单一脚本中的做法，转而采用更契合Agent调用模式的三层解耦结构：前端负责接收并解析自然语言指令，中台处理核心的转换与生成逻辑，后端则按需输出不同格式的结果（如链接、图片、文件流）。

这种职责分离带来的优势是显而易见的：各模块边界清晰，易于维护和测试，并且能够灵活适配未来可能出现的各种输出场景，确保了整个能力链路的健壮性与可扩展性。

2.2. 具体实现拆解

在具体实现上，xfc-mermaid遵循了“轻量、专注、原子化”的原则。它并非一个试图囊括一切的大而全的图形工具，而是严格遵循OpenClaw技能的最佳实践，将功能拆分为三个独立的脚本，分别负责语法校验、生成可编辑链接以及导出SVG文件。其关键在于，它提供了一组可以被Agent反复、标准化调用的原子操作。

接下来，我们进入技能搭建的实战环节。一个标准的Skill目录结构设计如下：

xfc-mermaid/
├── SKILL.md          # 必填：技能使用说明与元数据
├── scripts/          # 必填：可执行代码目录
└── package.json      # 必填：项目依赖与配置

首先，在本地任意目录创建该项目。

2.2.1 SKILL.md：技能说明书

SKILL.md文件是整个技能的大脑与使用手册。编写它的核心在于清晰、无歧义地定义该技能的用途、触发条件、工具调用方式以及输入输出的数据规范，为Agent的准确理解和调用提供精确的蓝图。

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），最终拼接成可直接在浏览器中打开并继续编辑的URL。核心代码如下：

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：导出矢量图形
这个模块专注于将Mermaid代码渲染并导出为SVG格式的矢量图，必要时可直接写入本地文件。其核心执行逻辑如下：

const result = await renderMermaidSvg(code, config);
if (outputPath) {
  await writeOutputFile(outputPath, result.svg);
}
printJson({ ok: true, svg: result.svg, outputPath });

这正是xfc-mermaid希望解决的核心问题：它不仅仅生成一张静态的图表，更是将“从需求描述到可交互、可再编辑的图表”这一完整工作流，沉淀为一项可被任意Agent随时、标准化调用的服务能力。其价值不在于单次产出，而在于为整个系统提供的持续、可复用的图形化生产力。

3. xfc-mermaid 集成到 OpenClaw 实现绘图工坊

3.1. 技能部署上线

技能代码编写完成后，集成到OpenClaw环境的过程十分简便。只需通过任何FTP或文件传输工具，将整个技能目录上传至OpenClaw所在的服务器指定位置即可。

上传完成后，建议在服务器上二次确认目录结构与所有文件是否完整无误。

3.2. 与绘图Agent整合

关注我们之前内容的读者可能了解，我们在单OpenClaw的基础上，细化出了多个专注不同领域的垂直Agent。其中，绘图Agent专门负责处理各类图形生成与处理任务。本次，我们将xfc-mermaid技能无缝集成到了该Agent的能力体系中。

关键在于修改其SOUL.md文件，明确任务分发与路由逻辑：

判断用户输入意图：
- 如果用户想生成美食手账图，则调用 `xiaohongshu-card-maker`
- 如果用户想让我解读图片，则调用 `xfc-img-understand`
- 如果用户想生成业务图，则先生成对应mermaid语法，再调用 `xfc-mermaid`

集成完毕后，即可进行功能测试。输入指令：“请帮我绘制一个用户登录流程图，需包含以下步骤：1. 用户输入账号密码；2. 前端校验格式；3. 发送请求到后端；4. 后端验证用户信息；5. 如果验证成功，生成token返回；6. 如果失败，返回错误信息；7. 前端根据结果跳转页面或显示错误。”

很快，Agent便输出了结果。你可以通过提供的编辑链接，在线调整这份流程图的细节：

也可以直接通过下载链接，获取SVG格式的矢量图片文件：

实践再次证明，OpenClaw结合多Agent的架构方案极具实用价值。目前，我们的写作Agent已基本成型，本文正是在其辅助下完成的；而绘图Agent仍在持续完善中，未来有望成为一个高效的“专属图形化生产车间”。