Handy Orchard

Mermaid 圖表預覽

在本機預覽限定語法的 Mermaid 流程或時序圖,下載實際 SVG。

輸入資料

以 flowchart TB/TD/LR/RL/BT 或 sequenceDiagram 開始,每敘述一節點或 A --> B;標籤用 [ ]、( ) 或 { }。時序支援 participant/actor 與訊息箭頭。

輸入變更時會清除舊輸出。

結果

輸入資料或帶入範例,再執行工具。

計算範例

flowchart TB 搭配 A[開始] --> B{核對}、B --> C[完成],產生三個相連節點。

sequenceDiagram 加 participant A、participant B 與 A->>B: 你好,產生參與者間訊息。

方法

固定 Mermaid 版本以嚴格安全設定、純 SVG 標籤與 Dagre 布局解析及繪製已驗證子集。

獨立渲染器清理 SVG 並加固定深色背景,不使用遠端圖片、連結或執行期 CDN。

適用限制

最多 8,000 字元與 100 敘述、60 流程節點或 20 時序參與者、80 邊/訊息,節點識別字限 ASCII。

不支援子圖、迴圈、指令、自訂樣式、HTML、互動連結或其他 Mermaid 圖型;並非可硬中止的 Worker 渲染。

來源

實際固定上游原始碼第三方授權聲明

相關工具

節點網路視覺分析SVG 路徑節點編輯JavaScript 語法樹檢視

輸入資料留在此裝置。只有經您同意的選擇性瀏覽量會被統計;計算值、檔案、檔名與處理日誌不送至 Analytics。

切換語言時,文字、設定與選取檔案會暫存於此裝置,還原後移除;中斷的暫存會於後續造訪清理。輸入與檔案不會上傳。