04月14, 2025
0 comments

Mermaid简介

Mermaid简介

Mermaid是一个基于JavaScript的图表和图形生成工具，它允许用户使用类似于Markdown的简单文本语法来创建和修改复杂的图表。Mermaid的目标是让非专业人士也能轻松创建详细的图表，而无需使用复杂的绘图工具。

Mermaid的主要特点

  1. 简单的语法：使用类似Markdown的文本语法，易于学习和使用
  2. 多种图表类型：支持流程图、时序图、类图、甘特图、饼图、状态图等多种图表类型
  3. 易于集成：可以集成到各种平台，如GitHub、GitLab、Notion、VS Code等
  4. 实时渲染：支持实时预览，方便调整和修改
  5. 开源免费：完全开源，可以自由使用和修改

常见图表类型及语法示例

Mermaid支持多种图表类型，以下是一些常见的图表类型及其语法示例：

1. 流程图 (Flowchart)

flowchart TB
    A[开始] --> B{条件判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E

2. 时序图 (Sequence Diagram)

sequenceDiagram
    participant User as 用户
    participant System as 系统
    User->>System: 发送请求
    System->>System: 处理请求
    System->>User: 返回响应

3. 类图 (Class Diagram)

classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound(): void
    }
    class Dog {
        +breed: string
        +bark(): void
    }
    Animal <|-- Dog

4. 甘特图 (Gantt Chart)

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 阶段1
    任务1           :a1, 2023-01-01, 30d
    任务2           :after a1, 20d
    section 阶段2
    任务3           :2023-02-15, 12d
    任务4           :24d

5. 状态图 (State Diagram)

stateDiagram-v2
    [*] --> 待处理
    待处理 --> 处理中: 开始处理
    处理中 --> 已完成: 完成处理
    处理中 --> 失败: 处理失败
    失败 --> 待处理: 重试
    已完成 --> [*]

6. 饼图 (Pie Chart)

pie title 项目资源分配
    "开发" : 45
    "测试" : 30
    "文档" : 15
    "管理" : 10

7. 实体关系图 (Entity Relationship Diagram)

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

8. 用户旅程图 (User Journey Diagram)

journey
    title 用户购物体验
    section 浏览阶段
      访问网站: 5: User
      浏览商品: 4: User
      查看详情: 3: User
    section 购买阶段
      添加购物车: 5: User
      结算: 3: User
      支付: 3: User
    section 售后阶段
      收到商品: 5: User
      评价: 4: User

9. Git图 (Git Graph)

gitGraph
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    branch feature
    checkout feature
    commit
    checkout develop
    merge feature
    checkout main
    merge develop

10. 思维导图 (Mindmap)

mindmap
  root((项目管理))
    计划阶段
      需求分析
      资源规划
      进度安排
    执行阶段
      任务分配
      进度跟踪
      质量控制
    收尾阶段
      验收测试
      文档归档
      总结复盘

11. C4图 (C4 Diagram)

C4Context
    title 系统上下文图
    
    Person(user, "用户", "使用系统的人")
    System(system, "系统", "提供核心功能")
    System_Ext(payment, "支付系统", "处理支付")
    
    Rel(user, system, "使用")
    Rel(system, payment, "调用API")
    Rel(payment, system, "返回结果")

在HTML中使用Mermaid

要在HTML页面中使用Mermaid，需要引入Mermaid的JavaScript库，然后使用特定的HTML结构来包含Mermaid语法：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({ startOnLoad: true });
    </script>
</head>
<body>
    <div class="mermaid">
        flowchart TB
            A[开始] --> B{条件判断}
            B -->|是| C[处理1]
            B -->|否| D[处理2]
            C --> E[结束]
            D --> E
    </div>
</body>
</html>

在Markdown中使用Mermaid

许多支持Markdown的平台（如GitHub、GitLab、VS Code等）也支持Mermaid图表。在Markdown中使用Mermaid的语法如下：

```mermaid
flowchart TB
    A[开始] --> B{条件判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E
```

Mermaid的优势

  1. 降低创建图表的门槛：无需专业绘图工具，使用简单的文本即可创建复杂图表
  2. 版本控制友好：由于是基于文本的，可以轻松地进行版本控制和协作
  3. 易于维护和更新：修改图表只需编辑文本，而不是重新绘制
  4. 与文档集成：可以直接嵌入到Markdown、HTML等文档中
  5. 自动布局：自动处理元素的位置和连接，减少手动调整的工作

更多图表类型

除了上面介绍的常见图表类型外，Mermaid还支持以下图表类型：

12. 子图 (Subgraph)

flowchart TB
    subgraph 前端模块
        A[用户界面] --> B[数据验证]
        B --> C[API调用]
    end
    
    subgraph 后端模块
        D[API接口] --> E[业务逻辑]
        E --> F[数据库操作]
    end
    
    C --> D
    F --> G[数据库]

13. XY图 (XY Chart)

xychart-beta
    title "产品销售趋势"
    x-axis [1月, 2月, 3月, 4月, 5月, 6月]
    y-axis "销售量" 0 --> 100
    bar [10, 20, 30, 40, 50, 60]
    line [15, 25, 35, 45, 55, 65]

14. 方向图 (Direction Graph)

graph TB
    A[开始] --> B{条件}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E
    
    %% 这是注释
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style E fill:#bbf,stroke:#333,stroke-width:2px

15. 复杂流程图 (Complex Flowchart)

flowchart TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[显示登录页]
    D --> E[用户输入]
    E --> F{验证通过?}
    F -->|是| C
    F -->|否| G[显示错误]
    G --> D
    C --> H{执行操作}
    H -->|查询| I[显示数据]
    H -->|修改| J[更新数据]
    I --> K[结束]
    J --> K

自定义Mermaid图表

Mermaid提供了多种方式来自定义图表的外观和行为：

主题自定义

Mermaid支持多种内置主题，如default、forest、dark、neutral等，可以通过初始化配置来设置：

mermaid.initialize({
  theme: 'forest'
});

样式自定义

可以通过CSS来自定义Mermaid图表的样式：

<style>
  .mermaid .node rect {
    fill: #ECECFF;
    stroke: #9370DB;
    stroke-width: 1px;
  }
  
  .mermaid .edgeLabel {
    background-color: #e8e8e8;
  }
</style>

颜色和字体自定义

在图表定义中，可以直接指定元素的样式：

flowchart LR
    A[开始]:::greenNode --> B[处理]
    B --> C[结束]:::redNode
    
    classDef greenNode fill:#9f6,stroke:#333,stroke-width:2px;
    classDef redNode fill:#f66,stroke:#333,stroke-width:2px,color:#fff,font-weight:bold;

布局自定义

对于流程图，可以通过设置方向来控制布局：

  • TB - 从上到下
  • TD - 从上到下（与TB相同）
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右
flowchart RL
    A[开始] --> B[处理] --> C[结束]

自定义图表配置

可以通过JavaScript API来进行更高级的自定义：

mermaid.initialize({
  securityLevel: 'loose',
  flowchart: {
    useMaxWidth: false,
    htmlLabels: true,
    curve: 'basis'
  },
  sequence: {
    diagramMarginX: 50,
    diagramMarginY: 10,
    actorMargin: 50
  }
});

总结

Mermaid是一个强大而简单的图表生成工具，通过简单的文本语法就能创建各种类型的图表。它支持多种图表类型，并提供了丰富的自定义选项，可以满足不同场景下的可视化需求。它特别适合用于技术文档、项目规划、流程说明等场景，可以帮助用户更直观地表达和理解复杂的概念和关系。无论是开发人员、产品经理还是文档编写者，都能从Mermaid中受益，提高工作效率和沟通效果。

本文链接：https://www.leon82.com/post/Mermaid-jian-jie.html

-- EOF --

作者 Leon82 发表于 2025-04-14 17:48:56 ，最后修改于 2025-04-14 18:04:55

Comments