article-diagramlisted
Install: claude install-skill jiabai/awesome-skills
# Article Diagram
为 Markdown 文章自动生成专业 SVG 插图，降低初级工程师/产品经理的认知负荷。
## Workflow
```
文章输入 → 提取 know-how → 设计插图清单 → 生成 SVG → 验证语法 → 覆盖检查 → 合并到 Markdown → (可选) 导出 JPEG
↓
S级内容: 生成双语插画网页
```
## 1. 分析文章结构
读取 Markdown，提取标题层级、段落内容、代码块、现有图片。
## 2. 提取 know-how 列表（关键步骤）
**在生成插图前，必须先提取文章中的 know-how 点**：
1. 通读文章，列出所有 know-how/方法论/最佳实践
2. 对每个 know-how 判断：
- 是否需要可视化？
- 适合什么类型的图？
3. 形成插图清单，确保覆盖完整
**示例**：
```
文章：《Building a C compiler with parallel Claudes》
Know-how 列表：
1. Harness 循环机制 → 架构图 ✅
2. 任务锁同步机制 → 流程图 ✅
3. GCC Oracle 并行化策略 → 流程图 ✅（关键 know-how！）
4. 测试 Harness 设计原则 → 对比图 ✅
5. 上下文污染问题 → 对比图 ✅
6. 时间盲目性问题 → 对比图 ✅
7. 项目成果统计 → 统计图 ✅
```
## 3. 识别插图位置
使用 LLM 分析文章，识别需要可视化的位置。判断标准：
- **流程图**：≥3 步骤的顺序操作
- **架构图**：≥3 组件的关系
- **时序图**：有时间先后顺序的交互
- **对比图**：两方或多方案对比
**约束**：每篇文章 3-6 张插图，每张图 3-8 个组件。
## 4. 生成 SVG
设计规格详见 [references/design-spec.md](references/design-spec.md)。
**核心原则**：
- 深色背景 (#0B0F19)
- CSS class 统一样式
- 组件用卡片 + 标题 + 描述
- 不同类型用不同颜色区分
**图表类型**：
| 类型 | 用途 | 推荐尺寸 |
|------|------|----------|
| flowchart | 流程步骤 | 900×400 |
| architecture | 系统架构 | 1100×600 |
| sequence | 时序交互 | 1000×500 |
| comparison | 方案对比 | 900×340 |
**生成辅助**：
使�� `scripts/generate_diagram.py` 中的 Python 函数辅助生成标准 SVG：
```python
from generate_diagram import ColorScheme, card, step_circle, arrow_marker, connection_line, svg_template