Editing Mermaid online editor in Mandarin

將 Mermaid 語法轉換為 png（或其他圖片檔案）

{{LanguageSwitcher | content = [[Mermaid online editor | English]], [[Mermaid online editor in Mandarin | 漢字]] }}

{{Drafting}}

== 為什麼使用 Mermaid 語法 ==
為什麼使用 Mermaid 語法取代傳統的畫圖方式。現在可以要求 AI「使用 Mermaid 語法，畫 XX 流程圖」方便地產生 Mermaid 語法。

使用 Mermaid 語法畫流程圖的好處是，'''它是文字形式的'''，使其便於更新。然後可以使用工具將其轉換成圖片檔案。

== Mermaid 線上編輯器列表 ==
[https://mermaid.live/ 線上流程圖與圖表編輯器 - Mermaid Live Editor]
* 輸出格式：(1) 下載圖片檔案 png、svg、kroki 或 (2) 複製到剪貼簿

[https://excalidraw.com/ Excalidraw | 手繪風格 • 協作性 • 安全性]
* 輸出格式：(1) 下載圖片檔案 png 和 svg (2) 複製 png 或 svg 到剪貼簿
* 備註：除了線上改圖：修改圖形形狀、增加顏色，也可以匯出手寫字風格的 Mermaid 流程圖檔 {{Gd}}
* 範例：[https://excalidraw.com/#json=Z9I2DD9Ex4v2Mold0Jfw5,oXVtnyGwvS5ZldqZw_dNdg 連結]

[https://www.mermaidflow.app/editor 編輯器 | Mermaid Flow]
* 輸出格式：下載 png、pdf 和 svg 檔案

== Mermaid 語法範例 ==
[https://en.wikipedia.org/wiki/Triple_point 三相點 - 維基百科] 的 Mermaid 語法範例
<pre>
graph TD
    A[固態冰] -- 融化 --> B[液態水]
    B -- 凍結 --> A
    B -- 汽化/沸騰 --> C[氣態水蒸氣]
    C -- 凝結 --> B
    A -- 昇華 --> C
    C -- 凝華 --> A
    
    D[三相點<br/>溫度：273.16 K / 0.01°C<br/>壓力：611.657 Pa] --- A
    D --- B
    D --- C

    style D fill:#f9f,stroke:#333,stroke-width:2px
</pre>

[[Category: Tool]]