让Mermaid听懂人话:用Coze空间+MCP一句话搞定所有业务图

大家好,我是小肥肠,专注AI干货知识分享,今天将给大家分享:Coze空间+MCP一句话生成各类业务图,本期教程干货满满,一次看不完可以点击收藏做个记号下次看。如果你正在学习AI智能体,欢迎关注小肥肠领取免费学习资料哦~

1. 解锁高效图表生产力

在在日常工作或学习中绘制流程图、时序图、甘特图等业务图是绕不开的环节。传统的拖拽式绘图工具往往耗费大量时间精力,我们急需一种更智能、更懒人化 的绘图方式------仅用一句自然语言描述就立即生成标准的业务图表。

本文将深入介绍一个强大的技术组合:Coze空间+ Mermaid+ MCP。只需输入类似**帮我画个流程图,先登录,然后验证权限,通过后显示主页......**这样的自然描述,系统就能自动分析意图、生成对应的Mermaid语法,并最终呈现图表链接,我们可以直接下载使用。

无论您是追求效率的开发者、 产品经理 ,还是对自动化工具感兴趣的探索者,本文将手把手带您从零搭建这个流程,涵盖从Mermaid语法核心、Coze 工作流 手把手搭建,到将工作流发布至Coze空间扩展库的全过程。

2. Mermaid简介

Mermaid 是一个开源免费,可使用类似 Markdown 的简洁文本语法来动态生成和渲染各类图表(如流程图、时序图、甘特图等)的 JavaScript 库,官方简介如下:

仓库地址: github.com/mermaid-js/...

在仓库页面我们可以看到各种类型的图的相关语法说明,拿流程图来说,基于Mermaid绘制流程图只需要传入以下类似语法就行:

css 复制代码
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

绘制出来的图如下:

甘特图、时序图我就不贴出来了,大家自己去官方仓库看就行,都写的很详细,要采用Mermaid绘图,常规的流程是将我们的自然语言转换为符合Mermaid语法的绘图语句,再去支持Mermaid绘图的在线网站渲染猴拿到图。

我嫌太麻烦了,于是就用Coze空间集成Mermaid做了个一句话生成专业图表的小工具,感兴趣就往下看

3. Coze工作流搭建

在搭建Coze工作流之前,需要先梳理一下工作流的整体运行逻辑,总的来说可以分为以下几个步骤:

  1. 输入业务图绘图描述词,以流程图举例,这里需要描述清楚每个步骤做什么

  2. 分析用户意图,根据不同的意图选择不同的绘图分支,如用户想画流程图就选择流程图绘制分支

  3. 生成符合Mermaid语法的绘图句子

  4. 调用Mermaid绘图

  5. 返回图片链接

ps:上图为Coze 工作流 生成(没错就是本文的工作流,下文简称Mermaid工作流)

Mermaid工作流全貌如下:

开始节点: 开始节点输入参数为绘图描述。比如想画流程图就可以将我上面梳理的工作流运行步骤直接传给工作流。

在上图中我输入的参数为:

markdown 复制代码
帮我画一个流程图,流程如下
1. 输入业务图描述词
2. 分析用户意图,根据不同的意图选择不同的绘图分支,如用户想画流程图就选择流程图绘制分支,如果想画时序图就选择时序图分钟,否则选择其他分支
3. 生成符合Mermaid语法的绘图句子
4. 调用Mermaid绘图
5. 返回图片链接

意图识别: 这个节点的作用是分析开始节点的绘图描述中的用户想要画什么类型的图,根据用户不同意图将后续工作流程路由到不同的分支。举个例子,如果用户想要画饼图,就会把后续工作流程路由到绘制饼图的流程。

生成符合Mermaid语法的绘图句子( 大模型 ): 根据意图识别的结果结合开始节点的绘图描述生成生成符合Mermaid语法的绘图句子,这个节点是大模型节点,模型我选的是通义千问。

提示词也很简单,以饼图为例,提示词如下,大家可以参考一下我的:

perl 复制代码
# 角色
你是一个专业的格式转换专家,擅长将用户输入的内容精准转换为mermaid语法。

## 技能
### 技能 1: 格式转换
1. 当用户输入需要转换的内容时,迅速将其转换为符合mermaid饼图语法的格式,如示例:
pie
    "Dogs" : 386
    "Cats" : 85.9
    "Rats" : 15

## 限制:
- 只进行与将用户输入内容转换为mermaid语法相关的操作,拒绝回答无关话题。
- 所输出的内容必须符合mermaid语法格式要求,不能偏离框架要求。
-直接生成转换后的mermaid语法句子,不要做任何解释。
-不要有```和```mermaid注解,直接生成mermaid语法句子字符串

其他类型的图只要把语法结构替换一下就行。

变量聚合:这个节点衔接生成符合Mermaid语法的绘图句子( 大模型 )节点, 作用是对前面多个分支的输出进行聚合处理,返回第一个非空值。如果用户想要画流程图,这个节点接收到的参数就是符合Mermaid流程图语法的句子。

xfc_mermaid(插件): 这个插件是我自己编写的,只需要输入符合Mermaid语法的绘图语句就可以生成图片链接,对插件编写感兴趣的朋友可以点个关注,我后面的文章会写相关教程

结束节点: 结束节点接收参数为xfc_mermaid插件的输出参数,即图片链接。

工作流 搭建完成后不要忘记发布,只有发布了我们才能集成到应用中,进而发布到扣子空间扩展库。

4. 发布到扣子空间扩展库:自定义MCP集成

以往文章教程都是将工作流集成到智能体,今天给大家介绍一个另外的玩法,把工作流发布到Coze空间扩展库,第一步需要创建应用。

应用创建成功后,在【业务逻辑】界面引入刚刚发布的工作流。

点击【发布】按钮,在弹出的卡片中选择【去发布】。

下滑页面找到【MCP服务】-【扣子空间扩展库】,点击【配置】,在弹出的【扩展配置】弹窗中勾选我们的工作流,点击【确认】按钮。

回到页面顶部填写版本描述,点击【发布】即可。

发布成功后来到Coze空间space.coze.cn/ ,点击【扩展】。

在【添加扩展】弹窗中选择【自定义】,选择刚刚发布的应用点击【添加】按钮。

添加成功后【扩展】会有标识,如果你的没有,看一下是不是步骤漏了,有没有一比一按照我的教程来。

最后只需要在对话框中输入绘图描述即可:

生成出的图片结果:

以上就是本期的完整教程,根据我的教程一步步来,你也能实现一句话绘制流程图,时序图,甘特图等业务图,如果不想自己搭建也可以找我,我把你拉入Coze空间直接使用。

5. 资料领取

觉得大模型不好用,可能是你不会写提示词,小肥肠为你准备了海量提示词模板、DeepSeek相关教程以及Coze基础教程,只需关注gzh后端小肥肠,点击底部【资源】菜单即可领取。

如果你也对 AI 领域体感兴趣,想学习Coze、Dify 智能体 相关内容,欢迎找我哦~

6. 写在结尾

通过 Coze + Mermaid + MCP 的强强联合,我们成功拆解了自然语言→专业图表的核心链路------告别传统绘图工具的低效束缚,用一行对话解锁可视化生产力。无论多复杂的流程设计、时序逻辑或项目排期,只需一句清晰描述,Mermaid工作流即可自动完成意图解析、语法转换与图表渲染,将你的思维直接落地成清晰标准的图形。

本方案的核心价值在于:

✅ 零代码体验:用户无需学习 Mermaid 语法,专注业务表达

✅ 全流程自动化:意图识别→语法生成→绘图→返回链接一气呵成

✅ 生态无缝集成:通过MCP发布至Coze空间扩展库,即装即用

✅ 能力自由扩展:支持流程图/时序图/甘特图等十余种场景,持续扩展中

动手按照教程一步步实践,你将拥有自己的智能图表助手;若想快速体验,也欢迎联系我加入共享Coze空间立即体验成果。

相关推荐
背太阳的牧羊人10 分钟前
BitsAndBytes(简称 BnB)是一个用于“压缩”大语言模型的工具包
人工智能·语言模型·自然语言处理
思绪漂移15 分钟前
大型语言模型(LLM)的构建模块
人工智能·语言模型·自然语言处理
LXJSWD18 分钟前
tensorflow GPU训练loss与val loss值差距过大问题
人工智能·python·tensorflow
阿星AI工作室20 分钟前
n8n教程:5分钟部署+自动生AI日报并写入飞书多维表格
前端·人工智能·后端
MidJourney中文版43 分钟前
小智AI玩具市场爆发:四大品牌领跑情感交互新赛道
人工智能·交互
腾讯云开发者1 小时前
从大模型到具身智能进化,AI 应用的产业落地路在何方?
人工智能
李子圆圆1 小时前
地下安全防线:电缆通道防外破地钉如何守护城市隐形生命线
大数据·人工智能
火山引擎边缘云1 小时前
更强模型效果!豆包大模型 1.6 系列上线边缘大模型网关,最高申领1000万免费 Tokens
人工智能·aigc
我在北京coding1 小时前
基于OpenCv(开源计算机视觉库)的图像旋转匹配
人工智能·opencv·计算机视觉
西猫雷婶1 小时前
python学智能算法(十四)|机器学习朴素贝叶斯方法进阶-CountVectorizer文本处理简单测试
人工智能·python·机器学习