用文字“畫出”流程圖：用 AI+Mermaid.js 構建出你心中的視覺化世界

敏编程發表於2024-10-10
流程圖AIJS視覺化

Mermaid介紹

首先，什麼是 Mermaid?
Mermaid.js 是一款開源 流程圖/序列圖 的文字製作工具，
它允許你使用簡單的文字語法來建立各種型別的圖表。

無論你是開發者、學生還是普通使用者，
Mermaid.js 都能幫助你將複雜的資訊以直觀、易懂的方式呈現出來。

在AI技術的加持下，Mermaid 現已支援把使用者內容自動轉成對應的文字語法， 從而達到自動生成流程圖的目地。
這不僅提高了工作效率，還使非專業使用者也能輕鬆建立複雜的圖表。

訪問 中文Mermaid 體驗 AI + Mermaid.js，構建出你心中的視覺化世界。

Mermaid示例

文字內容

flowchart TD
    A[開始] --> B[開啟任意門]
    B --> C{選擇目的地}
    C --> D[金字塔]
    C --> E[兵馬俑]
    D --> F[解鎖謎題]
    E --> G[探索迷宮]
    F --> H[回程]
    G --> H[回程]

內容的顯示圖

flowchart TD A[開始] --> B[開啟任意門] B --> C{選擇目的地} C --> D[金字塔] C --> E[兵馬俑] D --> F[解鎖謎題] E --> G[探索迷宮] F --> H[回程] G --> H[回程]

Mermaid語法解釋

第1行：圖表型別與顯示方向

  • 圖表型別：使用 flowchart 來宣告圖表的型別為：流程圖。
  • 顯示方向：
    • TB：從上到下
    • BT：從下到上
    • LR：從左往右
    • RL：從右往左

從第2行起，描述各個節點及其連線關係：

  • 節點定義：
    • id[文字描述]：矩形節點
    • id(文字描述)：圓角矩形節點
    • id{文字描述}：菱形節點
  • 連線線定義：
    • 實線連線：---
    • 虛線連線：-.-
    • 帶箭頭的連線：-->

每一行的描述方式為：起始節點+連線線+目標節點

在上例中：

  • A 是流程的起點。
  • B 是開啟任意門的步驟。
  • C 是一個判斷節點，決定選擇的目的地。
  • D 和 E 分別表示金字塔和兵馬俑。
    最終，所有路徑都匯聚到 H，表示流程結束。

透過這種方式，Mermaid.js 提供了一種簡潔而強大的方法來建立和展示覆雜的資訊流。

相關文章