Mermaid 指南
Mermaid 图表语法的综合指南。学习高级技术并探索所有可用的图表类型。
高级流程图
流程图可以设置不同的方向（LR 表示从左到右，TD 表示从上到下等），并支持多种节点形状，包括矩形、菱形（用于决策）和圆角矩形。您还可以在边上添加标签，创建复杂的分支结构。
预览
渲染中...
代码
```mermaid
graph LR
A[开始] --> B{检查条件}
B -->|真| C[处理 A]
B -->|假| D[处理 B]
C --> E[子流程 1]
C --> F[子流程 2]
D --> G[替代流程]
E --> H[结束]
F --> H
G --> H
```类图
类图表示面向对象的系统结构。它们显示类及其属性和方法、继承关系（使用 <|--）和关联。使用 + 表示公共成员，- 表示私有成员，# 表示受保护成员。
预览
渲染中...
代码
```mermaid
classDiagram
动物 <|-- 鸭子
动物 <|-- 鱼
动物: +int 年龄
动物: +String 性别
动物: +是哺乳动物() bool
动物: +交配()
鸭子: +String 喙颜色
鸭子: +游泳()
鸭子: +嘎嘎叫()
鱼: -int 尺寸英尺
鱼: +可以吃()
鱼: +游泳()
```实体关系图
ER 图建模数据库结构，显示实体（表）、它们的属性（列）以及它们之间的关系。使用 ||--o{ 表示一对多关系，||--|| 表示一对一关系，}o--o{ 表示多对多关系。
预览
渲染中...
代码
```mermaid
erDiagram
客户 ||--o{ 订单 : 下单
订单 ||--|{ 订单项 : 包含
产品 ||--o{ 订单项 : "属于"
客户 {
string 姓名
string 邮箱
int 电话
}
订单 {
int 订单号
date 订单日期
}
产品 {
string 产品代码
string 描述
float 价格
}
```甘特图
甘特图可视化项目进度和时间线。为不同阶段定义部分，指定任务名称、ID、开始日期和持续时间。任务可以使用 'after' 关键字依赖于之前的任务。
预览
渲染中...
代码
```mermaid
gantt
title 项目时间线
dateFormat YYYY-MM-DD
section 阶段 1
设计 :a1, 2024-01-01, 30d
section 阶段 2
开发 :a2, after a1, 45d
测试 :a3, after a2, 15d
section 阶段 3
部署 :a4, after a3, 10d
```饼图
饼图以圆形格式显示比例数据。每个扇形代表一个类别及其百分比或值。图表会自动计算比例并以视觉方式显示。
预览
渲染中...
代码
```mermaid
pie title 销售分布
"产品 A" : 42.7
"产品 B" : 28.3
"产品 C" : 15.2
"产品 D" : 8.5
"其他" : 5.3
```Git 图
Git 图可视化 Git 分支和合并工作流。它们显示提交、分支、检出和合并。非常适合记录 Git 工作流和理解仓库历史。
预览
渲染中...
代码
```mermaid
gitGraph
commit id: "初始"
branch 开发
checkout 开发
commit id: "功能 A"
commit id: "功能 B"
checkout 主分支
merge 开发
commit id: "发布"
```