Mermaid 使用文本来构建UML流程图,类似于 Markdown 的降介文档,用javascript来生成 UML 图。 官方文档

plantuml 类似,都是属于降介文本格式输出类似 dot 图形。

嵌入使用

https://cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js
  1. 使用默认的渲染,引入js 后,将文本放入 div.mermaid 中,让 Mermaid 自动渲染。
<div class="mermaid"> 
graph LR;
    A-->B;
    B-->C; 
</div>
graph LR;
    A-->B;
    B-->C; 
  1. 手动渲染,在需要加入事件定义的时候使用。
  $uml = document.querySelectorAll('.language-uml');
  $uml.forEach(function (item, index) {
     // 渲染 svg id=mermaid+index 
     mermaid.render('mermaid-' + index, item.innerText, (dataSVG) => {
           //....
     });
  });

可以查看当前页面 init.js 中的 uml 处理

流程图

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

Graph

  • TB - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
  • TD - same as TB

上下

graph TD
    Start --> Stop

左右

graph LR 
    Start --> Stop

节点和形状

节点 node

graph LR
    id

文字节点 node[...]

graph LR
    id1[This is the text in the box]

圆角文字 (...)

graph LR
    id1(This is the text in the box)

大圆角文字 ([...])

graph LR
    id1([This is the text in the box])

圆柱 [(...)]

graph LR
    id1[(Database)]

圆形 ((...))

graph LR
    id1((This is the text in the circle))

旗标 >...]

graph LR
    id1>This is the text in the box]

菱形 {...}

graph LR
    id1{This is the text in the box}

六角形 {{...}}

graph LR
    id1{{This is the text in the box}}

平行四边形

graph TD
    id1[/This is the text in the box/]
    id2[\This is the text in the box\]

梯形

graph TD
    A[/Christmas\]

    B[\Go shopping/]

连接

  • --> 箭头连接 2
  • --- 单线连接 3
  • -- text --- 注释连接 (左2 右3)
  • ---| text | 注释连接
  • --text--> 2 2
  • --->|text| 3
  • -.-> 虚线
  • -. text .-> 虚线
  • ==> 大箭头 2

支持链式写法 a --> b --> c

graph LR
    A --> B --- C
    C2 -- TEXT --- D
    D -- TEXT --> E
    E2 -.-> F -. TEXT .-> G
    G2 ==> H == TEXT ==> J

使用 & 符号 连接,来减少重复项, 比如下方的

graph TD
    A --> B & C --> D
    a & b --> c & d --> e 

转义

需要转义的字符可以使用 "..." 双引号来处理

graph LR
id1["This is the (text) in the box"]
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

子图 subgraph

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

事件绑定

click node callback
  var callback = function(arg){
      console(arg);
      alert('A callback was triggered');
  }
graph LR;
    A-->B;
    click A callback
    click B "http://erasin.wang" "This is a tooltip for a link"

注释

注释 %% 开始忽略任何语法

graph LR
    %% this is a comment A -- text --> B{node}
   A -- text --> B -- text2 --> C

样式

  • style node style 节点样式
  • classDef className style 声明类
    • class node1,node2 className; 样式附加方式1
    • node:::className 直接在流程中附加样式

style 描述svg 样式 , 来分割; fill 填充色, stroke 线条 stroke-width 线条宽度 color 前置色。
具体参照 svg stroke 属性

graph LR
    id1(Start)-->id2(Stop)-->id3:::className-->id4
    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
    class id4 className;

设置默认

    classDef default fill:#f9f,stroke:#333,stroke-width:4px;

example

graph LR
    A[Hard edge] --Link text--> B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

时序图

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

loop alt opt

甘特图

文档

gantt
    title 甘特图
    dateFormat  YYYY-MM-DD
    section 章节1
    日志1             :a1, 2014-01-01, 30d
    日志2             :after a1  , 20d
    日志3             :after a1 , 11d
    section 章节2
    起始时间2.1       :2014-01-12  , 12d
    日志2.2 task      : 24d

饼状图

pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

类图

classDiagram 标记开始

  • class Name{} 命名类
  • +Attr 属性(在括号内)
    • className: +Attr 属性
  • +Fun() 函数(在括号内)
    • className: +Fun() 函数
    • +Func(a~b~ c) 中使用~替代 <> 表示组织关系 a<b> c
  • class1 <|-- class2 关系隶属

属性方法的权限

  • + Public
  • - Private
  • # Protected
  • ~ Package/Internal

关系

符号关系
<|--Inheritance
*--Composition
o--Aggregation
-->Association
--Link (Solid)
..>Dependency
..>Realization
..Link (Dashed)
classDiagram
     Animal <|-- Duck : 备注
     Animal -- Fish
     Animal <-- Zebra

     Animal: +int age
     Animal: +String gender
     Animal: +isMammal(a~b~ c)
     Animal: +mate()

     class Duck{
         +String beakColor
         +swim()
         +quack()
     }

     class Fish{
         -int sizeInFeet
         -canEat()
     }

     class Zebra{
        <<interface>>
         +bool is_wild
         +run()
     }
  • <<Interface>> To represent an Interface class
  • <<abstract>> To represent an abstract class
  • <<Service>> To represent a service class
  • <<enumeration>> To represent an enum

更多查看

状态图

用来表达状态机

stateDiagram
    IDLE: "正常状态"
    [*] --> IDLE
    IDLE --> [*]

    IDLE --> Jump 
    Jump --> IDLE
    Moving --> Jump : 走动跳动
    Jump --> Moving

    IDLE --> Moving
    Moving --> IDLE
    Moving --> Crash
    Crash --> [*]

备注

stateDiagram
    IDLE: "正常状态"

复合状态

stateDiagram
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }

并发

   stateDiagram
    state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

分组