Mermaid

请注意,本文最近一次更新于:2022-04-19,文章内容可能已经不具有时效性,请谨慎参考

本文最后更新于:2022年4月19日星期二晚上9点58分 +08:00

这里说的是markdown中对mermaid流程图的应用


时间线

2022年3月16日

Flowchat

2022年3月16日

Sequence Diagram

2022年3月16日

Pie Chart

2022年3月16日

Class Diagram

mermaid是什么

  • Mermaid单词是美人鱼的意思,它可以配合Markdown食用,可以用于绘制流程图、状态图、时序图、饼图、分类图、甘特图等等,语法方便简洁,容易快速上手

    流程图graph

  • 语法规则

    graph 方向关键字
    其他语句

  • 方向关键字

    • TB: 从上到西安
    • BT: 从下到上
    • LR: 从左到右
    • RL: 从右到左
    • TD: 从上到下
  • 实例代码

    graph LR
    开始 –> 结束

  • 实际效果

    graph LR
      开始 --> 结束
    

    流程图实操

  • 流程图中的节点有很多形状,表示的含义不尽相同


  • Mermaid默认节点形状为直角矩形

    graph Dir(方向,下同)
    sign(随意取名)[中括号表示直角矩形]

  • 实例代码

    graph TD
    默认效果
    id[测试]

  • 效果展示
    graph TD
    默认效果
    id[测试]
    

  • 圆角矩形,圆括号表示圆角矩形
  • 实例代码

    graph TD
    id(圆角矩形)

  • 效果展示
    graph TD
    id(圆角矩形)
    

  • 子程序,双括号表示子程序
  • 实例代码

    graph TD
    id [[套娃]]

  • 效果展示
    graph TD
    id[[套娃]]
    

  • 圆柱形,方括号套圆括号
  • 实例代码

    graph TD
    id[(data)]

  • 效果展示
    graph TD
    id[(data)]
    

  • 圆形,双圆括号表示
  • 实例代码

    graph TD
    id(circle)

  • 效果展示
    graph TD
    id((circle))
    

  • 右向旗帜,左大于+右方括号
  • 实例代码

    graph RL
    id>右满舵]

  • 效果展示
    graph RL
    id>右满舵]
    

  • 菱形,花括号表示,条件判断
  • 实例代码

    graph TD
    id{if}

  • 效果展示
    graph TD
    id{if}
    

  • 六角矩形,双花括号
  • 实例代码

    graph TD
    id

  • 效果展示
    graph TD
    id{{snowflake}}
    

  • 平行四边形,方括号配双斜杠
  • 实例代码

    graph TD
    id[/snowflake/]

  • 效果展示
    graph TD
    id[/snowflake/]
    

  • 反平行四边形,方括号配双反斜杠
  • 实例代码

    graph TD
    id[\snowflake]

  • 效果展示
    graph TD
    id[\snowflake\]
    

  • 正梯形,方括号配正反斜杠
  • 实例代码

    graph TD
    id[/snowflake]

  • 效果展示
    graph TD
    id[/snowflake\]
    

  • 反体形,方括号配正反斜杠
  • 实例代码

    graph TD
    id[\snowflake/]

  • 效果展示
    graph TD
    id[\snowflake/]
    

  • 节点换行,html
    照样食用
  • 实例代码

    graph TD
    id{snowflake
    snow}

  • 效果展示
    graph TD
    id{snowflake<br>snow}
    

  • 节点显示关键字符号,双引号
  • 实例代码

    graph TD
    id[“(圆括号)”]

  • 效果展示
    graph TD
    id["(圆括号)"]
    

  • 带箭头连线
  • 实例代码

    graph LR
    A–>B

  • 效果展示
    graph LR
    A-->B
    

  • 无箭头连线
  • 实例代码

    graph LR
    A—B

  • 效果展示
    graph LR
    A---B
    

  • 带文字无箭头连线
  • 实例代码

    graph LR
    A–text—B
    C—|TEXT|D
    % 两种食用方式

  • 效果展示
    graph LR
    A--text---B
    C---|TEXT|D
    

  • 带箭头虚线连线
  • 实例代码

    graph LR
    A-.->B

  • 效果展示
    graph LR
    A-.->B
    

  • 带文字箭头虚线连线
  • 实例代码

    graph LR
    A-.text.->B

  • 效果展示
    graph LR
    A-.text.->B
    

  • 无箭头粗线连接
  • 实例代码

    graph LR
    A===B

  • 效果展示
    graph LR
    A===B
    

  • 箭头粗线连接
  • 实例代码

    graph LR
    A==>B

  • 效果展示
    graph LR
    A==>B
    

  • 箭头文字粗线连接
  • 实例代码

    graph LR
    A==text==>B

  • 效果展示
    graph LR
    A==text==>B
    

  • 链式连接
  • 实例代码

    graph LR
    A–文字–>B–文字–>C–文字–>D

  • 效果展示
    graph LR
    A--文字-->B--文字-->C--文字-->D
    

  • 逻辑&连接
  • 实例代码

    graph TB
    A & B–>C & D
    a–>b & c–>d
    %注意空格缩进!

  • 效果展示
    graph TB
    A & B-->C & D
       a-->b & c-->d
    

  • 综合实例

    graph TD
    n1[数学知识] –记忆请求–> n2
    n2(脑子运转) –> n3{神经分发}
    n3 –困难–> n4[A]

      n4 --"转发"--> web[G]
    

    n3 –困难–> n5[B]

      n5 --"转发"--> web
    

    n3 –困难–> n6[C]

      n6 --"转发"--> web
    

    n3 –简单–> n7[D]
    n3 –困难–> n8[E]
    n3 –困难–> n9[F]
    n7 –> n10{记住了吗}

     n10 --是-->n11[I]
     n10 --否-->n12[J]
    
  • 效果展示
    graph TD
      n1[数学知识] --记忆请求--> n2
      n2(脑子运转) --> n3{神经分发}
      n3 --困难--> n4[A]
          n4 --"学不会"--> bin[bin]
      n3 --困难--> n5[B]
          n5 --"学不会"--> bin
      n3 --困难--> n6[C]
          n6 --"学不会"--> bin
      n3 --简单--> n7[D]
      n3 --困难--> n8[E]
      n3 --困难--> n9[F]
      n7 --> n10{记住了吗}
         n10 --是-->n11[I]
         n10 --否-->n12[bin]
    
  • 简化版
  • 实例代码

    graph TD
    n1[数学知识] –记忆请求–> n2
    n2(脑子运转) –> n3{神经分发}
    n3–困难–>n4[A] & n5[B] & n6[C] & n7[D] & n8[E] & n9[F]
    n4 & n5 & n6 –学不会–> n13[垃圾桶]
    n7 –> n10{记住了吗}

     n10 --是-->n11[学废了]
     n10 --否-->n13
    
  • 效果展示
    graph TD
    n1[数学知识] --记忆请求--> n2
    n2(脑子运转) --> n3{神经分发}
    n3--困难-->n4[A] & n5[B] & n6[C] & n7[D] & n8[E] & n9[F]
    n4 & n5 & n6 --学不会--> n13[垃圾桶]
    n7 --> n10{记住了吗}
       n10 --是-->n11[学废了]
       n10 --否-->n13
    

序列图实操

  • 关键字
    • sequenceDiagram: 开启序列图的方式
    • participant: 定义序列图中对象
    • actor: 一个比较Q的图样,定义序列图对象
    • activate: 用以开启或结束交互
    • Note: [right of |left of | over][Actor]
    • loop: 循环
    • alt else end opt: 条件语句
    • par and end: 并列架构
    • Message: 信息传递,语法为

      [actor][arrow][actor]: message text
      arrow支持六种形式

      -> 粗线无箭头
      –> 虚线无箭头
      ->> 粗线有箭头
      –>> 虚线有箭头
      -x 带×的实线
      –x 带x的虚线
      -) 带开箭头的实线
      –) 带开箭头的虚线

  • 箭头样式实例
    sequenceDiagram
    participant A
    participant B
    A -> B: 干饭?
    B --> A: 吃啥?
    A ->> B: 烤肉!
    B -->> A: 太贵啦!
    A -x B: 不行,说好了的!
    B --x A: 等发工资了嘛
    A -) B: 行吧
    B --) A: 所以吃啥? 
    

  • Activate
  • 实例代码

    sequenceDiagram
    A->>B: Hello
    activate B
    B–>> A: Hello!
    deactivate B
    也可以这么写
    sequenceDiagram
    C->>+B hello % +表示激活
    B–>>-C hello % -表示失活

  • 效果展示
    sequenceDiagram
    A->>B: Hello
    activate B
    B-->>A: Hello!
    deactivate B
    C->>+B: hello
    B -)-C: hello
    

  • Note
  • 实例代码

    sequenceDiagram
    actor Ron
    Note right of Ron: note % left of |over | right of

  • 效果展示
    sequenceDiagram 
    actor Ron
    Note right of Ron: note1
    Note over Ron: note2
    Note left of Ron: note3
    

  • loop
  • 实例代码

    sequenceDiagram
    participant wsy
    participant zlh
    loop Every day

    zlh->>wsy: wsyyyds!
    

    end

  • 效果展示
    sequenceDiagram
    participant wsy
    participant zlh
    loop Every day
        zlh->>wsy: wsyyyds!
    end
    

  • Alt
  • 实例代码

    sequenceDiagram
    Wsy-)Zlh: 大佬在搞啥
    alt is studying
    Wsy->>Zlh: 卷
    else if playing
    Wsy–>Zlh: 寓学于玩
    end
    opt Extra response
    Wsy–)Zlh: 牛哇牛哇
    end

  • 效果展示
    sequenceDiagram
    Actor Wsy
    Actor Zlh
    Wsy-)Zlh: 大佬在搞啥
    alt  studying
      Wsy->>Zlh: 卷
    else  playing
      Wsy-->Zlh: 寓学于玩
    end
    opt Extra response
      Wsy--)Zlh: 牛哇牛哇
    end
    

  • Parallel
  • 实例代码

    sequenceDiagram
    par mmr to mr
    mmr–>mr: hello mr
    and mmr to wsy
    mmr–>wsy hello wsy
    end
    实例二 套娃
    sequenceDiagram
    par Alice to Bob

      Alice->>Bob: Go help John
    

    and Alice to John

      Alice->>John: I want this done today
      par John to Charlie
          John->>Charlie: Can we do this today?
      and John to Diana
          John->>Diana: Can you help us today?
      end
    

    end

  • 效果展示
    sequenceDiagram
    par mmr to mr
    mmr-->mr: hello mr 
    and mmr to wsy
    mmr-->wsy: hello wsy
    end
    
    sequenceDiagram
      par Alice to Bob
          Alice->>Bob: Go help John
      and Alice to John
          Alice->>John: I want this done today
          par John to Charlie
              John->>Charlie: Can we do this today?
          and John to Diana
              John->>Diana: Can you help us today?
          end
      end
    

  • sequenceNumbers:添加autonumber
  • 实例代码

    sequenceDiagram
    autonumber
    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!

  • 效果展示
    sequenceDiagram
      autonumber
      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!
    

饼图

  • 语法架构
    • pie 开启饼图
    • title 命名饼图(可选)
    • label 用”xx”包裹的饼图组成内容
      • 比如:”不及格人数”: 68
  • 实例代码

    pie
    title 量子力学考试结果分布
    “优秀”: 5
    “及格”: 68
    “挂科”: 43

  • 效果展示
    pie 
    title 量子力学考试结果分布
    "优秀": 5
    "及格": 68
    "挂科": 43
    

分类图

  • 小U应该不常用,不细讲
  • 语法架构
    • classDiagram 开启
    • class classname 命名类
    • classmember 类成员
  • 类成员关系
  • 实例代码

    classDiagram 反向
    classA <|– classB
    classC *– classD
    classE o– classF
    classG <– classH
    classI – classJ
    classK <.. classL
    classM <|.. classN
    classO .. classP

classDiagram 正向
classA –|> classB : Inheritance
classC –* classD : Composition
classE –o classF : Aggregation
classG –> classH : Association
classI – classJ : Link(Solid)
classK ..> classL : Dependency
classM ..|> classN : Realization
classO .. classP : Link(Dashed)

  • 效果展示
    classDiagram
    classA <|-- classB
    classC *-- classD
    classE o-- classF
    classG <-- classH
    classI -- classJ
    classK <.. classL
    classM <|.. classN
    classO .. classP
    
    classDiagram 
    classA --|> classB : Inheritance
    classC --* classD : Composition
    classE --o classF : Aggregation
    classG --> classH : Association
    classI -- classJ : Link(Solid)
    classK ..> classL : Dependency
    classM ..|> classN : Realization
    classO .. classP : Link(Dashed) 
    

其他的图样小U应该不会用到,就先不写啦,更多详情可以点击下方链接前往mermaid官网查看


您阅读这篇文章共花了:
Invitation
USTC-茶糜花开
FeynmanDirac
created:12/03/2022
Welcome to USTC-茶糜花开

This is an identification card as an honored membership of FeynmanDirac

Happy to see you follow FeynmanDirac, enjoy science together

© 版权声明
验证码启动中...