探索mermaid語法

Mermaid是一種開源的，簡單易學的，支持多種圖表的語義化標記語言。它使用markdown樣式的語法，可以輕鬆地創建流程圖、時序圖、甘特圖等豐富多彩的圖表。

一、基本概念

Mermaid語法是基於markdown語法的，因此它的語法非常簡單易學。它的核心是通過給定節點和關係來定義圖表，節點的類型可以是實體、子流程等等，關係也可以是不同的類型。

  graph LR; //定義一個圖表，LR表示從左到右的方向
      A-->B;  //表示A與B之間有一條箭頭連接，箭頭指向B
      B-->C;  //表示B與C之間有一條箭頭連接，箭頭指向C

在上面的例子中，我們定義了一個從左到右的圖表，由三個節點A、B、C組成，其中A指向B，B指向C。這三個節點之間的關係可以用五種不同的類型表示：

• –>表示單向箭頭
• –>>表示單向箭頭帶label
• ==表示雙向箭頭
• ==>表示雙向箭頭帶label
• –x表示有線段連接的節點關係

使用這些節點類型和關係類型，我們可以輕鬆地創建豐富多彩的圖表。

二、流程圖

流程圖是Mermaid中最基本的圖表類型之一，它通常用於描述一個過程或者系統的流程。下面是一個簡單的流程圖例子：

  graph TB; //定義一個向下的流程圖
      開始-->預處理; //開始節點與預處理節點之間有一個箭頭，箭頭指向預處理
      預處理-->|未完成|處理A;
      預處理-->|已完成|處理B;
      處理A-->處理B; //處理A節點與處理B節點之間有一個箭頭，箭頭指向處理B
      處理B-->結束; //處理B節點與結束節點之間有一個箭頭，箭頭指向結束

在上面的例子中，我們定義了一個向下的流程圖，共有五個節點：開始、預處理、處理A、處理B、結束。其中預處理與處理B之間有兩種不同的關係類型：未完成和已完成，這兩種關係都帶有label。

三、序列圖

序列圖是Mermaid中另一個基本的圖表類型，它通常用於描述多個對象之間的交互過程。下面是一個簡單的序列圖例子：

  sequenceDiagram; //定義一個序列圖
      participant Alice; //定義一個參與者節點，名稱為Alice
      participant Bob; //定義另一個參與者節點，名稱為Bob
      Alice->>Bob: Hello Bob, how are you? //Alice向Bob發送消息
      Bob-->>Alice: I'm fine, thanks. //Bob向Alice返回消息

在上面的例子中，我們定義了一個序列圖，共有兩個參與者節點：Alice和Bob。其中，Alice向Bob發送了一條消息，Bob回復了Alice的消息。

四、甘特圖

甘特圖是Mermaid中比較特殊的一個圖表類型，它通常用於描述一個任務在時間軸上的分布情況。下面是一個簡單的甘特圖例子：

  gantt; //定義一個甘特圖
      dateFormat  YYYY-MM-DD; //定義日期格式
      title 項目計劃; //定義圖表標題
      section 設計; //定義圖表的第一部分，名稱為設計
      開始日期  : 2018-01-01, 2d; //第一段任務的開始日期和天數
      設計階段1 : done, 開始日期, 1d; //第二段任務的開始日期和天數，以及完成狀態
      設計階段2 : done, 設計階段1, 1d; //第三段任務的開始日期和天數，以及完成狀態
      設計階段3 : active, 設計階段2, 2d; //第四段任務的開始日期和天數，以及激活狀態
      section 開發; //定義圖表的第二部分，名稱為開發
      開發階段1 : active, 設計階段3, 3d;
      開發階段2 : 開發階段1, 2d;
      開發階段3 : 開發階段2, 2d;
      section 測試; //定義圖表的第三部分，名稱為測試
      測試階段1 : 開發階段3, 3d;
      測試階段2 : 測試階段1, 2d;
      測試階段3 : 測試階段2, 2d;
      section 部署; //定義圖表的第四部分，名稱為部署
      部署階段1 : 測試階段3, 3d;
      部署階段2 : 部署階段1, 2d;
      部署階段3 : 部署階段2, 2d;
      section 維護; //定義圖表的第五部分，名稱為維護
      維護階段1 : 部署階段3, 3d;
      維護階段2 : 維護階段1, 2d;
      維護階段3 : 維護階段2, 2d;

在上面的例子中，我們定義了一個甘特圖，共有五個部分：設計、開發、測試、部署、維護。每個部分中又包含了不同的任務節點，其中done表示任務已經完成，active表示任務正在進行中。

五、公式圖

Mermaid還支持公式圖，它可以用來描述一些複雜的數學公式。下面是一個簡單的公式圖例子：

  graph TB; //定義一個向下的圖表
      A((x  ))-->B(((y  ))); //定義兩個節點，節點名稱包含一個空格，中間加上< >表示公式圖
      B-->C(( z )); //定義另一個節點，節點名稱包含一個空格，中間加上< >表示公式圖

在上面的例子中，我們定義了三個節點A、B、C，其中節點名稱包含一個空格，中間使用< >符號表示公式圖。

六、結語

通過以上的介紹，我們可以了解到Mermaid是一種簡單易學的標記語言，有著豐富的圖表類型和靈活的語法結構。我們可以利用Mermaid創建各種不同類型的圖表，從而更好地展示我們的想法和數據。