让Mermaid听懂人话:用Coze空间+MCP一句话搞定所有业务图
大家好,我是小肥肠,专注AI干货知识分享,今天将给大家分享:Coze空间+MCP一句话生成各类业务图,本期教程干货满满,一次看不完可以点击收藏做个记号下次看。
1. 解锁高效图表生产力
在在日常工作或学习中绘制流程图、时序图、甘特图等业务图是绕不开的环节。传统的拖拽式绘图工具往往耗费大量时间精力,我们急需一种更智能、更懒人化的绘图方式——仅用一句自然语言描述就立即生成标准的业务图表。
本文将深入介绍一个强大的技术组合:Coze空间+ Mermaid+ MCP。只需输入类似帮我画个流程图,先登录,然后验证权限,通过后显示主页……这样的自然描述,系统就能自动分析意图、生成对应的Mermaid语法,并最终呈现图表链接,我们可以直接下载使用。
无论您是追求效率的开发者、产品经理,还是对自动化工具感兴趣的探索者,本文将手把手带您从零搭建这个流程,涵盖从Mermaid语法核心、Coze工作流手把手搭建,到将工作流发布至Coze空间扩展库的全过程。
2. Mermaid简介
Mermaid 是一个开源免费,可使用类似 Markdown 的简洁文本语法来动态生成和渲染各类图表(如流程图、时序图、甘特图等)的 JavaScript 库,官方简介如下:
仓库地址:https://github.com/mermaid-js/mermaid
在仓库页面我们可以看到各种类型的图的相关语法说明,拿流程图来说,基于Mermaid绘制流程图只需要传入以下类似语法就行:
绘制出来的图如下:
甘特图、时序图我就不贴出来了,大家自己去官方仓库看就行,都写的很详细,要采用Mermaid绘图,常规的流程是将我们的自然语言转换为符合Mermaid语法的绘图语句,再去支持Mermaid绘图的在线网站渲染猴拿到图。
我嫌太麻烦了,于是就用Coze空间集成Mermaid做了个一句话生成专业图表的小工具,感兴趣就往下看。
3. Coze工作流搭建
在搭建Coze工作流之前,需要先梳理一下工作流的整体运行逻辑,总的来说可以分为以下几个步骤:
1. 输入业务图绘图描述词,以流程图举例,这里需要描述清楚每个步骤做什么
2. 分析用户意图,根据不同的意图选择不同的绘图分支,如用户想画流程图就选择流程图绘制分支
3. 生成符合Mermaid语法的绘图句子
4. 调用Mermaid绘图
5. 返回图片链接
ps:上图为Coze工作流生成(没错就是本文的工作流,下文简称Mermaid工作流)
Mermaid工作流全貌如下:
开始节点:开始节点输入参数为绘图描述。比如想画流程图就可以将我上面梳理的工作流运行步骤直接传给工作流。
在上图中我输入的参数为:
意图识别:这个节点的作用是分析开始节点的绘图描述中的用户想要画什么类型的图,根据用户不同意图将后续工作流程路由到不同的分支。举个例子,如果用户想要画饼图,就会把后续工作流程路由到绘制饼图的流程。
生成符合Mermaid语法的绘图句子(大模型):根据意图识别的结果结合开始节点的绘图描述生成生成符合Mermaid语法的绘图句子,这个节点是大模型节点,模型我选的是通义千问。
提示词也很简单,以饼图为例,提示词如下,大家可以参考一下我的:
其他类型的图只要把语法结构替换一下就行。
变量聚合:这个节点衔接生成符合Mermaid语法的绘图句子(大模型)节点,作用是对前面多个分支的输出进行聚合处理,返回第一个非空值。如果用户想要画流程图,这个节点接收到的参数就是符合Mermaid流程图语法的句子。
xfc_mermaid(插件):这个插件是我自己编写的,只需要输入符合Mermaid语法的绘图语句就可以生成图片链接,对插件编写感兴趣的朋友可以点个关注,我后面的文章会写相关教程。
结束节点:结束节点接收参数为xfc_mermaid插件的输出参数,即图片链接。
工作流搭建完成后不要忘记发布,只有发布了我们才能集成到应用中,进而发布到扣子空间扩展库。
4. 发布到扣子空间扩展库:自定义MCP集成
以往文章教程都是将工作流集成到智能体,今天给大家介绍一个另外的玩法,把工作流发布到Coze空间扩展库,第一步需要创建应用。
应用创建成功后,在【业务逻辑】界面引入刚刚发布的工作流。
点击【发布】按钮,在弹出的卡片中选择【去发布】。
下滑页面找到【MCP服务】-【扣子空间扩展库】,点击【配置】,在弹出的【扩展配置】弹窗中勾选我们的工作流,点击【确认】按钮。
回到页面顶部填写版本描述,点击【发布】即可。
发布成功后来到Coze空间https://space.coze.cn/ ,点击【扩展】。
在【添加扩展】弹窗中选择【自定义】,选择刚刚发布的应用点击【添加】按钮。
添加成功后【扩展】会有标识,如果你的没有,看一下是不是步骤漏了,有没有一比一按照我的教程来。
最后只需要在对话框中输入绘图描述即可:
生成出的图片结果:
以上就是本期的完整教程,根据我的教程一步步来,你也能实现一句话绘制流程图,时序图,甘特图等业务图。
5. 写在结尾
通过 Coze + Mermaid + MCP 的强强联合,我们成功拆解了自然语言→专业图表的核心链路——告别传统绘图工具的低效束缚,用一行对话解锁可视化生产力。无论多复杂的流程设计、时序逻辑或项目排期,只需一句清晰描述,Mermaid工作流即可自动完成意图解析、语法转换与图表渲染,将你的思维直接落地成清晰标准的图形。
本方案的核心价值在于:
✅ 零代码体验:用户无需学习 Mermaid 语法,专注业务表达
✅ 全流程自动化:意图识别→语法生成→绘图→返回链接一气呵成
✅ 生态无缝集成:通过MCP发布至Coze空间扩展库,即装即用
✅ 能力自由扩展:支持流程图/时序图/甘特图等十余种场景,持续扩展中
动手按照教程一步步实践,你将拥有自己的智能图表助手。
