在現代工作中，無論是軟體開發還是系統架構，清晰的示意圖都能幫助我們更好地理解與溝通。然而，傳統圖表工具需要安裝、設定，甚至學習使用，往往增加了製作成本。而現在，透過 ChatGPT 這個線上可使用的 LLM AI 與線上工具 Mermaid Live Editor 的結合，我們可以在幾分鐘內快速生成專業級的示意圖，簡單且高效率，適合各類專案應用。本文將示範如何使用 ChatGPT 提供的 Mermaid 語法，並在 Mermaid Live Editor 中快速生成示意圖，這邊以 MySQL、phpMyAdmin 與 Apache + PHP 網頁伺服器之間互動關係的可視化作為示範。

▲ 首先向 ChatGPT 提問：「我要使用 Mermaid Live Editor 繪製一個 MySQL、phpMyAdmin (管理 MySQL) 與 Apache 網頁伺服器之間互動的示意圖。」，接下來能透過不斷問答做出最好的示意圖，最終我補充了「Apache 是包含 PHP 的網頁伺服器，也會跟 MySQL 互動」以及「phpMyAdmin 是直接跟使用者互動的」的需求，ChatGPT 根據我上述的需求生成了如下 Mermaid 語法範例，直接複製到 Mermaid Live Editor 即可開始使用：

graph LR
    subgraph Web Server
        Apache[Apache + PHP<br>網頁伺服器]
    end

    subgraph Database Management
        phpMyAdmin[phpMyAdmin<br>MySQL 管理工具]
    end

    subgraph Database
        MySQL[(MySQL 資料庫)]
    end

    User[使用者] -->|HTTP 請求| Apache
    User -->|HTTP 請求| phpMyAdmin
    phpMyAdmin -->|SQL 查詢/更新| MySQL
    MySQL -->|回傳結果| phpMyAdmin
    Apache -->|SQL 查詢/更新| MySQL
    MySQL -->|回傳結果| Apache
    Apache -->|HTML 回應| User
    phpMyAdmin -->|HTML 回應| User
Copy

▲ 打開 Mermaid Live Editor 介面，將 ChatGPT 提供的 Mermaid 語法貼到左側編輯區域。

▲ 生成的示意圖，清晰展示 MySQL、phpMyAdmin 與 Apache + PHP 之間的互動。

▲ Mermaid Live Editor 提供圖片匯出功能，可輕鬆儲存為 PNG 或 SVG 格式。

透過 ChatGPT 與 Mermaid Live Editor 的結合，不僅省去安裝軟體與學習的麻煩，還能大幅提高示意圖製作的效率與品質。無論是開發者還是系統架構師，這套工具都能幫助你快速實現專業視覺化效果，讓專案表達更加清晰具體。現在就試試這個工具，感受 AI 與線上工具帶來的便利吧！

Google 翻譯新增粵文（廣東話）在內的 110 種全新語言支援！
2024-06-28
網路應用, 資訊新聞

Stable Diffusion：用於人物站立及抬腿的 AI 繪圖提詞
2023-06-11
軟體應用, 人工智慧, AI繪圖

IFTTT x Gmail x Telegram：打造屬於自己的收信&新郵件通知頻道
2018-08-03
網路應用, 行動平台, APP應用, Android

台灣 COVID-19 公費疫苗預約平台「意願登記」簡易教學
2021-07-16
生活相關, 網路應用

Pollo AI 評測：整合各大模型於一身，線上圖生影及文生影實測！
2025-03-17
網路應用, 人工智慧, AI影片

YouCompress：線上壓縮照片、影片與文件
2018-07-19
網路應用

Google Colab x Waifu Diffusion：使用 AI 生成高品質二次元動漫角色
2022-10-15
網路應用, 人工智慧, AI繪圖

YouTube 全新版面體驗！直接支援深色模式！
2017-04-22
網路應用, 資訊新聞, 串流媒體

《上一篇》MQTT 通訊架構與實際應用解說 《下一篇》使用 Google Pay 綁定玉山 Unicard 信用卡搭乘桃園機場捷運心得分享