Jekyll 使用 mermaid 繪製流程圖

mermaid 是使用 JavaScript 開發的圖表工具。 他受到 Markdown 啟發，使用簡易的文字定義，即可動態建立圖表。 本文介紹如何將其嵌入 Jekyll 之中。

目標

將 mermaid 套件加入 jekyll，使用 Markdown 的程式區塊，快速的撰寫並建立圖表

安裝

在頁面上插入

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs'
  mermaid.init({noteMargin: 10}, ".language-mermaid")
</script>

使用方式

這邊舉出一些範例，詳細用法可至 mermaid 官網查詢

另外也有 mermaid live edit 可以線上預覽產生的圖

範例： 使用 mermaid 將語法寫在程式區塊中

```mermaid

flowchart LR
   A –> B

```

flowchart LR
  A --> B

流程圖

flowchart LR
  A[Start] --> B{Is it?}
  B -- Yes --> C[OK]
  C --> D[Rethink]
  D -.-> B
  B -- No ----> E[End]

flowchart LR
  A[Start] --> B{Is it?}
  B -- Yes --> C[OK]
  C --> D[Rethink]
  D -.-> B
  B -- No ----> E[End]

flowchart TD
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

flowchart TD
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

序列圖

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

實體關係圖(ERD)

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

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

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
    }

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
    }

甘特圖

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2023-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2023-01-12  , 12d
    another task      : 24d

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2023-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2023-01-12  , 12d
    another task      : 24d

圓餅圖

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

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

Git 圖

---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit id: "Normal" tag: "v1.0.0"
   commit id: "Reverse" type: REVERSE tag: "RC_1"
   commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"

---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit id: "Normal" tag: "v1.0.0"
   commit id: "Reverse" type: REVERSE tag: "RC_1"
   commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4"

參考

1. mermaid
2. mermaid online playground