Mermaid UML 流程图工具

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

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

嵌入使用

https://cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js

使用默认的渲染，引入js 后，将文本放入 div.mermaid 中，让 Mermaid 自动渲染。

<div class="mermaid"> 
flowchart LR;
    A-->B;
    B-->C; 
</div>

flowchart LR;
    A-->B;
    B-->C;

手动渲染，在需要加入事件定义的时候使用。

  $uml = document.querySelectorAll('.language-uml');
  $uml.forEach(function (item, index) {
     // 渲染 svg id=mermaid+index 
     mermaid.render('mermaid-' + index, item.innerText, (dataSVG) => {
           //....
     });
  });

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

流程图

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

Flowchart

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

上下

flowchart TD
    Start --> Stop

左右

flowchart LR 
    Start --> Stop

节点和形状

节点 node

flowchart LR
    id

文字节点 node[...]

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

圆角文字 (...)

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

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

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

圆柱 [(...)]

flowchart LR
    id1[(Database)]

圆形 ((...))

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

旗标 >...]

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

菱形 {...}

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

六角形 {{...}}

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

平行四边形

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

梯形

flowchart TD
    A[/Christmas\]

    B[\Go shopping/]

连接

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

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

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

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

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

转义

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

flowchart 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

flowchart 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');
  }

flowchart LR;
    A-->B;
    click A callback
    click B "http://erasin.wang" "This is a tooltip for a link"

注释

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

flowchart 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 属性

flowchart 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

flowchart 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 --> [*]

ERASIN

MERMAID UML 流程图工具