系統架構圖是用方塊與連線，畫出一套系統由哪些元件組成，例如前台網站、管理後台、資料庫與外部服務，資料在元件之間怎麼流動，以及這些元件部署在哪些主機或雲端服務上。Microsoft 的架構中心說明，架構圖有助於傳達設計決策，以及工作負載元件之間的關聯性。畫系統架構圖時，先決定給誰看、畫到哪一層，再依序列出使用者與外部系統、內部元件、資料流與部署位置；看廠商給的圖時，逐一確認每個方塊是什麼、資料存在哪裡，以及哪個元件故障會影響整個服務。
系統架構圖要回答的三個問題
一張好讀的系統架構圖，至少要讓讀者看懂三件事：
- 有哪些元件：網站程式、管理後台、資料庫、檔案儲存、排程程式，以及金流、Email 寄送、ERP 這類外部服務。
- 資料怎麼走：誰呼叫誰、方向為何、用什麼方式傳遞，例如瀏覽器以 HTTPS 連到網站、網站以 API 把訂單送到 ERP。
- 放在哪裡：元件分別在哪台主機、哪個雲端服務或公司內部網路，備份存放在什麼位置。
它和其他常見的圖分工不同。網站架構圖畫的是頁面層級與選單，可參考網站架構圖怎麼做；流程圖畫的是作業步驟與判斷順序，可參考系統開發流程圖的圖種分辨。系統架構圖則專注在技術元件與它們之間的關係，不畫頁面，也不畫操作步驟。
常見的系統架構圖種類
| 圖種 | 呈現什麼 | 主要讀者 |
|---|---|---|
| 系統情境圖 | 系統和使用者角色、外部系統之間的關係，內部視為一個方塊 | 老闆、專案負責人 |
| 系統功能架構圖 | 功能模組的樹狀拆解，例如會員管理之下有註冊、登入、等級 | 業主、專案經理 |
| 元件與資料流圖 | 程式元件、資料庫、API 與資料流向 | 工程師、資訊負責人 |
| 部署架構圖 | 主機、網路、雲端服務、備份位置與環境區分 | 維運人員、資安負責人 |
不必每個專案都畫齊四種。小型系統可以把情境與部署合成一張；系統規模大、廠商多時，再分層畫，並在每張圖註明它屬於哪一層，避免讀者拿功能架構圖去問主機規格。
系統架構圖怎麼畫：六個步驟
- 決定讀者與範圍：寫下這張圖要給誰看、用來做什麼決定，例如確認報價範圍或交接維運。
- 列出外部互動者：使用者角色（客戶、員工、管理者）與外部系統（金流、簡訊、ERP、Google 登入）。
- 列出內部元件與資料存放區：網站程式、後台、資料庫、檔案儲存、快取與排程。
- 畫資料流：每條線都要有方向，並標出傳遞方式，例如 HTTPS、API、每日檔案匯出。
- 標出信任界限：把網際網路、公司網路與主機內部用框線分開。以 Microsoft 威脅模型化工具為例，畫模型的元素分為處理、外部互動者、資料存放區、資料流與信任界限，信任界限的例子包括公司網路與網際網路。
- 補上部署資訊與圖例：註明主機或雲端服務、正式與測試環境，並寫上圖例、版本與更新日期。
系統架構圖範例：官網加會員與線上付款
以一個有會員與線上付款的企業官網為例，系統架構圖可以這樣拆：
- 使用者端：客戶用瀏覽器或手機連到官網；管理人員從後台登入。
- 網站主機：前台頁面、會員功能與管理後台，連到同一台主機上的資料庫。
- 外部服務：金流服務負責付款頁面並回傳付款結果；Email 寄送服務發送註冊與訂單通知；ERP 透過 API 接收訂單。
- 備份：資料庫與上傳檔案定期備份到另一個儲存位置。
- 信任界限：網際網路與主機之間一道界限，後台另外框出，標明只有授權人員能進入。
畫成圖時，把使用者放左邊、外部服務放右邊、主機放中間，每條線寫上「下單」「付款結果通知」「每日備份」這類動作名稱。讀者只要沿著線走一遍，就能看出一筆訂單經過哪些地方、資料存在哪裡。
系統架構圖工具與 AI 輔助
系統架構圖工具大致分兩類：
- 繪圖軟體：以 Microsoft Visio 為例，提供 Azure 圖表範本，但範本需要特定的 Visio 訂閱方案，並非每個版本都能使用，以官方說明為準。Microsoft 也提供官方 Azure 架構圖示，允許用在架構圖表、訓練材料或文件中，使用時不可裁剪、翻轉、旋轉或變形，並建議在圖示旁標上產品名稱。
- 文字語法：用文字描述元件與連線，由工具轉成圖。以 GitHub 為例，可以在 Markdown 的程式碼區塊以 mermaid 標示撰寫 Mermaid 語法，圖表能在 Issues、Discussions、pull request、Wiki 與 Markdown 檔案中呈現。文字檔方便追蹤每次修改。
系統架構圖 ai 的用法，是請生成式 AI 依你的文字描述產出圖表語法草稿，再貼進工具轉成圖。AI 不知道你實際的主機與串接狀況，產出的元件與連線可能有遺漏或錯誤，要由熟悉系統的人逐一核對；主機位址、帳號這類資訊也不要貼進對話。
怎麼看懂廠商給的架構圖
拿到廠商的系統架構圖時，可以用下面的問題逐項確認：
- 每個方塊是什麼、由誰提供，圖例有沒有說明。
- 外部相依服務是否都畫出來。Microsoft 的可靠性指引建議找出工作負載的內部與外部相依性，進行單點故障分析；外部相依性例如其他應用程式或第三方服務。
- 哪個元件只有一份，故障時會不會讓整個服務停擺，有沒有備援或復原方式。
- 資料存在哪裡、備份放在哪裡，是否和正式主機分開。
- 哪些連線經過網際網路，是否加密，後台是否限制存取。
- 測試環境與正式環境是否分開。
- 每個元件由誰維運，和報價與合約的範圍是否一致。
看不懂的地方直接請廠商用一筆實際的訂單或申請，沿著圖說明一次資料怎麼走。
畫系統架構圖的常見錯誤
- 一張圖塞進所有層次：功能模組、主機規格與資料流全擠在一起，誰都看不懂。依讀者分層畫。
- 線沒有方向也沒有名稱：只看到兩個方塊相連，不知道誰傳資料給誰、傳什麼。
- 只畫正常流程：備份、監控、排程與錯誤通知沒畫出來，維運時才發現沒人負責。
- 圖和實際部署不同步：換了主機或新增串接卻沒更新圖，交接時反而誤導。
- 用雲端廠商的產品圖示代表自家產品：以 Microsoft 為例，其圖示使用規範明確寫到，不要用 Microsoft 產品圖示代表你的產品或服務；其他雲端廠商的圖示，使用前也要先看各自的規範。
常見問題
系統架構圖一定要用專業軟體畫嗎？
不一定。簡報軟體、白板拍照都可以，重點是元件、連線方向與部署位置正確。需要多人維護、經常修改時，再考慮繪圖軟體或文字語法，方便保留版本紀錄。
只有形象官網，也需要系統架構圖嗎？
形象官網可以只畫一張簡單的部署圖，列出網域、主機、郵件服務與備份位置，交接或換主機時就很有用；加入會員、付款或系統串接後，再擴充成完整的架構圖。
系統架構圖多久要更新一次？
建議在新增元件、更換主機、增加串接或調整權限時同步更新，並在圖上標註版本與日期。每次交接維運或做資安檢查前，先拿圖和實際環境核對一次。
可以要求廠商在報價時附上架構圖嗎？
可以。報價階段的架構圖能幫你確認範圍、主機規劃與外部服務由誰負責；簽約後要求廠商在交付文件中提供實際上線的版本，作為日後維運與交接的依據。
系統架構圖可以放在公開簡報裡嗎？
對外介紹可以用簡化的情境圖，只呈現系統和使用者、外部服務的關係。部署架構圖含主機、網路與安全設定資訊，建議限內部與合作廠商使用，不要公開。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
準備委外開發或接手既有系統時，可以先請廠商或內部人員畫出目前的部署架構圖，列出主機、資料庫、外部服務與備份位置。京采在網站與系統的規劃階段，能協助整理系統元件、串接與部署架構，並在上線交付時提供架構說明文件，詳情可參考網頁設計服務，或與我們聯繫討論你的系統規劃。
