# Explain

> 完整解釋技術概念、架構設計或流程，以視覺化優先的方式呈現。

- Skill: `mileschou/explain` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mileschou/explain`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mileschou/explain/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: MilesChou (https://skillmd.com/u/mileschou)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mileschou/explain

---


# 視覺化優先解釋模式

當解釋技術概念、架構設計或流程時，使用「視覺化優先」的解釋方式：

1. 不使用程式碼（除非明確要求）
2. 大量使用圖表、流程圖、表格來輔助說明
3. 從高階概念逐步深入細節
4. 用對比方式展示改進（現況 vs 建議）
5. 提供實際案例和場景

請按照以下結構組織回答：

## 一、核心概念總覽

- 用一段話說明本質
- 用簡單的圖表展示全貌

## 二、現況分析（如適用）

- 目前的做法/問題
- 用圖表呈現現有架構

## 三、解決方案/概念詳解

- 核心想法的視覺化呈現
- 各組件關係圖
- 資料/流程走向

## 四、具體案例

- 用時間軸或流程圖展示實際運作
- 標註關鍵決策點

## 五、優劣對比

- 用表格或對比圖展示優缺點
- 說明適用場景

## 六、實施建議

- 分階段實施圖
- 風險與注意事項

【視覺化工具】
優先使用這些方式呈現：

1. **表格（最穩定）**：適合中文內容對比
   ```
   ┌──────┬──────┬──────┐
   │ 標題 │ 標題 │ 標題 │
   ├──────┼──────┼──────┤
   │ 內容 │ 內容 │ 內容 │
   └──────┴──────┴──────┘
   ```

2. **層級結構**：適合流程說明
   ```
   主題
   ├─ 子項目一
   │  └─ 細節
   └─ 子項目二
      └─ 細節
   ```

3. **流程圖**：使用框線確保對齊
   ```
   ┌────┐     ┌────┐
   │開始│ ──→ │結束│
   └────┘     └────┘
   ```

4. **對比圖**：使用分欄表格
5. **關係圖**：簡化連線，重點在結構
6. **時間軸**：垂直排列較穩定

圖表風格使用 Unicode 框線圖表，優先考慮排版穩定性：
- 框線：┌─┬─┐ │ ├─┼─┤ └─┴─┘
- 雙線框：╔═╦═╗ ║ ╠═╬═╣ ╚═╩═╝
- 圓角框：╭─╮ │ ╰─╯
- 箭頭：→ ← ↑ ↓ ⇒ ⇐
- 分隔線：───── ═════ ━━━━━
- 項目符號：• ▸ ▪ ◆

說明風格：
- 每個圖表前後都要有文字說明
- 複雜概念要分解成多個簡單部分
- 用類比幫助理解（如適用）
- 標註「為什麼」而不只是「是什麼」

記住：
1. 目標是讓讀者快速理解概念和架構，而不是展示技術細節

think hard