Mermaid 图表全攻略：哪个客户端最懂你？

作为一个经常用 Markdown 写作的人，我经常遇到这样的困扰：辛辛苦苦画了一个漂亮的图表，结果发到不同的平台，有的显示正常，有的却是一片空白。

就像你精心准备了一份礼物，对方却不领情一样——这种感觉太糟糕了。

为什么需要这个表格？

Mermaid 是一款强大的文本转图表工具，用简单的代码就能画出流程图、序列图、甘特图等各种图表。但问题是：不同的客户端（ChatGPT、元宝、Cherry Studio 等）对 Mermaid 的支持程度不一样。

这就像是同样的菜品，不同的厨师做出来味道各不相同。

所以，我整理了这个表格，告诉你哪个客户端支持哪些图表类型，帮你避开那些”吃不到嘴里的葡萄”。

完整对比矩阵

序号	图表类型	英文名称	元宝	CherryStudio	ChatGPT
1	流程图	Flowchart	✅	✅	✅
2	序列图	Sequence Diagram	✅	✅	✅
3	类图	Class Diagram	✅	✅	✅
4	状态图	State Diagram	✅	✅	✅
5	实体关系图	Entity Relationship Diagram	✅	✅	✅
6	用户旅程图	User Journey Diagram	✅	✅	✅
7	甘特图	Gantt Chart	✅	✅	✅
8	饼图	Pie Chart	✅	✅	✅
9	象限图	Quadrant Chart	❌	✅	❌
10	需求图	Requirement Diagram	❌	✅	❌
11	Git图	GitGraph Diagram	✅	✅	✅
12	C4架构图	C4 Diagram	✅	❌	❌
13	思维导图	Mindmaps	✅	✅	✅
14	时间线图	Timeline	✅	✅	✅
15	ZenUML图	ZenUML Diagram	❌	❌	❌
16	桑基图	Sankey Diagram	❌	✅	❌
17	XY图	XY Chart	✅	❌	❌
18	块状图	Block Diagram	❌	✅	✅
19	数据包图	Packet Diagram	✅	❌	❌
20	看板图	Kanban Diagram	✅	✅	✅
21	架构图	Architecture Diagram	❌	❌	✅
22	雷达图	Radar Chart	❌	❌	❌
23	树状图	Treemap Diagram	❌	❌	❌

图例说明

✅：支持
❌：不支持

表格能告诉你什么？

这个表格对比了三个主流客户端：

元宝：国内流行的 AI 助手
Cherry Studio：开源的 AI 客户端
ChatGPT：OpenAI 的经典产品

你可以清楚地看到：

✅ 支持：放心使用，正常显示
❌ 不支持：避开这个坑，选择其他图表类型

一些有趣的发现

Cherry Studio：黑马选手

Cherry Studio 给了我不少惊喜！它支持 20 种图表类型，甚至比 ChatGPT 还要多。特别值得一提的是：

象限图：只有 Cherry Studio 和元宝支持，ChatGPT 不行
需求图：同样只有 Cherry Studio 和元宝支持
桑基图：Cherry Studio 独占鳌头
块状图：Cherry Studio 也支持

如果你经常需要用这些图表，Cherry Studio 是个不错的选择。

大家都支持的图表

有 13 种图表类型是所有客户端都支持的，你可以放心使用：

流程图：展示步骤、决策流程
序列图：展示时序交互
类图：展示代码结构
状态图：展示状态转换
实体关系图：展示数据关系
用户旅程图：展示用户体验路径
甘特图：展示项目进度
饼图：展示比例关系
Git图：展示版本控制流程
思维导图：展示知识结构
时间线图：展示历史事件
看板图：展示任务管理

这些图表是”万金油”，不管你在哪个客户端，都能正常显示。

没人要的图表

有些图表类型，大家都不支持，比如：

ZenUML图：三个客户端都不支持
雷达图：只有元宝支持
树状图：大家都不支持

这些图表，建议你暂时不要用，或者考虑用其他替代方案。

实用建议：如何选择图表？

场景 1：你需要在多个平台发布

推荐：使用大家都支持的 13 种图表

避免使用象限图、需求图、桑基图等”独家”图表
这样可以确保所有平台都能正常显示

场景 2：你只在 Cherry Studio 使用

推荐：大胆使用所有 20 种图表

象限图、需求图、桑基图这些都可以用
享受图表多样性带来的便利

场景 3：你需要在 ChatGPT 上展示

场景 4：你想展示架构图

一些个人观察

为什么支持度不一样？

这背后的原因可能有：

技术架构：不同客户端使用的渲染引擎不同
优先级：有些图表类型不够常用，开发者没有优先支持
版本差异：不同客户端使用的 Mermaid 版本不一样

未来会更好吗？

我相信会！随着 Mermaid 的发展，图表类型会越来越丰富，各个客户端的支持度也会逐步提升。就像早期的 Markdown 支持度也不一样，现在基本都统一了。

我的建议

如果你是作者：

优先使用通用图表（那 13 种大家都支持的）
如果必须用特殊图表，记得在文章中注明”推荐使用 Cherry Studio 查看”
或者提供图片截图作为备选方案

如果你是开发者：

考虑提升对更多图表类型的支持
提供不支持的图表的友好提示
允许用户自定义图表渲染方式

总结

这个表格就像是 Mermaid 图表的”使用指南”，帮你避开那些”吃不到嘴里的葡萄”。

核心原则：

通用优先：能用大家支持的图表，就不要用小众的
因地制宜：根据你的目标客户端，选择合适的图表
提前测试：发布前，先在目标客户端测试一下

希望这篇攻略能帮助你更好地使用 Mermaid 图表，让文字更加生动，让表达更加清晰！