Mermaid Live Editor是一款工具，可讓您通過簡單文本實時編輯和預覽流程圖、計時圖和日曆圖。
您可以將編輯後的內容保存為JPEG格式，並且可以輕鬆共享連結以查看或編輯內容。您可以通過Docker或使用Node.js和pnnPM在本地運行它。
使用此工具的優點是，您可以快速創建、協作和更新圖表，而無需繪圖工具，從而更快、更輕鬆地記錄文檔並與團隊協作
在技術文檔、系統設計和知識表達中，「繪圖」往往不是最困難的部分， 但困難在於保持結構的準確性、可重用性和可維護性.
這正是 美人魚現場編輯 項目就是一切。
項目定位
美人魚現場編輯 是一 在線實時編輯器 由美人魚正式提供：
- 編寫美人魚文本語法
- 實時渲染結構化圖表
- 輸出/共享/驗證圖表結果
它不是一個「繪圖軟體」，而是一個 語法驅動的視覺驗證環境（遊樂場）。
核心概念：文本、結構、可視化
與傳統的拖放工具不同，Mermaid Live Editor遵循工程方法：
這幅畫不是畫出來的，而是「描述」。
你只關心三件事：
- 節點/參與者是什麼？
- 它們之間的關係
- 關係的方向和語義
布局、對齊和線方向都由渲染引擎決定。
支持的圖表功能
實時編輯器涵蓋美人魚的主要圖表子語言，包括但不限於：
- 流程圖：流程/邏輯/系統結構
- 序列圖：接口調用和時序關係
- 類圖：類和模塊關係
- 狀態圖：狀態機建模
- ER圖：數據結構和實體關係
- 時間軸：項目規劃時間軸
這使得它在 技術文檔、架構說明和教學原理圖等場景.
為什麼「實時編輯」
從項目的角度來看，Live Editor不僅僅是一個網絡工具，也是美人魚生態系統中的關鍵基礎設施：
- 驗證者：快速檢查美人魚代碼是否正確
- 官方參考實施：許多平台支持直接參考UI設計
- 教學和演示工具：最直觀的學習入口
- 私人部署：適合內聯網/文檔平台集成
對於編寫REAMES、博客和技術解決方案的人來說，它是 最具成本效益的圖表工具.
與傳統繪圖工具的區別
| 尺寸 | 美人魚現場編輯 | 傳統繪圖工具 |
|---|---|---|
| 輸入法 | 文本描述 | 滑鼠拖動 |
| 聚焦重點 | 結構和關係 | 外觀和布局 |
| 版本管理 | Git友好 | 幾乎不可能區分 |
| 自動化 | 極強（可以由AI生成） | 幾乎不 |
本質區別在於：
Mermaid是一種「結構語言」，而不是設計軟體。
AI時代的價值
在人工智慧工作流程中，美人魚實時編輯的角色很明確：
- 人工智慧生成美人魚代碼
- 實時編輯器即時渲染和驗證
- 輸出到Markdown /博客/ PPT /文檔系統
這是最後一個環節 「人工智慧-結構化表達-可視化」 連結.
結語
美人魚現場編輯 可能看起來很簡單，但它代表了一個成熟的工程表達：
以最低的語法成本換取最大的結構清晰度。
面對對自動化、人工智慧協作和可維護文檔的日益重視，這些工具只會變得更加重要而不是被取代。