摘要

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

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

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

正文

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

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

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

本文参考文档

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

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

一、普通图

方向调整

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

1.1 上下方向

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

image-20230325114218278.png

1.2 左右方向

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

image-20230325114258895.png

二、流程图

2.1 示例一

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

image-20230325095823309.png

2.2 示例二

mermaid 
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]

image-20230325100015621.png

三、时序图

3.1 示例一

mermaid 
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!

image-20230325100550738.png

3.2 示例二

mermaid 
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!

image-20230325100659077.png

四、类图

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

image-20230325101317052.png

4.2 示例二

mermaid 
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

image-20230325101921626.png

五、状态图

5.1 版本一

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

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

image-20230325110000118.png

5.2 版本二

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

image-20230325110135501.png

六、用户行程图

6.1 示例一

mermaid 
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

image-20230325102302141.png

七、饼图

7.1 示例一

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

image-20230325105657753.png

7.2 示例二

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

image-20230325105845257.png