部落格園支援 mermaid

• 2022 年 3 月 3 日
• 筆記
• Markdown

部落格園支援 mermaid

Mermaid 簡介

Mermaid是一種基於Javascript的繪圖工具，使用類似於Markdown的語法，使用戶可以方便快捷地通過程式碼創建圖表

平時寫部落格時可以使用Markdown編寫，嵌入Mermaid能讓閱讀體驗更佳

在 Markdown 中使用 Mermaid

    ```mermaid
    繪圖類型    
        Mermaid語句
    ```

支援繪圖類型

• 流程圖：使用graph關鍵字
• 序列圖：使用sequenceDiagram關鍵字
• 類圖：使用classDiagram關鍵字
• 狀態圖：使用stateDiagram關鍵字
• 實體關係圖：使用erDiagram關鍵字
• 用戶旅程圖：使用journey關鍵字
• 甘特圖：使用gantt關鍵字
• 餅狀圖：使用pie關鍵字
• 需求圖：使用requirementDiagram關鍵字

注意：使用中文可能會出現異常

實例展示：

    ```mermaid
    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"
    ```

類圖

流程圖 簡視

流程圖是使用 flowchart LR

• 設置節點

flowchart LR

    節點名稱[節點內容]

如果沒有設置[節點內容]，默認為節點名稱

例子：

    ```mermaid
    flowchart LR

        id
    ```

    ```mermaid
    flowchart LR

        id[This is the text in the box]
    ```

• 流程式控制制

  不同的流程式控制制會有不同的效果

  • TD – 自上而下/與TB相同
  • TB – 從上到下
  • BT – 從下而上
  • RL – 從右到左
  • LR – 從左到右

flowchart 流程式控制制

    節點名稱[節點內容] --> 節點名稱[節點內容]

例子：

    ```mermaid
    flowchart TD

        Start --> Stop
    ```

    ```mermaid
    flowchart LR

        id1[box1] --> id2[box2]
    ```

• 節點形狀

    ```mermaid
    flowchart LR
        id1(This is the text in the box)
    ```

    ```mermaid
    flowchart LR
        id1((This is the text in the circle))
    ```

對於括弧可以使用() [] {} / \進行組合，/ \ 只能內層不可單獨使用

比如：[/文本\]

    ```mermaid
    flowchart LR
        id[/文本\]
    ```

總之Mermaid的內容很多在此不在繼續介紹

拒絕伸手黨，下面自助
建議自行探索mermaid官網資料