我可以在節點中使用非英文的文字嗎？

可以。Mermaid.js 支援 Unicode，因此您可以在節點中使用包含繁體中文、日文等任何語言。

如果圖表超出了預覽區域怎麼辦？

預覽區域支援水平和垂直捲動。您也可以嘗試將版面方向從 "graph TD" (由上而下) 變更為 "graph LR" (由左至右)，以獲得更好的顯示效果。

我的圖表會被傳送到伺服器嗎？

不會。所有的渲染工作都是使用 Mermaid.js 在您的瀏覽器中本地處理，圖表內容絕對不會傳送到任何外部伺服器。

SVG 和 PNG 有什麼不同？

SVG 是一種向量格式，可以無限放大而不失真，非常適合用於簡報、列印或嵌入網頁中。PNG 是一種點陣格式，在您需要直接貼上圖片時很方便。

我可以繪製流程圖以外的圖表嗎？

可以。Mermaid.js 支援循序圖 (sequenceDiagram)、類別圖 (classDiagram)、甘特圖 (gantt) 等多種圖表類型。

我可以儲存程式碼並稍後回來編輯嗎？

目前版本不會跨工作階段保留您的程式碼。若要稍後編輯，請從文字區域複製您的 Mermaid 程式碼並將其儲存在本地端。

📈

text to flowchart,

文字轉流程圖

輸入 Mermaid 語法即可即時產生流程圖與各類圖表。無伺服器參與 — 100% 本地端處理。

🔒

無需上傳伺服器

您的圖表始終保留在您的裝置上

⚡

即時預覽

邊打字邊即時更新預覽

💾

SVG / PNG 匯出

即時儲存高品質圖片

完全本地端處理 — 您的圖表絕不會離開瀏覽器

輸入 Mermaid 程式碼

預覽

推薦工具

⏳

Cron 表達式產生器

🧩

JSON 轉 TS 介面

🔒

HTTP 標頭檢查器

about,

關於本工具

文字轉流程圖是一個免費的瀏覽器工具，它可以利用 Mermaid 語法，透過簡單的文字自動產生流程圖、循序圖等。

所有的渲染工作都在本地端使用 Mermaid.js 執行 — 絕不會將任何資料傳送至外部伺服器，對於機密工作流程與系統架構設計來說非常安全。

您可以將圖表即時匯出為 SVG (向量) 或 PNG (點陣) 格式。無需安裝應用程式 — 只要打開瀏覽器即可開始繪製圖表。

how to,

使用方法

STEP 1

輸入您的程式碼

在左側的編輯器中輸入 Mermaid 語法。我們已經預先填入了一個範例圖表，幫助您快速上手。

STEP 2

即時檢視

右側的預覽區會即時更新。如果有語法錯誤，將會顯示實用的錯誤訊息。

STEP 3

儲存為 SVG 或 PNG

點擊「儲存 SVG」或「儲存 PNG」，直接將圖表下載到您的裝置。

glossary,

名詞解釋

Mermaid.js: 一種將文字語法轉換為圖表的 JavaScript 程式庫，並受到 GitHub Markdown 的官方支援。
流程圖 (Flowchart): 表示處理過程或工作流程的圖表。在 Mermaid 中使用 graph TD (由上而下) 或 graph LR (由左至右) 來建立。
SVG (可縮放向量圖形): 與解析度無關的向量影像格式。SVG 可縮放至任何大小而不失真，是簡報和列印的理想選擇。
節點 (Node): 圖表中的每個元素 (矩形、圓形、菱形等)。在 Mermaid 中定義為 A[標籤文字]。
邊 (Edge): 連接節點的箭頭或線條。在 Mermaid 中表示為 --> (箭頭) 或 --- (線條)。
循序圖 (Sequence Diagram): 顯示參與者之間隨時間互動的圖表。在 Mermaid 中使用 sequenceDiagram 建立。

faq,

常見問題

Q.我可以在節點中使用非英文的文字嗎？: 可以。Mermaid.js 支援 Unicode，因此您可以在節點中使用包含繁體中文、日文等任何語言。
Q.如果圖表超出了預覽區域怎麼辦？: 預覽區域支援水平和垂直捲動。您也可以嘗試將版面方向從 "graph TD" (由上而下) 變更為 "graph LR" (由左至右)，以獲得更好的顯示效果。
Q.我的圖表會被傳送到伺服器嗎？: 不會。所有的渲染工作都是使用 Mermaid.js 在您的瀏覽器中本地處理，圖表內容絕對不會傳送到任何外部伺服器。
Q.SVG 和 PNG 有什麼不同？: SVG 是一種向量格式，可以無限放大而不失真，非常適合用於簡報、列印或嵌入網頁中。PNG 是一種點陣格式，在您需要直接貼上圖片時很方便。
Q.我可以繪製流程圖以外的圖表嗎？: 可以。Mermaid.js 支援循序圖 (sequenceDiagram)、類別圖 (classDiagram)、甘特圖 (gantt) 等多種圖表類型。
Q.我可以儲存程式碼並稍後回來編輯嗎？: 目前版本不會跨工作階段保留您的程式碼。若要稍後編輯，請從文字區域複製您的 Mermaid 程式碼並將其儲存在本地端。

use cases,

使用場景

📐

系統設計文件

使用 Mermaid 記錄 API 呼叫流程或資料庫架構，並將其直接嵌入到技術文件中。

📋

會議記錄與工作流程

快速將會議中討論的工作流程或簽核流程視覺化，並與團隊分享。

🎤

簡報投影片

當您覺得在 PowerPoint 裡畫圖太慢時，可在 Mermaid 中繪製、匯出成 PNG，然後直接貼入投影片中。

📚

教育與學習教材

將演算法步驟或時間軸視覺化為流程圖，製作更容易理解的學習教材。

mermaid syntax,

Mermaid 語法

基本流程圖 (`graph`)

graph TD
  A[開始] --> B{條件}
  B -->|是| C[處理程序 A]
  B -->|否| D[處理程序 B]
  C --> E[結束]
  D --> E

循序圖 (`sequenceDiagram`)

sequenceDiagram
  User->>Server: 登入請求
  Server->>DB: 驗證憑證
  DB-->>Server: 回傳結果
  Server-->>User: 登入成功

節點形狀參考

A[文字] — 矩形 (Rectangle)

B(文字) — 圓角 (Rounded)

C{文字} — 菱形 (Diamond)

D((文字)) — 圓形 (Circle)

E>文字] — 不對稱 (Asymmetric)

F[(資料庫)] — 資料庫 (Database)

文字轉流程圖

Cron 表達式產生器

JSON 轉 TS 介面

HTTP 標頭檢查器

關於本工具

使用方法

輸入您的程式碼

即時檢視

儲存為 SVG 或 PNG

名詞解釋

常見問題

使用場景

系統設計文件

會議記錄與工作流程

簡報投影片

教育與學習教材

Mermaid 語法

基本流程圖 (`graph`)

循序圖 (`sequenceDiagram`)

節點形狀參考

相關工具

Cron 表達式產生器

JSON 轉 TS 介面

HTTP 標頭檢查器

Markdown ⇔ HTML 轉換器

JSON 格式化與驗證器

檔案大小計算機

密碼強度檢查器

密碼產生器

ZIP 密碼工具

所有工具分類

Send Feedback

Feedback is temporarily suspended

免責聲明

文字轉流程圖

Cron 表達式產生器

JSON 轉 TS 介面

HTTP 標頭檢查器

關於本工具

使用方法

輸入您的程式碼

即時檢視

儲存為 SVG 或 PNG

名詞解釋

常見問題

使用場景

系統設計文件

會議記錄與工作流程

簡報投影片

教育與學習教材

Mermaid 語法

基本流程圖 (graph)

循序圖 (sequenceDiagram)

節點形狀參考

相關工具

Cron 表達式產生器

JSON 轉 TS 介面

HTTP 標頭檢查器

Markdown ⇔ HTML 轉換器

JSON 格式化與驗證器

檔案大小計算機

密碼強度檢查器

密碼產生器

ZIP 密碼工具

所有工具分類

Send Feedback

Feedback is temporarily suspended

免責聲明

基本流程圖 (`graph`)

循序圖 (`sequenceDiagram`)