📖 KIGA-Hub

Markdown mermaid usage

ER图 #

|o	o|	0或1
||	||	恰好一个
}o	o{	0 或 更多 (没有上限)
}|	|{	1 或 更多 (没有上限)
  erDiagram
    Equipment ||--|| EquipmentModel : has
    Equipment ||--|{ EquipmentStatusChangeRecord : has
    Warning }o--|| Equipment : relate
    Warning ||--o| Ticket : relate
    Ticket ||--|{ TicketHistory : has
    Ticket ||--|| TicketType : has
    Ticket ||--|| User : has
    TicketHistory ||--o| Transaction : relate
    Ticket }o--|| Equipment : relate
    TicketHistory ||--|| User : has
    TicketHistory ||--|| EquipmentStatusChangeRecord : trigger

    Equipment {
        uuid ID
        string name "名称"
        date createAt "创建时间"
        date updateAt "更新时间"
        int status "状态"
    }
    EquipmentModel {
        uuid ID
        string name "名称"
        date createAt "创建时间"
        date updateAt "更新时间"
        string comment "备注"
    }
    EquipmentStatusChangeRecord {
        uuid ID
        uuid EquipmentID "设备ID 非空"
        int statusA "原状态"
        int statusB "新状态"
        date changeAt "触发时间"
    }
    Ticket {
        uuid ID
        string name "名称"
        date createAt "创建时间"
        date updateAt "更新时间"
        int status "状态"
    }

    TicketHistory {
        uuid ID
        uuid ticketID "工单ID 非空"
        int statusA "原状态"
        int statusB "新状态"
    }

    TicketType {
        uuid ID
        string name "名称"
    }

    Warning {
        uuid ID
        string type "类型"
        date createAt "创建时间"
        date updateAt "更新时间"
        int status "状态"
    }

erDiagram Equipment ||--|| EquipmentModel : has Equipment ||--|{ EquipmentStatusChangeRecord : has Warning }o--|| Equipment : relate Warning ||--o| Ticket : relate Ticket ||--|{ TicketHistory : has Ticket ||--|| TicketType : has Ticket ||--|| User : has TicketHistory ||--o| Transaction : relate Ticket }o--|| Equipment : relate TicketHistory ||--|| User : has TicketHistory ||--|| EquipmentStatusChangeRecord : trigger Equipment { uuid ID string name "名称" date createAt "创建时间" date updateAt "更新时间" int status "状态" } EquipmentModel { uuid ID string name "名称" date createAt "创建时间" date updateAt "更新时间" string comment "备注" } EquipmentStatusChangeRecord { uuid ID uuid EquipmentID "设备ID 非空" int statusA "原状态" int statusB "新状态" date changeAt "触发时间" } Ticket { uuid ID string name "名称" date createAt "创建时间" date updateAt "更新时间" int status "状态" } TicketHistory { uuid ID uuid ticketID "工单ID 非空" int statusA "原状态" int statusB "新状态" } TicketType { uuid ID string name "名称" } Warning { uuid ID string type "类型" date createAt "创建时间" date updateAt "更新时间" int status "状态" }

定义流程图方向 #

可设置4个方向:

  • TD - top-down,从上到下。或者使用TB(top to bottom)
  • BT - bottom to top,从下到上
  • RL - right to left,从右到左
  • LR - left to right,从左到右
flowchart TD
    A --> B

flowchart TD A --> B

flowchart LR
    A --> B

flowchart LR A --> B

节点形状 #

默认节点形状为长方形,也可以设置为其它形状。

flowchart LR A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)] E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}} I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]

多节点连接 #

flowchart LR
    A --> B & C--> D

flowchart LR A --> B & C--> D

flowchart TD
    A & B--> C & D

flowchart TD A & B--> C & D

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

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

可通过增加短横线来增加连线长度。

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]

虚线或粗连线,可增加等号或点来延长连线:

Length 1 2 3
连线 --- ---- -----
箭头 --> ---> ---->
加粗连线 === ==== =====
加粗箭头 ==> ===> ====>
虚线 -.- -..- -...-
虚线箭头 -.-> -..-> -...->

其它类型箭头 #

flowchart LR
    A --o B
    B --x C

flowchart LR A --o B B --x C

flowchart LR
    A o--o B
    B <--> C
    C x--x D

flowchart LR A o--o B B <--> C C x--x D

流程图 #

  flowchart LR```

    subgraph receiver1[Receiver I]
        gnet --> verify --> dispatcher1[dispatcher] --> sender
        dispatcher1 --> cache1[cache] --> websocket1[websocket]
    end
    subgraph receiver2[Receiver II]
        sync --> dispatcher3[dispatcher] --> grpc[grpc client]
        dispatcher3 --> cache3[cache] --> websocket3[websocket]
        kvcache --> websocket3
    end
    hardware & simulator --TCP--> gnet
    sender -.-> sync
    grpc --gRPC--> storage
    websocket1 --> client1[websocket client]
    websocket3 --> client3[websocket client]
    ```

flowchart LR subgraph receiver1[Receiver I] gnet --> verify --> dispatcher1[dispatcher] --> sender dispatcher1 --> cache1[cache] --> websocket1[websocket] end subgraph receiver2[Receiver II] sync --> dispatcher3[dispatcher] --> grpc[grpc client] dispatcher3 --> cache3[cache] --> websocket3[websocket] kvcache --> websocket3 end hardware & simulator --TCP--> gnet sender -.-> sync grpc --gRPC--> storage websocket1 --> client1[websocket client] websocket3 --> client3[websocket client]

饼图 #

Mermaid可以用来渲染饼图:

pie title 标题
    "Dogs" : 38
    "Cats" : 85
    "Rats" : 15

pie title 标题 "Dogs" : 38 "Cats" : 85 "Rats" : 15

左侧值 右侧值 含义
|o o| 0或1
| | 恰好一个
}o o{ 0 或 更多 (没有上限)
}| |{ 1 或 更多 (没有上限)
别名
左侧值 右侧值 Alias for
one or zero one or zero 0或1
zero or one zero or one 0或1
one or more one or more 1 或 更多
one or many one or many 1 或 更多
many(1) many(1) 1 或 更多
1+ 1+ 1 或 更多
zero or more zero or more 0 或 更多
zero or many zero or many 0 或 更多
many(0) many(1) 0 或 更多
0+ 0+ 0 或 更多
only one only one 恰好一个
1 1 恰好一个

类图 #

Mermaid也支持类图

classDiagram
    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()
    }

classDiagram 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() }

状态图 #

Mermaid状态图语法和plantUml一样。

stateDiagram-v2
    state "状态1" as State1
    State2 : 状态2    
    [*] --> State1

    State1 --> State2: 过渡文本
    State2 --> State1
    State2 --> State3
    state State3 {
        [*] --> second
        second --> [*]
    }

stateDiagram-v2 state "状态1" as State1 State2 : 状态2 [*] --> State1 State1 --> State2: 过渡文本 State2 --> State1 State2 --> State3 state State3 { [*] --> second second --> [*] }

甘特图 #

甘特图例子:

gantt
    title 甘特图
    dateFormat  YYYY-MM-DD
    section 项目
    A 项目           :A1, 2022-01-01, 30d
    B 项目     :after A1  , 20d
    section 子任务
    子任务1      :2022-01-12  , 12d
    子任务2      : 24d

gantt title 甘特图 dateFormat YYYY-MM-DD section 项目 A 项目 :A1, 2022-01-01, 30d B 项目 :after A1 , 20d section 子任务 子任务1 :2022-01-12 , 12d 子任务2 : 24d

时序图 #

安装设备

  sequenceDiagram
    participant L as 项目管理
    participant O as 实施人员
    L->>O: 创建安装工单
    Note right of O: 工单的负责人为实施人员
    O->>O: 执行安装工单
    Note right of O: 设备状态变为安装中
    alt 完成安装
        O->>O: 完成安装工单
        Note right of O: 设备状态变为运行
    else 
        O->>O: 废弃安装工单
        Note right of O: 设备状态变为已采购
    end

sequenceDiagram participant L as 项目管理 participant O as 实施人员 L->>O: 创建安装工单 Note right of O: 工单的负责人为实施人员 O->>O: 执行安装工单 Note right of O: 设备状态变为安装中 alt 完成安装 O->>O: 完成安装工单 Note right of O: 设备状态变为运行 else O->>O: 废弃安装工单 Note right of O: 设备状态变为已采购 end

触发预警与维护设备

  sequenceDiagram
    participant S as 平台
    participant M as 监控人员
    participant F as 检修人员
    opt 平台发现情况
        S->>M: 创建预警
        Note right of S: 如果设备已有同类型的非关闭的预警,则更新已有预警
    end
    M->>F: 创建维护工单
    Note right of M: 工单的负责人为检修人员
    F->>F: 执行维护工单
    Note right of F: 设备状态变为检修
    alt 维护完毕
        F->>F: 执行维护工单
        Note right of F: 设备状态变为运行
    else 无法维护
        F->>F: 执行维护工单
        Note right of F: 设备状态变为废弃
    end

sequenceDiagram participant S as 平台 participant M as 监控人员 participant F as 检修人员 opt 平台发现情况 S->>M: 创建预警 Note right of S: 如果设备已有同类型的非关闭的预警,则更新已有预警 end M->>F: 创建维护工单 Note right of M: 工单的负责人为检修人员 F->>F: 执行维护工单 Note right of F: 设备状态变为检修 alt 维护完毕 F->>F: 执行维护工单 Note right of F: 设备状态变为运行 else 无法维护 F->>F: 执行维护工单 Note right of F: 设备状态变为废弃 end

特殊字符 #

如果文本中有字符可以用双引号:

flowchart LR
    A["括号 (text)"]

flowchart LR A["括号 (text)"]

括号 (text)

flowchart LR
    A["括号 [text]"]

flowchart LR A["括号 [text]"]

如果文本中要使用双引号或者其它更多特殊字符,可以使用HTML 实体来表示:

flowchart LR
    A["引号#quot;"]

flowchart LR A["引号#quot;"]

引号"

flowchart LR
    A["美元符号#36;"]

flowchart LR A["美元符号#36;"]

美元符号$

flowchart LR
    A["笑脸#128512;"]

flowchart LR A["笑脸#128512;"]