Loading

hellohelp

mermaid的用法

Mermaid的用法

以下是在Typora中使用Mermaid绘制各类图表的详细教程，包含基础配置、语法详解及实战示例：

一、环境配置

  1. 启用Mermaid支持

    • 打开Typora → 偏好设置 → Markdown → 勾选图表（流程图、时序图、Mermaid图）。
    • 重启Typora使配置生效。

  2. 插入图表代码块
    在文档中输入：

    ```mermaid
// 图表代码
```

二、基础语法要素

1. 方向定义

代码 方向 示例
TD/TB 上→下 graph TD; A→B
BT 下→上 graph BT; A→B
LR 左→右 graph LR; A→B
RL 右→左 graph RL; A→B

2. 节点形状

graph LR A[方形] --> B(圆角矩形) C{菱形} --> D[[子程序形]] E((圆形)) --> F[/平行四边形/]
  • 语法：
    • 方形：A[文本]
    • 圆角矩形：B(文本)
    • 菱形：C{文本}
    • 圆形：E((文本))

3. 连接线与箭头

类型 语法 示例
实线箭头 --> A --> B
虚线箭头 -.-> A -.-> B
粗箭头 ==> A ==> B
带文本箭头 -- 文本 --> A-- 说明 -->B
无箭头线 --- A --- B

三、常用图表绘制详解

1. 流程图

竖向流程图：

```mermaid
graph TD
    A[开始] --> B{条件}
    B -->|是| C[执行任务]
    B -->|否| D[结束]
    C --> D
```

子图嵌套：

```mermaid
flowchart TB
    subgraph 模块A [citations:6]
        A1 --> A2
    end
    subgraph 模块B
        B1 --> B2
    end
    A2 --> B1
```

2. 时序图

```mermaid
sequenceDiagram
    participant 用户
    participant 服务器
    用户->>服务器: 登录请求
    Note right of 服务器: 验证身份
    服务器-->>用户: 响应结果
```
  • 符号说明：
    • ->>：实线箭头（同步消息）
    • -->>：虚线箭头（异步消息）
    • Note right of：右侧注释

3. 甘特图

```mermaid
gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析   ：done,    des1, 2024-01-01, 5d
    原型设计   ：active,  des2, after des1, 3d
    section 开发
    编码实现   ：         dev1, after des2, 10d
```
  • 关键词：
    • done：已完成
    • active：进行中
    • after：依赖前一任务

4. 类图

```mermaid
classDiagram
    class Animal {
        +int age
        +isMammal()
    }
    class Duck {
        +String beakColor
        +swim()
    }
    Animal <|-- Duck  // 继承关系
```

5. 饼图

```mermaid
pie
    title 销售占比
    “产品A”： 45
    “产品B”： 30
    “产品C”： 25
```

四、样式美化技巧

  1. 自定义节点样式

    ```mermaid
graph LR
    A:::highlight --> B
    classDef highlight fill:#f96, stroke:#333, stroke-width:2px;
```
    • classDef定义样式类，:::应用样式。

  2. 使用FontAwesome图标

    ```mermaid
graph TD
    B[“fa:fa-twitter 社交平台”]
```

五、导出与调试

  1. 导出格式
    • 支持导出为PDF、HTML、图像（PNG/SVG），图表会保留渲染效果。
  2. 常见问题
    • 图形不显示：检查Typora是否启用图表支持并重启。
    • 语法错误：使用在线校验工具Mermaid Live Editor。

六、完整示例汇总

图表类型 应用场景 核心语法
流程图 业务流程 graph TD; A-->B{判断}
时序图 系统交互时序 sequenceDiagram; A->>B: 请求
甘特图 项目管理 gantt; section 开发; 任务:active, 7d
类图 面向对象设计 `classDiagram; ClassA <
饼图 数据占比可视化 pie; “类别”: 百分比

提示：Typora的实时预览功能（Ctrl+/）可快速查看图表效果。更多语法详见Mermaid官方文档。https://mermaid.js.org/intro/

七、mermaid代码块使用示例

官网有最全的说明文档 mermaidjs.github.io/ ，此处记录常用使用方法。

graph TD B((开始)) -->C{判断} C -- a=1 -->D[执行语句1] C -- a=2 -->E[执行语句2] C -- a=3 -->F[执行语句3] C -- a=4 -->G[执行语句4] D--> AA((结束)) E--> AA F--> AA G--> AA

a=1a=2a=3a=4开始判断执行语句1执行语句2执行语句3执行语句4结束

  • 另一种写法
graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

TextOneTwoHardRoundDecisionResult 1Result 2

流程图语法

graph TD; A-->B; A-->C; B-->D; C-->D;

方向

方向 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右
TD 与TB相同

节点

语法结构如下：A[名称] --> B(名称) 其中，A、B均代表形状名称， -->表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：

括号形式 形状样式
[ ] 矩形框
( ) 圆角矩形框
菱形
(( )) 圆形

连接线

符号 箭头
--> 箭头
--- 没有箭头
-- 文字 --- / --- |文字| 带文字的连接线
-->|文字| / -- 文字 --> 带箭头和文字的连接
-.-> 虚线
-. 文字 .-> 带文字的虚线连接
==> 粗连接线
== 文本 ==> 带文本的粗连接

子图

语法：

graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end

threeonec2c1twob2b1a2a1

样式链接

graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

StartStop

注释

  • mermaid注释为%%

综合应用

graph TB id1(圆角矩形)--普通线-->id2[矩形] subgraph 子图表 id2==粗线==>id3{菱形} id3-.虚线.->id4>右向旗帜] id3--无箭头---id5((圆形)) end style id1 fill:#f9f,stroke:#333,stroke-width:4px

子图表普通线粗线虚线无箭头菱形矩形右向旗帜圆形圆角矩形

甘特图

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

2014-01-062014-01-072014-01-072014-01-082014-01-082014-01-092014-01-092014-01-10Completed Parallel 1 Parallel 2 Active Parallel 3 Parallel 4 Section

类图

classDiagram Class01 <|-- AveryLongClass : Cool <<interface>> Class01 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { <<service>> int id size() }

CoolWhere am i?«interface»Class01int chimpint gorillasize()AveryLongClassClass09C2C3Class07Object[] elementDataequals()«service»Class10int idsize()

Git 图

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

象限图

quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]

XY 图

xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

思维导图

mindmap root((mindmap)) Origins Long history ::icon(fa fa-book) Popularisation British popular psychology author Tony Buzan Research On effectiveness<br/>and features On Automatic creation Uses Creative techniques Strategic planning Argument mapping Tools Pen and paper Mermaid

时间线图

timeline title History of Social Media Platform 2002 : LinkedIn 2004 : Facebook : Google 2005 : YouTube 2006 : Twitter

架构图

architecture-beta group api(cloud)[API] service db(database)[Database] in api service disk1(disk)[Storage] in api service disk2(disk)[Storage] in api service server(server)[Server] in api db:L -- R:server disk1:T -- B:server disk2:T -- B:db

状态图

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

StillMovingCrash

饼图

pie "Dogs" : 386 "Cats" : 85 "Rats" : 15

79%17%3%DogsCatsRats

旅程图

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me

CatMeGo to workGo to workMake teaMake teaGo upstairsGo upstairsDo workDo workGo homeGo homeGo downstairsGo downstairsSit downSit downMy working day

序列图语法

使用以下语法开始序列图

sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
    ...
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

参与者

定义参与者

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 312345

消息线

|类型|描述| |->|无箭头的实线| |-->|无箭头的虚线| |->>|有箭头的实线| |-->>|有箭头的虚线| |-x|末端为叉的实线（表示异步）| |--x|末端为叉的虚线（表示异步）|

处理中

在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态； 在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

或者使用以下语法直接说明某个参与者进入“处理中”状态

activate 参与者1

标注

语法如下

位置表述 参与者: 标注文字1

其中位置表述可以为

表述 含义
right of 右侧
left of 左侧
over 在当中，可以横跨多个参与者

循环

语法如下

loop 循环的条件
    循环体描述语句
end123

判断

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end1234567

如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：

opt 条件描述
    分支描述语句
end

综合应用

sequenceDiagram participant z as 张三 participant l as 李四 loop 日复一日 z->>l: 吃了吗您呐？ l-->>z: 吃了，您呢？ activate z Note left of z: 想了一下 alt 还没吃 z-xl: 还没呢，正准备回去吃 else 已经吃了 z-xl: 我也吃过了，哈哈 end opt 大过年的 l-->z: 祝您新年好啊 end end

张三李四想了一下alt[还没吃][已经吃了]opt[大过年的]loop[日复一日]吃了吗您呐？吃了，您呢？还没呢，正准备回去吃我也吃过了，哈哈祝您新年好啊张三李四

官方用例

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

AliceJohnBobloop[Healthcheck]Rational thoughts!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!AliceJohnBob

posted @ 2025-07-15 13:10  HordorZzz  阅读(1078)  评论(0)    收藏  举报