markdown的mermaid用法及例子

Markdown高级用法——mermaid

前言

Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。

Mermaid 是一个方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。

流程图（FlowChart）

流程图（flow chart）是体现封闭系统运动状态的有效展示形式，可以让管理者、实现者清晰的认识系统运转流程，也可以直观的描述工作过程。

Mermaid 支持多种图表的方向

语法

graph 方向描述
      图表中的其他语句...
1
2

方向描述

节点定义

即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字

需要注意的是，如果节点的文字中包含标点符号，需要时使用双引号包裹起来。

另外如果希望在文字中使用换行，请使用替换换行

节点间的连线

子图表

使用以下语法添加子图表

subgraph 子图表名称
         子图表中的描述语句...
end
1
2
3

### 例子

---
title: Node
---
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    id1--普通线-->a["包含标点符号，需要时用双引号包裹起来"]
    a-->b[换行<br>换行]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
        id5-->id6[[双边框]]
        id4-->id7[(圆柱)]
        id7-->id8{{尖尖}}
    end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

graph TD
  subgraph 用户
    用户操作 --> A[前端应用]
  end

  subgraph 服务端
    A --> B[负载均衡]
    B -->|请求| C[服务1]
    B -->|请求| D[服务2]
    B -->|请求| E[服务3]
  end

  subgraph 数据存储
    C -->|读写| F[数据库1]
    D -->|读写| G[数据库2]
    E -->|读写| H[数据库3]
  end

  subgraph 消息队列
    C -->|异步通信| I[消息队列1]
    D -->|异步通信| I
    E -->|异步通信| I
  end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

## 时序图/序列图（sequenceDiagram）

语法

sequenceDiagram
    [参与者1] [消息线] [参与者2]:消息体
    ...
1
2
3

例子

sequenceDiagram
    张三->>李四: 吃了吗？
    李四->>张三: 吃了
   
1
2
3
4

参与者

上例中的张三、李四都是参与者，上例中的语法是最简单的，也可以明显表明参与者有哪些。

如果特别想使用参与者符号而不是带有文本的矩形，则可以使用参与者语句来实现，如下所示

sequenceDiagram
    actor 参与者1
    actor 参与者2
    参与者1->>参与者2: Hi 参与者2
    参与者2->>参与者1: Hi 参与者1
1
2
3
4
5

消息线

处理中

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

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

activate 参与者
1

sequenceDiagram
    Alice->>John: Hello John, how are you?
    activate John
    John-->>Alice: Great!
    deactivate John
1
2
3
4
5

标注

语法如下

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

其中位置表述可以为

循环

语法如下

loop 循环的条件
    循环体描述语句
end
1
2
3

判断

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end
1
2
3
4
5
6
7

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

opt 条件描述
    分支描述语句
end
1
2
3

例子

sequenceDiagram
    participant z as 张三(参与者)
    participant l as 李四(参与者)
    loop 日复一日（循环体）
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        

    activate z

    Note left of z: 想了一下（标注）
    Note over l,z: 跨越标注

    alt 还没吃（判断）
        z-xl: 还没呢，正准备回去吃
    else 已经吃了
        z-xl: 我也吃过了，哈哈
    end
    
    opt 大过年的
        l-->z: 祝您新年好啊
    end
end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

sequenceDiagram
    participant 参与者1
    participant 参与者2

rect rgb(191, 223, 255)
note right of 参与者1: 参与者1 打电话给 参与者2.
参与者1->>+参与者2: 你好吗？
rect rgb(200, 150, 255)
参与者1->>+参与者2: 参与者2, 你能听到我的声音吗？
参与者2-->>-参与者1: 嗨，我能听到你的声音
end
参与者2-->>-参与者1: 我感觉很棒！
end
参与者1 ->>+ 参与者2: 你今晚想去看比赛吗？
参与者2 -->>- 参与者1: 是的！到时候见
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

## 类图（classDiagram）

类图用于描述系统的静态结构，显示系统的类、它们的属性、操作以及它们之间的关系。下面是一个简单的类图示例：

了解：
1、public 公用的 ：用+ 前缀表示 ，该属性对所有类可见
2、protected 受保护的：用 # 前缀表示，对该类的子孙可见
3、private 私有的：用- 前缀表示，只对该类本身可见
4、package 包的：用 ~ 前缀表示，只对同一包声明的其他类可见

语法

classDiagram
  class 类名A{
    +类型 属性名
    +操作名()
}
 class 类名B{
    -类型 属性名
    -操作名()
}
类名A <-- 类名B
    ...
1
2
3
4
5
6
7
8
9
10
11

关系

classDiagram
classA <|-- classB:继承
classC *-- classD:组合
classE o-- classF:聚合
classG <-- classH:关联
classI -- classJ:连接(Solid)
classK <.. classL:依赖
classM <|.. classN:实现
classO .. classP:连接(Dashed)
1
2
3
4
5
6
7
8
9

例子

---
title: Animal example
---
classDiagram
    note "标注"
note for Duck "标注\n can fly \n can swim \n can dive \n can help in debugging"
    
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra

Animal : +int age
Animal : +String gender

Animal: +isMammal()
Animal: +mate()

class Duck{
    +String beakColor
    +swim()
    +quack()
}
class Fish{
    -int sizeInFeet
    -canEat()
}
class Zebra{
    +bool is_wild
    +run()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

---
title: Animal example
---
classDiagram
    note "标注"

    note for Duck "标注\n can fly \n can swim \n can dive \n can help in debugging"
        
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    
    Animal : +int age
    Animal : +String gender
    
    Animal: +isMammal()
    Animal: +mate()
    
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

饼图（pie）

pie showData
  title 饼图示例
  " A" : 40
  " B" : 25
  " C" : 20
  " D" : 15
1
2
3
4
5
6

状态图（stateDiagram）

状态图(Statechart Diagram)是描述一个实体基于事件反应的动态行为，显示了该实体如何根据当前所处的状态对不同的事件做出反应。通常我们创建一个UML状态图是为了以下的研究目的：研究类、角色、子系统、或组件的复杂行为。

stateDiagram  
[*] --> 暂停
    暂停 --> 播放
    暂停 --> 停止:类型
    播放 --> 暂停
    播放 --> 停止
    停止 --> [*] 
1
2
3
4
5
6
7

时间线（timeline）

依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，再运用图文的形式呈现给用户；时间轴可以运用于不同领域，最大的作用就是把过去的事物系统化、完整化、精确化。

%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest
1
2
3
4
5
6
7
8
9
10

%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
    timeline
        title History of Social Media Platform
          2002 : LinkedIn
          2004 : Facebook : Google
          2005 : Youtube
          2006 : Twitter
          2007 : Tumblr
          2008 : Instagram
          2010 : Pinterest
1
2
3
4
5
6
7
8
9
10

用户旅途图（journey）

用户旅程图以高度详细的方式描述了不同用户在系统、应用或网站内等完成特定任务所采取的确切步骤。这种技术展示了当前（现状）用户的工作流程，并揭示了未来（预期）工作流程的改进空间。

语法

<任务>:<评分>:<参与者1>,<参与者2>…

journey
    title 标题
    section 最大层次标签
      第二层名称1: 等级数字
      第二层名称2: 3
      第二层名称3: 1
    section 最大层次标签
       第二层名称4: 5
       第二层名称5: 5
1
2
3
4
5
6
7
8
9

例子

表情从下到上（1-10）

journey
     title My working day
    section 在工作
      喝水: 5:我, 猫
      工作: 3:我
      开会: 1:我
    section 在家
      玩游戏: 5:我
      看书: 5:我
1
2
3
4
5
6
7
8
9

甘特图（gantt）

甘特图是工程计划中常用的一种图形，用以管理任务的分解、时间的长度和节点计划、以及实际进度和计划进度的差距等等.

甘特图将记录每个计划的任务作为一个连续的条形，从左到右延伸. x 轴表示时间， y 轴记录不同的任务及其完成顺序.

从上面这段描述里我们能够摘取到甘特图的一些重要因素：时间、任务、计划和进度.

task显示名 : 状态（可缺省） 任务名（可缺省） 开始时间（或任务位置） 延续时长（或结束时间）
1

task进度条有三种状态，<default>，done，active

<default>表示的状态即为缺省下的状态，具体来说，就是已计划但尚未实施.

done表示该工作已完成.

active表示该工作正激活，处于正在进行中.

对于关键任务，还提供了一个crit状态，表示该任务为关键任务. crit状态可以与其他状态复用.

例子

gantt
    dateFormat  YYYY-MM-DD                                                                ---时间格式指定
    title       Adding GANTT diagram functionality to mermaid                             ---标题
    excludes    weekends                                                                  --- excludes排除日期，排除周末
  
section A section                                                                         ---section区块分隔
Completed task            :done,    des1, 2014-01-06,2014-01-08                           ---task任务条，对应一个甘特图进度条
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2              :         des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :until isadded
Functionality added                 :milestone, isadded, 2014-01-25, 0d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      :20h
Add another diagram to demo page    :48h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

思维导图（mindmap）

mindmap
  root((根))
    Origins
      Long history
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
      
    Tools
      Pen and paper
      Mermaid
1
2
3
4
5
6
7
8
9
10
11
12
13

mindmap
  root((根))
    Origins
      Long history
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
    Tools
      Pen and paper
      Mermaid
1
2
3
4
5
6
7
8
9
10
11
12

大部分示例都是在网上找的，如有侵权联系删除！