使用Nontion以獲得更地閱讀體驗:)

收藏前 請先幫我按個like + 追蹤喔

我最在用Notion 作一些紀錄，發現mermaid相當好用，就著手差一些資料，針對常用的語法進行筆記紀錄，參考官網。
可以直接使用 Mermaid Live Editor來創建和編輯圖表。

Mermaid 是一個基於 JavaScript 的圖表繪製工具，允許使用者使用類似於 Markdown 的文字語法來創建和修改複雜的圖表。它支援多種圖表類型，能夠快速生成清晰、易於理解的視覺化圖表。

Mermaid 支援的主要圖表類型及其用途：

• Flowchart（流程圖） : 流程圖用於表示工作流程或過程中的步驟。
• Sequence Diagram（序列圖） : 序列圖用於顯示物件之間的交互作用。
• Class Diagram（類別圖） : 類別圖用於表示系統中的類別、屬性、方法以及類別之間的關係。
• State Diagram（狀態圖） : 狀態圖用於描述系統或物件在不同狀態之間的轉換。
• Entity Relationship Diagram（實體關係圖） : 實體關係圖用於表示資料庫中的實體和它們之間的關係。
• User Journey（使用者旅程） : 使用者旅程圖用於描述使用者在使用產品或服務時的體驗過程。
• Gantt（甘特圖） : 甘特圖用於展示專案排程和任務進度。
• Pie Chart（圓餅圖） : 圓餅圖用於展示數據的比例分佈。
• Quadrant Chart（象限圖） : 象限圖用於將數據點分類到四個象限中，通常用於策略分析。
• Requirement Diagram（需求圖） : 需求圖用於視覺化系統需求和它們之間的關係。
• Gitgraph (Git) Diagram（Git 圖） : Git 圖用於展示 Git 分支和合併歷史。
• C4 Diagram（C4 圖） : C4 圖是用於視覺化軟體架構的一系列圖表，包括系統內容圖、容器圖、元件圖和程式碼圖。它提供了一種結構化的方法來描述和溝通軟體系統的架構。
• Mindmaps（思維導圖） : 思維導圖用於視覺化想法和概念之間的關係，有助於組織思維和規劃。
• Timeline（時間軸） : 時間軸圖用於顯示事件按時間順序的排列，適合展示歷史事件或項目進度。
• Zenuml（序列圖的簡化版本） : Zenuml 是一種用於繪製序列圖的簡化語法，使得創建序列圖變得更加直觀和簡單。
• Sankey（桑基圖） : 桑基圖用於描述一組值到另一組值的流向，通常用於展示能量、資源或資金的流動。
• XY Chart（XY 圖表） : XY 圖表用於展示兩個變量之間的關係，適合展示趨勢、模式或異常值。
• Block Diagram（區塊圖） : 區塊圖用於表示系統的主要部分或功能，以及它們之間的關係。

2. Flowchart（流程圖）

2.1 介紹

流程圖用於表示工作流程或過程中的步驟。

2.2 基本語法

flowchart TD
    A(開始) --> B{是否有咖啡?}
    B -->|是| C[[繼續工作]]
    B -->|否| D[去買咖啡]
    D --> C
    C --> E[結束]

3. Sequence Diagram（序列圖）

3.1 介紹

序列圖用於顯示物件之間的交互作用。

3.2 基本語法

sequenceDiagram
    participant 顧客
    participant 服務員
    participant 廚師
    顧客->>服務員: 點餐
    服務員->>廚師: 傳達訂單
    廚師->>服務員: 完成料理
    服務員->>顧客: 上菜

4. Class Diagram（類別圖）

4.1 介紹

類別圖用於表示系統中的類別、屬性、方法以及類別之間的關係。

4.2 基本語法

classDiagram
    class 動物 {
        +名稱: 字串
        +年齡: 整數
        +吃()
        +睡覺()
    }
    class 狗 {
        +吠叫()
    }
    class 貓 {
        +喵喵叫()
    }
    動物 <|-- 狗
    動物 <|-- 貓

5. State Diagram（狀態圖）

5.1 介紹

狀態圖用於描述系統或物件在不同狀態之間的轉換。

5.2 基本語法

stateDiagram-v2
    [*] --> 閒置
    閒置 --> 運行: 開始
    運行 --> 暫停: 暫停
    暫停 --> 運行: 繼續
    運行 --> 停止: 停止
    停止 --> [*]

6. Entity Relationship Diagram（實體關係圖）

6.1 介紹

實體關係圖用於表示資料庫中的實體和它們之間的關係。

6.2 基本語法

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

7. User Journey（使用者旅程）

7.1 介紹

使用者旅程圖用於描述使用者在使用產品或服務時的體驗過程。

7.2 基本語法

journey
    title 購物體驗
    section 瀏覽商品
      進入網站: 5: 顧客
      搜索商品: 3: 顧客
      查看商品詳情: 4: 顧客
    section 購買
      加入購物車: 5: 顧客
      結帳: 3: 顧客, 系統
      付款: 4: 顧客, 系統
    section 收貨
      等待送貨: 2: 顧客
      收到商品: 5: 顧客

8. Gantt（甘特圖）

8.1 介紹

甘特圖用於展示專案排程和任務進度。

8.2 基本語法

gantt
    title 專案進度表
    dateFormat  YYYY-MM-DD
    section 規劃階段
    需求分析    :a1, 2023-01-01, 7d
    架構設計    :a2, after a1, 5d
    section 開發階段
    程式開發    :a3, after a2, 15d
    單元測試    :a4, after a3, 5d
    section 測試階段
    整合測試    :a5, after a4, 7d
    使用者測試  :a6, after a5, 5d
    section 部署階段
    系統部署    :a7, after a6, 3d
    使用者培訓  :a8, after a7, 2d

9. Pie Chart（圓餅圖）

9.1 介紹

圓餅圖用於展示數據的比例分佈。

9.2 基本語法

pie title 收入來源分佈
    "薪資" : 50
    "投資" : 30
    "副業" : 15
    "其他" : 5

10. Quadrant Chart（象限圖）

10.1 介紹

象限圖用於將數據點分類到四個象限中，通常用於策略分析。

10.2 基本語法

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

11. Requirement Diagram（需求圖）

11.1 介紹

需求圖用於視覺化系統需求和它們之間的關係。

11.2 基本語法

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    functionalRequirement test_req2 {
    id: 1.1
    text: the second test text.
    risk: low
    verifymethod: inspection
    }

    performanceRequirement test_req3 {
    id: 1.2
    text: the third test text.
    risk: medium
    verifymethod: demonstration
    }

    interfaceRequirement test_req4 {
    id: 1.2.1
    text: the fourth test text.
    risk: medium
    verifymethod: analysis
    }

    physicalRequirement test_req5 {
    id: 1.2.2
    text: the fifth test text.
    risk: medium
    verifymethod: analysis
    }

    designConstraint test_req6 {
    id: 1.2.3
    text: the sixth test text.
    risk: medium
    verifymethod: analysis
    }

    element test_entity {
    type: simulation
    }

    element test_entity2 {
    type: word doc
    docRef: reqs/test_entity
    }

    element test_entity3 {
    type: "test suite"
    docRef: github.com/all_the_tests
    }

    test_entity - satisfies -> test_req2
    test_req - traces -> test_req2
    test_req - contains -> test_req3
    test_req3 - contains -> test_req4
    test_req4 - derives -> test_req5
    test_req5 - refines -> test_req6
    test_entity3 - verifies -> test_req5
    test_req <- copies - test_entity2

12. Gitgraph (Git) Diagram（Git 圖）

12.1 介紹

Git 圖用於展示 Git 分支和合併歷史。

12.2 基本語法

---
title: Example Git diagram
---
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit

12.3 進階語法

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit