Markdown mermaid種草(1)_ mermaid簡介

1 為什麼要推薦mermaid

​ 本小白最近特別迷戀markdown及markdown相關的工具. 可能是因為正牌的編程技巧學不會，只能學學這種用來錦上添花（zhuangbility)的技巧. 開個玩笑，好的筆記好的呈現，可以為學習效果添磚加瓦.

​ Markdown語言怎麼說呢，簡直可以說是程序員之友了. 不管是github還是你現在正在查看的CSDN，以及各種筆記類產品，都支持這種圖文並茂的編輯格式. 本小白首先推薦一款人人都推薦的markdown神器typora，這款產品目前是我使用markdown語言的主打產品，在體會了幾種線上編輯器和幾種筆記類軟件之後，我還是覺得typora是本地端markdown編輯器的最優解（本小白個人見解，高手輕噴）.

​ 言歸正傳，來講本篇的主角mermaid. 本小白之前以為，markdown也只能在文本、錶格層面耍得很精彩了，直到最近偶然間發現了mermaid這個markdown語言的加成神器.

​ 可以說，mermaid基本上滿足了程序員對工作中常用圖錶的編輯需求.沖這一點，就值得本小白的牆裂推薦.

2 mermaid簡介

​ 直接先上一個mermaid的主頁：mermaid傳送門.

​ mermaid目前提供了以下類型的圖形繪制：

編號	英文圖名	中文圖名
1	Flowchart	流程圖
2	Sequence Diagram	序列圖
3	Class Diagram	類圖
4	State Diagram	狀態圖
5	Entity Relationship Diagram	實體關系圖
6	User Journey	流水賬
7	Gantt	甘特圖
8	Pie Chart	餅圖

Mermaid lets you represent diagrams using text and code.

​ mermaid的目標是讓你可以用文本編輯器和代碼來繪制圖錶. OK，既然是簡介，那就每種圖來一個示例吧(以下示例摘抄來的，沒有版權保護)：

感謝CSDN支持了mermaid的多數繪圖，但是甘特圖是不是沒有支持？？？

2.1 流程圖

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

2.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!

2.3 類圖

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

2.4 狀態圖

   stateDiagram-v2
    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 --> [*]

2.5 實體關系圖(ER圖)

erDiagram
    CUSTOMER ||--o{
     ORDER : places
    ORDER ||--|{
     LINE-ITEM : contains
    CUSTOMER }|..|{
     DELIVERY-ADDRESS : uses

2.6 用戶體驗地圖

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

2.7 甘特圖

gantt
dateFormat  YYYY-MM-DD
axisFormat  %m-%d
title Adding GANTT diagram to mermaid
excludes weekdays 2021-01-10

section A section
Completed task            :done,    des1, 2021-01-16,2021-01-28
Active task               :active,  des2, 2021-01-29, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

2.8 餅圖

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