Archify 完整教學 2026：47K★ MIT AI 架構圖 Agent Skill，一行指令自動生成系統架構圖，繁中首發

MIT 開源 47K★ GitHub Claude Code 支援 繁中首發 2026-09-16 · AutoDev AI

Archify 是什麼？解決什麼痛點？

工程師最不喜歡做的三件事：寫文件、更新文件、畫架構圖。

Archify 直接幫你解決第三個問題——而且連帶解決第一和第二個。

Archify（GitHub: tt-a1i/archify）是一個 MIT 授權的 Agent Skill，設計用來被 AI coding agent（Claude Code、Cursor、GitHub Copilot Agent Mode）呼叫。它的功能很單純但極其有用：

1. 掃描你的整個程式碼庫（或指定目錄）
2. 理解各模組之間的相依關係、API 呼叫流程、資料流
3. 輸出多種格式的架構圖：Mermaid、PlantUML、draw.io XML、JSON Schema

為什麼不直接叫 ChatGPT 幫你畫？

你當然可以把程式碼貼給 ChatGPT 說「幫我畫架構圖」，但問題在於：

• Context 限制：一個真實專案動輒 50,000+ 行，塞不進去
• 無法遞迴理解相依：ChatGPT 看不到 import 後面的實際邏輯
• 輸出不標準：生成的 Mermaid 語法常常有錯，Confluence 貼上後爆版
• 無法持續更新：每次程式碼改動，你得重新貼一遍

Archify 作為 Agent Skill 解決了這些問題——它在 agent 的執行環境裡直接讀取檔案系統，遞迴分析相依關係，輸出經過驗證的標準 Mermaid/PlantUML 語法。

原理：從程式碼到架構圖的全流程

Archify 的執行流程分四個階段：

Phase 1：靜態分析（AST 解析）

對各語言使用對應的 AST 解析器，提取：模組結構、import/require 關係、類別繼承、函式呼叫鏈、API 端點定義（Express、FastAPI、Gin 等）

Phase 2：關係圖建構

把靜態分析的結果建成有向圖（Directed Graph），節點是模組/類別/函式，邊是呼叫關係和資料流向。

Phase 3：AI 語意增強

呼叫 LLM（預設用你的 agent 當前模型）對圖結構進行語意標注：「這個模組負責什麼？」「這個資料流是同步還是非同步？」

Phase 4：圖表渲染輸出

根據你指定的格式（Mermaid / PlantUML / draw.io / JSON）輸出可直接使用的圖表代碼。

4 步驟安裝 Archify

方式一：作為 Claude Code Agent Skill 安裝（推薦）

# Claude Code 的 Agent Skills 預設目錄
mkdir -p ~/.claude/skills
git clone https://github.com/tt-a1i/archify ~/.claude/skills/archify

cd ~/.claude/skills/archify
cp config.example.yaml config.yaml

# 編輯 config.yaml
output_format: mermaid       # mermaid / plantuml / drawio / json
max_depth: 3                 # 遞迴分析深度
include_external: false      # 是否包含 node_modules / vendor
language_hints:
  - typescript
  - python
exclude_patterns:
  - "**/*.test.ts"
  - "**/migrations/**"
  - "**/__pycache__/**"

cd ~/.claude/skills/archify
# Node.js 版（TypeScript/JavaScript 專案用）
npm install

# Python 版（Python 專案分析用）
pip install archify-py

# 在 Claude Code 聊天框直接輸入：
"幫我用 Archify 生成這個專案的架構圖"
"請分析 src/ 目錄並輸出 Mermaid 流程圖"
"生成 API 端點到資料庫的完整資料流圖"

方式二：命令列直接使用

# 安裝
npm install -g archify

# 在專案根目錄執行
archify generate --format mermaid --depth 3
archify generate --format plantuml --target src/services/
archify generate --format drawio --output architecture.xml

# 輸出 Mermaid 到剪貼板（直接貼進 Confluence）
archify generate --format mermaid | pbcopy

方式三：Cursor Rules 整合

# 在 .cursorrules 新增：
When asked to generate architecture diagrams or system design documents,
use the Archify tool located at ~/.claude/skills/archify.
Always output in Mermaid format unless specified otherwise.
Focus on: API routes, service dependencies, database models, and async queues.

支援的架構圖類型

實際範例：5 種真實程式庫

範例 1：Express.js REST API（Node.js）

$ archify generate --format mermaid

# 輸出：
graph TD
    A[routes/users.ts] -->|GET /users| B[controllers/UserController.ts]
    A -->|POST /users| B
    B -->|validates| C[middleware/validator.ts]
    B -->|calls| D[services/UserService.ts]
    D -->|Prisma ORM| E[models/User.ts]
    D -->|JWT| F[lib/auth.ts]
    E -->|PostgreSQL| G[(users table)]

範例 2：FastAPI Python 後端

$ archify generate --format mermaid --target app/

# 自動偵測到 FastAPI 路由裝飾器
graph LR
    A[main.py] --> B[routers/items.py]
    A --> C[routers/users.py]
    B -->|Depends| D[dependencies.py]
    B -->|CRUD| E[crud/items.py]
    E -->|SQLAlchemy| F[(MySQL)]
    C -->|OAuth2| G[core/security.py]

範例 3：微服務架構（多 Repo）

# 支援多目錄掃描
archify generate --dirs ./user-service,./order-service,./payment-service \
  --format mermaid --type sequence

# 自動生成跨服務的 Sequence Diagram
sequenceDiagram
    Client->>UserService: POST /checkout
    UserService->>OrderService: createOrder(items)
    OrderService->>PaymentService: processPayment(orderId)
    PaymentService-->>OrderService: paymentConfirmed
    OrderService-->>UserService: orderCreated
    UserService-->>Client: 201 Created

Archify vs 手動畫圖 vs 其他工具

台灣四大實戰場景

🏭 場景一：Legacy 系統文件化（台灣製造業 IT）

台灣製造業充滿 10-20 年的舊系統，沒有任何文件。新人入職第一個月通常就是在「讀 code 猜架構」。

• Archify 掃描 Legacy PHP / Java 程式庫，自動生成模組關係圖
• 輸出 PlantUML 貼進 Confluence，原本 3 週的文件工作 → 1 天完成
• CIO 報告用的「系統架構圖」不再是工程師的惡夢

🎓 場景二：Hahow 課程素材（技術教學內容創作）

技術課程講師最需要清晰的架構圖來解說複雜概念：

• 把範例程式碼丟給 Archify，自動生成對應的 Sequence Diagram
• Mermaid 格式直接嵌入 Notion / HackMD 課程講義
• 每次修改範例程式碼，重跑 Archify 自動更新圖表

🚀 場景三：SaaS 新創的技術審查（Due Diligence）

台灣 SaaS 新創在融資或被收購時，投資方常要求提供系統架構文件：

• Archify 在 1 小時內生成完整技術架構圖
• 支援輸出 C4 Context 模型（系統邊界、外部相依、用戶流程）
• draw.io 格式可直接插入投資人簡報的技術附件

🔄 場景四：CI/CD 自動更新架構文件

把 Archify 加進 GitHub Actions，每次 merge to main 自動重新生成架構圖並更新 README：

# .github/workflows/update-architecture.yml
name: Update Architecture Diagram

on:
  push:
    branches: [main]
    paths: ['src/**', 'app/**']

jobs:
  archify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install Archify
        run: npm install -g archify
      - name: Generate Architecture Diagram
        run: |
          archify generate --format mermaid --depth 3 > /tmp/arch.md
          # 更新 README.md 的架構圖區塊
          python scripts/update_readme_diagram.py
      - name: Commit updated diagram
        uses: stefanzweifel/git-auto-commit-action@v5
        with:
          commit_message: "docs: auto-update architecture diagram"

進階：自訂 Archify Prompt + 最佳實踐

自訂分析深度與範圍

# 只分析特定服務層
archify generate \
  --target src/services/ \
  --exclude "**/*.spec.ts,**/mocks/**" \
  --depth 2 \
  --focus "database,external-api" \
  --format mermaid

在 Claude Code 中的最佳 Prompt

// 在 Claude Code 中呼叫 Archify 的推薦方式：

"請用 Archify 分析 src/api/ 目錄，生成：
1. API 路由到 Service 的流程圖（flowchart）
2. 主要 Service 之間的依賴關係圖
3. 資料庫模型的 ER 圖
全部用 Mermaid 格式，輸出到 docs/architecture/ 目錄"

提升 AI 工具開發能力

FAQ 常見問題

# .git/hooks/post-commit
#!/bin/bash
archify generate --format mermaid --quiet > docs/architecture.md
git add docs/architecture.md
git commit --amend --no-edit --no-verify

© 2026 AutoDev AI | 更多 AI 教學 | 首頁