前言
在軟體開發中，撰寫程式碼往往只佔了一部分的時間，真正的重頭戲在於「系統架構規劃」與「團隊溝通」。一份清晰的架構圖與規範完整的 API 文件，能省去無數次來回確認的溝通成本。

然而，手動畫流程圖（如 Flowchart、Sequence Diagram）與撰寫 API 規格書（如 OpenAPI / Swagger Specification）既繁瑣又耗時。今天我們將介紹如何善用 AI，將文字想法直接轉化為 Mermaid.js 圖表 與 Standard OpenAPI YAML，讓你在系統設計階段就能達到高效自動化！

一、為什麼選擇 Mermaid.js 與 Markdown？
傳統上我們習慣使用 Draw.io 或 Vision 畫圖，但這類二進位或圖形檔案很難做版本控制（Git Version Control）。

Mermaid.js 是一種基於 Markdown 文字語法的圖表渲染工具。它的優勢在於：

纯文字格式： 可直接存放在 Git 倉庫，輕鬆記錄 Diff 歷史。

AI 極度友好： LLM 非常擅長生成與解析文字結構，產出 Mermaid 語法的精準度極高。

平台原生支援： GitHub、GitLab、Obsidian、Notion 都支援直接渲染 Mermaid 圖表。

二、實戰 1：用 AI 生成系統時序圖 (Sequence Diagram)
當你需要設計一個「會員第三方登入（OAuth 2.0）」的流程時，可以直接讓 AI 產出繪圖語法。

💡 提示詞 (Prompt)：
「請幫我繪製一個使用者透過 Google OAuth 2.0 登入系統的時序圖 (Sequence Diagram)。
包含參與者：User、Frontend (React)、Backend (API)、Google Auth Server。
請直接輸出 Mermaid.js 格式程式碼，不要有額外贅字。」

🤖 AI 產出結果 (Mermaid 語法)：
程式碼片段
sequenceDiagram
autonumber
actor User as 使用者
participant FE as 前端 (React)
participant BE as 後端 (FastAPI)
participant OAuth as Google 驗證伺服器

User->>FE: 點擊「使用 Google 登入」
FE->>OAuth: 重定向至 Google 登入頁面
User->>OAuth: 輸入帳密並授權
OAuth-->>FE: 回傳 Authorization Code
FE->>BE: 傳送 Code 至 /api/v1/auth/google
BE->>OAuth: 用 Code 交換 Access Token & User Info
OAuth-->>BE: 回傳 User Profile (Email, Name)
BE->>BE: 驗證/建立使用者並發行 JWT
BE-->>FE: 回傳系統專屬 JWT Token
FE-->>User: 登入成功，導向主頁面

(將上述程式碼貼入支援 Mermaid 的編輯器或 Markdown 檔案中，即可自動渲染成視覺化時序圖。)

三、實戰 2：文字需求秒變 OpenAPI 3.0 Specification
在設計 RESTful API 時，先定義好 API 合約（Schema First）是現代團隊開發的好習慣。

💡 提示詞 (Prompt)：
「請為一個『文章管理系統 (Post Service)』撰寫 OpenAPI 3.0 YAML 文件。
需求包含：

POST /api/v1/posts（新增文章，需 JWT Header 驗證）。

GET /api/v1/posts/{id}（取得單篇文章）。

包含 Request Body、Response (200, 400, 401) 以及對應的 Schema 範例。」

🤖 AI 產出結果 (OpenAPI YAML 片段)：
YAML
openapi: 3.0.3
info:
title: Post Management Service
version: 1.0.0
paths:
/api/v1/posts:
post:
summary: 建立新文章
security:
- BearerAuth: []
requestBody:
required: true
content:
application/json:
schema:
type: object
required: [title, content]
properties:
title:
type: string
example: "Day 10 系統設計實實戰"
content:
type: string
example: "這是一篇關於 AI 輔助架構設計的文章..."
responses:
'201':
description: 文章建立成功
'401':
description: 未授權 (JWT 無效或過期)
產出後，只需貼入 Swagger Editor，就能立刻預覽並下載互動式的 API 文件與測試介面！

四、系統設計中的 AI Best Practices
先設計，後 Coding： 在寫 Code 之前，先讓 AI 生成 API Specification 與 DB Schema (ER Diagrams)，並與團隊討論確認後再開始寫，能大幅減少後期砍掉重練的風險。

Reverse Documentation（反向生成文件）： 針對舊有專案，可把 API controller 程式碼丟給 AI：「請根據這段程式碼，反向繪製系統架構圖與 OpenAPI 規格。」

保持圖表簡潔： 當系統太複雜時，要求 AI 將架構圖拆解為微服務（Microservices）層級與單一服務內部（Internal Flow）層級，避免一張圖塞滿過多節點。

結語
過往需要半天時間整理與繪製的系統設計文件，現在透過 AI 與 Text-to-Diagram 的工具鏈，可以在 15 分鐘內完成高品質初稿。工程師因此能將時間更集中在架構合理性、高可用性（HA）與擴充性的思考上。

明天（Day 11），我們將探索如何讓 AI 介入 DevOps 與雲端維運 領域：「AI 輔助 DevOps：自動生成 Dockerfile、Kubernetes YAML 與 CI/CD 流水線」，我們明天見！