Mermaid绘图学习笔记

最新推荐文章于 2025-11-19 20:39:57 发布

原创最新推荐文章于 2025-11-19 20:39:57 发布 · 1.7k 阅读

52 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

Mermaid简介

Mermaid 是一个 JavaScript 库，它允许用户使用 Markdown 语法来创建和渲染流程图、序列图、甘特图和 Git 提交历史图等。

流程图：使用 graph 或 flowchart 关键字来定义流程图，并通过箭头 (–>) 来表示流程中的步骤和它们之间的关系，指定方向使用 LR 表示从左到右，TD 表示从上到下。
序列图：使用 sequenceDiagram 关键字，序列图用于显示对象之间的交互，箭头表示消息传递。
甘特图：使用 gantt 关键字来定义甘特图，通过 title 声明图表标题， dateFormat 声明时间轴， section 声明任务区块等。

mermaid绘图测试

流程图

流程图1：

graph LR
    A[开始] --> B[步骤1 : 这是一个注释]
    B --> C[步骤2 : 这是另一个注释]
    C --> D[步骤3]
    D --> E[结束]

流程图2：

graph TD
    subgraph Part1
        A[饼状图] --> B[部分1 : red]
        A --> C[部分2 : green]
        A --> D[部分3 : blue]
    end
    B --> E[子部分1 : red]
    C --> F[子部分2 : green]
    D --> G[子部分3 : blue]

流程图3：

graph TD
    A[项目开始] --> B[任务1 : 这是一个注释]
    B --> C[任务2 : 这是另一个注释]
    C --> D[任务3]
    D --> E[项目结束]
    B --延长线--> F[任务4 : 还有一个注释]
    F --> E

序列图

序列图1：

sequenceDiagram
    A->>B: Message 1
    B-->>A: Message 2

甘特图

甘特图1：

gantt
    title Example Gantt Chart
    dateFormat  YYYY-MM-DD
    section Section
    task 1: 2019-01-01, 30d
    task 2: 2019-02-01, 14d
    task 3: 2019-03-01, 7d