简记美人鱼Mermaid语法发布于2023-03-25 01:19:02，更新于2023-03-28 21:17:56，标签：mermaid 转载随意，文章会持续修订，请注明来源地址：https://meethigher.top/blog

AI时代要到来了，AI不会替代人来，但是能替代效率低的人类。

所以我们应该时刻考虑，如果提高自己的效率。

在Mermaid加持下的Markdown，简直如虎添翼！效率上完胜一批文档高手！

本文参考文档

• Mermaid | Diagramming and charting tool
• mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
• Mermaid实时编辑器

本文不涉及高深技术的探索，只是归档记录一下，方便查询。

且只记录一些常用的流程图，如需更多，请看官网。

一、普通图

方向调整

1. 上下（下上）：TB（BT）
2. 左右（右左）：LR（RL）

1.1 上下方向

graph TB
subgraph 宠物分类
家庭宠物 --> 按时拉屎类
家庭宠物 --> 随吃随拉类
按时拉屎类 --> 别名1(猫)
按时拉屎类 --> 别名2(狗)
随吃随拉类 --> 别名3(鸡鸭龙猫)
随吃随拉类 --会飞--> 别名4(蜜袋鼯)
end

1.2 左右方向

graph LR
subgraph 宠物分类
家庭宠物 --> 按时拉屎类
家庭宠物 --> 随吃随拉类
按时拉屎类 --> 别名1(猫)
按时拉屎类 --> 别名2(狗)
随吃随拉类 --> 别名3(鸡鸭龙猫)
随吃随拉类 --会飞--> 别名4(蜜袋鼯)
end

二、流程图

2.1 示例一

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

2.2 示例二

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

三、时序图

3.1 示例一

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

3.2 示例二

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

四、类图

4.1 示例一

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

4.2 示例二

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

五、状态图

5.1 版本一

stateDiagram
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

5.2 版本二

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

六、用户行程图

6.1 示例一

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

七、饼图

7.1 示例一

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

7.2 示例二

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