在現代工作中，無論是軟體開發還是系統架構，清晰的示意圖都能幫助我們更好地理解與溝通。然而，傳統圖表工具需要安裝、設定，甚至學習使用，往往增加了製作成本。而現在，透過 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
▲ 打開 Mermaid Live Editor 介面，將 ChatGPT 提供的 Mermaid 語法貼到左側編輯區域。
▲ 生成的示意圖，清晰展示 MySQL、phpMyAdmin 與 Apache + PHP 之間的互動。
▲ Mermaid Live Editor 提供圖片匯出功能，可輕鬆儲存為 PNG 或 SVG 格式。
透過 ChatGPT 與 Mermaid Live Editor 的結合，不僅省去安裝軟體與學習的麻煩，還能大幅提高示意圖製作的效率與品質。無論是開發者還是系統架構師，這套工具都能幫助你快速實現專業視覺化效果，讓專案表達更加清晰具體。現在就試試這個工具，感受 AI 與線上工具帶來的便利吧！
《上一篇》MQTT 通訊架構與實際應用解說 
《下一篇》使用 Google Pay 綁定玉山 Unicard 信用卡搭乘桃園機場捷運心得分享 
留言區 / Comments
萌芽論壇