关于 Mermaid

Mermaid 是一款基于 JavaScript 的图表绘制工具，它允许用户通过 Markdown 式语法快速创建各种专业图表。

Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。它降低了图表的编写/维护成本，帮助文档与开发同步，解决文档腐烂的问题，通过允许用户轻松修改图表，提升技术方案设计、项目进度跟踪、系统架构描述等场景的效率，能够无缝嵌入 GitHub、Notion、VS Code 等多种开发协作工具，是开发者、技术写作者及项目管理者的高效工具。

目前 Mermaid 代码主要有三个仓库：

• Mermaid JS：库主体；
• Mermaid Live Editor：Mermaid 官方提供的在线编辑器，基于 sveltejs 开发，用户可以在代码面板中编写或编辑 Mermaid 代码，在图表面板中即时预览渲染结果。编辑器还提供了配置面板，并且可以将生成的图表以分享链接的形式发送给他人👍；
• Mermaid CLI：官方提供的命令行工具，用户将 mermaid 配置文件（.mmd）转化为 SVG/PNG/PDF 等格式。

Mermaid 在 CSDN

😀 支持的图表

截至 2025-08，CSDN 博文支持 mermaid 的渲染，但是图表类型非常有限，仅支持：流程图、类图、UML（时序图）、甘特图、用户旅程图（User Journey)。

😞 不支持配置项

Mermaid 支持配置图表标题、主题等参数，形式如下：

---
title: 这里是图表标题
config:
  theme: dark
  lock: handDrawn
---

隔壁稀土掘金是支持的噢（虽然也是部分支持）。

😞 不支持脑图

CSDN 下脑图（mindmap）是直接输出原始文本信息😂，下图为稀土掘金对脑图的渲染效果。

😞 不支持实体关系图/erDiagram

😞 不支持C4模型/C4Context

😞 不支持 gitGraph

😞 不支持 timeline

期望

希望 CSDN 的开发大佬们能完善功能，支持更多常用图表！