Mermaid 使用

博客添加了 mermaid 的支持

流程图

时序图以 graph 开头，后面跟随一个绘图方向

TB 从上到下
TD 从上到下
BT 从下到上
RL 从右到左
LR 从左到右

接下来，任意的单词都可以创建一个节点（节点后可以使用括号包裹修改显示的文本）

默认节点形状为矩形，要修改形状，可以在其后使用不同的括号

[ ]: 矩形
( ): 圆角矩形
[( )]: 圆柱形
([ ]): 椭圆形
[[ ]]: 子程序
(( )): 圆形
> ]: 不对称图形
{ }: 菱形
{{ }}: 六边形
[/ /]: 平行四边形
[/ \]: 梯形
[\ /]: 倒梯形

节点之间的连线则由 -、=、.、> 构成，如果不带 > 则为无向连线，否则为有向连线，线的字符越多，则线越长

使用 subgraph one 和 end 包裹，可以实现子图

使用 style <节点 ID> <style> 可以如同前端一样修改节点样式
当然，也可以使用 classDef <类名> <style> 定义类名，并且使用 class <节点 ID> <类名> 来为对应的节点设置类
其中，所有的 style 使用 svg 的 css 写法，并且使用 , 分割

graph TB
    a[矩形] --> b(圆角矩形)
    c[(圆柱)] --- d([椭圆])
    e[[子程序]] -- 文本 --- f((圆形))
    g>不对称形状] -- 文本 --> h{菱形}
    i{{六边形}} -.-> j[/平行四边形/]
    k[/梯形\\] -.- l[\\倒梯形/]

    b === c
    f ==> g

    subgraph one
        i 
        j
        k
        l
    end

    style a fill:#f9f,stroke:#333,stroke-width:4px
    classDef red fill:red,color:white;
    class b,c red

时序图

以 sequenceDiagram 开头
可以使用 participant <ID> as <名称> 来定义时序对象
而后，使用 <对象><箭头><对象>:<消息> 来定义时许关系

使用 activate John 和 deactivate John 可以触发一段时许的激活状态，也可以在箭头后添加 + 和 - 实现类似的效果

使用 Note right of <对象>: <文本> 可以在对应位置添加笔记

使用 loop <名称> 和 end 可以定义一段循环
使用 alt <条件>、else、end 可以定义分支
使用 opt <条件> 和 end 可以定义可选项
使用 par <行为>、and <行为>、end 可以定义并行操作
使用 rect rgb(0, 255, 0) 和 end 可以定义背景颜色

sequenceDiagram
    participant a as Alice
    participant b as Bob

    loop loop
        rect rgb(0, 200, 200)
            a->>+b: How are you?
            Note over a, b: 1234
            Note left of b : 5678
            b-->>-a: I am fine, thank you, and you?
        end
            a-)b: Me too.
            a->>a:  
    end

类图

以 classDiagram 开始，与状态图类似，区别在于可以使用 class 定义一个类

类内使用以下符号定义访问控制

符号	定义
`+`	公有
`-`	私有
`#`	保护
`~`	内部
`*`	虚
`$`	静态

符号	定义
`<\|--`	继承
`*--`	组合
`o--`	聚合
`-->`	关联
`--`	连接
`..>`	依赖
`..\|>`	实现
`..`	连接

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

状态图

以 stateDiagram-v2 开始，使用 [*] 作为起终点

使用 state 可以递归定义子状态，并且使用 -- 和 <<fork>> 可以表示并发执行

stateDiagram-v2
    state fork_state <<fork>>

    [*] --> fork_state
    fork_state --> State2 : 1234
    fork_state --> State3

    state State3 {
        [*] --> fir
        fir --> [*]
        --
        [*] --> sec
        sec --> [*]
    }

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4

    note right of State4
        Important information! You can write
        notes.
    end note

    State4 --> [*]

ER 图

以 erDiagram 开头，与类图类似

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

用户旅程图

以 journey 开头

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

甘特图

以 gantt 开头

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    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                      :1d

    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

饼图

以 pie 开头

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