Mermaid图表绘制完全指南

2026-02-06 04:14:40作者：宣聪麟

Mermaid是一个基于JavaScript的图表绘制工具，通过类似Markdown的文本语法来创建和修改复杂的图表。它的主要目标是帮助文档跟上开发的步伐，解决文档更新滞后的问题。

快速开始

要在你的项目中使用Mermaid，首先需要引入相应的库文件并配置渲染器。以下是一个基本的HTML示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="mermaid.min.js"></script>
</head>
<body>
<div class="mermaid">
graph TD
  A[开始] --> B{决策}
  B -->|是| C[执行操作]
  B -->|否| D[结束]
</div>

<script>
mermaid.initialize({
  startOnLoad: true,
  theme: 'neutral'
</script>
</body>
</html>

核心图表类型

流程图

流程图是最常用的图表类型之一，用于表示工作流程或算法步骤：

graph TD
  A[开始] --> B{决策}
  B -->|是| C[执行操作]
  B -->|否| D[结束]

时序图

时序图展示了对象之间交互的时间顺序，特别适合描述系统组件间的调用关系：

sequenceDiagram
  Alice->>John: Hello John, how are you?
  loop 健康检查
    John->>John: 对抗疑病症
end
Note right of John: 理性思考！
John-->>Alice: 太棒了！

类图

类图用于表示系统的静态结构，展示类、接口以及它们之间的关系：

classDiagram
  Animal <|-- Duck
  Animal <|-- Fish
  Animal <|-- Zebra
  Animal: +int age
  Animal: +String gender
  Animal: +isMammal()
  Animal: +mate()

高级特性

样式定制

Mermaid允许你为图表元素自定义样式：

flowchart LR
  A[红色文本] -->|红色文本| B(蓝色文本)
  C[/红色文本/] -->|蓝色文本| D{蓝色文本}

交互功能

图表支持点击事件，可以为节点添加链接：

flowchart TB
  TITLE["链接点击事件<br>(点击下方节点)"]
  A["链接测试(在同一标签页打开)"]
  B["链接测试(在新标签页打开)"]

最佳实践

文本格式

保持节点标签简洁明了
使用换行符
来处理多行文本
合理使用注释说明复杂逻辑

布局优化

遵循一致的图形风格和布局
利用子图来组织复杂的流程图结构
为重要的节点或连接线添加特殊样式

复杂关系表达

对于包含多个参与者和复杂交互的场景，建议使用子图和分组来保持图表的可读性。

集成应用

Mermaid可以集成到各种开发工具和平台中：

文档工具：支持在技术文档中嵌入图表
协作平台：可在团队协作工具中使用
代码管理：适合在版本控制系统中维护图表

通过掌握这些核心功能和最佳实践，你将能够使用Mermaid创建专业、美观的图表，有效提升技术文档的质量和可读性。

mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

项目地址：https://gitcode.com/GitHub_Trending/me/mermaid

登录后查看全文

项目优选

收起

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

433

391

ops-math

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

1.1 K

611

atomcode

Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started

Rust

1.14 K

146