当前位置:   article > 正文

markdown的mermaid用法及例子

markdown的mermaid用法及例子

Markdown高级用法——mermaid

前言

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

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

流程图(FlowChart)

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

Mermaid 支持多种图表的方向

语法

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

方向描述

用词含义
TB从上到下
BT从下到上
RL从右到左
LR从左到右

节点定义

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

表述说明
id[文字]矩形节点
id(文字)圆形矩形节点
id((文字))圆形节点
id>文字]右向旗帜状节点
id{文字}菱形节点
id[[文字]]双边框
id[(文字)]圆柱
id{{文字}}两边尖尖
文字1
文字2
文字3
文字4
文字5
文字6
文字7

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

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

节点间的连线

表述说明
>添加尾部箭头
-不添加尾部箭头
单线
–text–单线上加文字
==粗线
text粗线加文字
-.-虚线
-.text.-虚线加文字

子图表

使用以下语法添加子图表

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
Start
Stop
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
消息队列
数据存储
服务端
用户
请求
请求
请求
读写
读写
读写
异步通信
异步通信
异步通信
消息队列1
数据库1
数据库2
数据库3
负载均衡
服务1
服务2
服务3
前端应用
用户操作
## 时序图/序列图(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
参与者1 参与者2 Hi 参与者2 Hi 参与者1 参与者1 参与者2

消息线

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

处理中

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

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

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

标注

语法如下

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

其中位置表述可以为

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

循环

语法如下

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
张三(参与者) 李四(参与者) 吃了吗您呐? 吃了,您呢? 想了一下(标注) 跨越标注 还没呢,正准备回去吃 我也吃过了,哈哈 alt [还没吃(判断)] [已经吃了] 祝您新年好啊 opt [大过年的] loop [日复一日(循环体)] 张三(参与者) 李四(参与者)
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
参与者1 参与者2 参与者1 打电话给 参与者2. 你好吗? 参与者2, 你能听到我的声音吗? 嗨,我能听到你的声音 我感觉很棒! 你今晚想去看比赛吗? 是的!到时候见 参与者1 参与者2
## 类图(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
类名A
+类型 属性名
+操作名()
类名B
-类型 属性名
-操作名()

关系

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
继承
组合
聚合
关联
连接(Solid)
依赖
实现
连接(Dashed)
classA
classB
classC
classD
classE
classF
classG
classH
classI
classJ
classK
classL
classM
classN
classO
classP

例子


---
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
40% 25% 20% 15% 饼图示例 A [40] B [25] C [20] D [15]

状态图(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
在工作
在工作
喝水
喝水
工作
工作
开会
开会
在家
在家
玩游戏
玩游戏
看书
看书
My working day

甘特图(gantt)

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

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

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

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

task进度条有三种状态,<default>doneactive

<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
2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 2014-01-23 2014-01-25 2014-01-27 完成任务 Completed task in the critical line Implement parser and jison Describe gantt syntax 任务一 Create tests for parser Add gantt diagram to demo page Add another diagram to demo page 任务二 Future task in critical line Describe gantt syntax Add gantt diagram to demo page Add another diagram to demo page 任务三 Create tests for renderer Add to mermaid Functionality added A section Critical tasks Documentation Last section Adding GANTT diagram functionality to mermaid

思维导图(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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/602547
推荐阅读
相关标签
  

闽ICP备14008679号