簡介

• 本文將以流程圖 mermaid 語法為例，介紹如何使用 Mermaid Live Editor、Notion 和 Diagrams.net (Draw.io)，將 Mermaid 語法匯出為圖片，輕鬆應用於各種工作場景。

前言

• 在處理流程設計時，Mermaid 語法是一種快速、輕量級的解決方案，可以用簡單的代碼生成高效的圖表。
• 將圖表轉換為圖片檔案是應用於報告、簡報和團隊協作的重要一環。
• 以下文章內容將說明如何用三種工具完成 Mermaid 語法的圖表匯出，並選擇最適合的解決方案。

示範流程圖 mermaid 語法

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car] 

匯出方案與操作步驟

使用官網 Mermaid Live Editor

• 打開工具
  • 網址：Online FlowChart & Diagrams Editor - Mermaid Live Editor
• 輸入語法
  • 在編輯器的左側文本框中粘貼上述語法。
• 預覽與匯出
  • 語法輸入後，右側會即時顯示圖表預覽。
  • 點擊右上角的「Download」按鈕，選擇以下格式進行匯出：
    • 支援匯出格式：PNG、SVG。

![](<https://remnote-user-data.s3.amazonaws.com/2zKbRbUCi4HLJElgAxgqOy42pEIwvMI9PodUt-E8pEA-13B1ICGh_lcOyE3Jm614Uh1l6VXHsaALcQfj3mebxW4NMtdnOlFxkfjDyN7vD454Ayjw7K9DPqLbcBCpZa9p.png>)

在 Notion 中嵌入 Mermaid 語法

• 可先閱讀 使用 Notion 和 Mermaid 語法生成流程圖來熟悉基本操作。

• 本文將說明如何將現有 Mermaid 語法嵌入 Notion 並匯出成圖檔。

• 新增 Code Block

  • 在 Notion 中輸入 ，選擇「Code Block」。

    /code

      ![](<https://remnote-user-data.s3.amazonaws.com/NMF8nflo6xiy5lUb5bvBVUWgvliUiIQAcYGPvIZ9w2uCVesgajFIh5ZPigXTAZTQtq6esTZ1CSV4mBHJglO0Sk7OXnLAQiLGFpzqIg_TkwL2qyPa2Z7OROiuGBfzQNRq.png>)
    

  • 設定語言為 。

    mermaid

• 輸入語法

  • 將 Mermaid 語法粘貼到 Code Block 中。

  • Notion 會自動渲染生成流程圖。

      ![](<https://remnote-user-data.s3.amazonaws.com/Z1noWln4IpEOre7Rtks_aPJoHFSA8kXZOz7i8ESo5g5RKyb3KjJfbS0CTR-jZmd_YKc7ibY1zMGjput9ImQmB1uCe_kbtxONadOuRQPWilRlGZv2JKC-cxOA8kdB1R3y.jpeg>)
    

• 匯出圖片

  • Notion 暫無直接匯出流程圖為圖片的功能，可採用以下方法：
    • 使用截圖工具保存為圖片。
    • 或分享 Notion 頁面以供他人查看。