Mermaid 图表全攻略:哪个客户端最懂你?

本文最后更新于 2026年8月23日 晚上

编号:ND-20260310-003
版本:1.0
更新: 2026-03-10
作者: 小瑞

作为一个经常用 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
❌
❌
❌


图例说明:


表格能告诉你什么?

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

你可以清楚地看到:


一些有趣的发现

Cherry Studio:黑马选手

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

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

大家都支持的图表

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

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

没人要的图表

有些图表类型,大家都不支持,比如:

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


实用建议:如何选择图表?

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

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

场景 2:你只在 Cherry Studio 使用

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

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

推荐:避开不支持的特殊图表

场景 4:你想展示架构图

推荐:用流程图或块状图替代


一些个人观察

为什么支持度不一样?

这背后的原因可能有:

未来会更好吗?

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

我的建议

如果你是作者:

如果你是开发者:


总结

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

核心原则:

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


相关资源:


Mermaid 图表全攻略:哪个客户端最懂你?
https://normdist.com/2026/03/10/ND-20260310-002-mermaid-chart-guide/
作者
小瑞
发布于
2026年3月10日
许可协议