# Text Logic Diagram

> 文章→逻辑图生成器。将论述性文本拆解为递进·流程·循环·层次·对比·矩阵六种逻辑关系， 生成深色/浅色双主题 SVG 图（自包含 HTML）。支持多段落一次拆解多张图。 与 architecture-diagram（系统架构图）和 fireworks-tech-graph（多风格技术图） 形成互补——本技能专注"论述逻辑"可视化。 Trigger keywords: 逻辑图, 文章→图, 文本可视化, 逻辑拆解, 递进图, 层次图, 对比图, 矩阵图, 论述可视化, 文字转图, logic diagram, text to diagram, 帮我画个逻辑图, 把这段话画成图, 文章结构图, 概念关系图.

- Skill: `zhouyinlong-lab/text-logic-diagram` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zhouyinlong-lab/text-logic-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhouyinlong-lab/text-logic-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: zhouyinlong-lab (https://skillmd.com/u/zhouyinlong-lab)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhouyinlong-lab/text-logic-diagram

---


# Text Logic Diagram — 文章→逻辑图

> 把论述性文章拆成精准的逻辑关系 SVG 图。不是架构图、不是流程图——是"这篇文章在讲什么逻辑"。
> 上游来源: [SpaceZephyr/design-buddy](https://github.com/SpaceZephyr/design-buddy) (MIT)

## 与现有图技能的分工

```
architecture-diagram    →  系统架构（组件+连线+协议）
fireworks-tech-graph    →  技术图（14类型，8风格）
text-logic-diagram      →  论述逻辑（递进/对比/层次/矩阵）  ← NEW
```

**什么时候用 text-logic-diagram？**
- 你有一段论述性文字，想看清它的逻辑结构
- 你在写文章，想确认论证链条是否清晰
- 你要做 presentation，需要把一页文字变成一张逻辑图

---

## 工作流程

```
第一步: 文本分析 → 通读全文，识别核心论点和逻辑链条
第二步: 概念抽象 → 提取关键词（≤15字/节点），标注关系
第三步: 生成 SVG  → 按设计规范生成自包含 HTML 文件
```

---

## 六种逻辑关系类型

| 关系类型 | 适用场景 | 视觉特征 | 示例 |
|---------|---------|---------|------|
| **递进关系** | 概念渐进发展、层层深入 | 阶梯式排列，箭头从左到右 | "数据→信息→知识→智慧" |
| **流程关系** | 步骤顺序、阶段推进 | 线性/蛇形排列，带编号 | "用户注册→验证→激活→首次使用" |
| **循环关系** | 闭环反馈、循环往复 | 环形排列，首尾相连 | "构建→测量→学习→改进" |
| **层次结构** | 包含、从属、分类 | 树形/金字塔/嵌套 | "AI→机器学习→深度学习→Transformer" |
| **对比关系** | 对照、比较、优劣 | 左右/上下对称 | "传统开发 vs AI辅助开发" |
| **矩阵关系** | 多维度交叉、复杂关联 | 网格/象限布局 | "紧急-重要四象限" |

---

## 设计系统

### 深色主题（默认）

融合 Cursor 暖色深底 + Claude 赭石强调色：

| 元素 | 颜色 |
|------|------|
| 页面背景 | `#141413` |
| 卡片背景 | `#1a1a18` |
| 节点填充 | `#1e1e1c` → `#282825` |
| 节点描边 | `#7a6e5e` (暖棕) |
| 主文字 | `#faf9f5` (暖白) |
| 副文字 | `#b0aea5` (暖银) |
| 强调色 | `#7a6e5e`, `#c96442` (赭石) |
| 连接线 | `rgba(38, 37, 30, 0.35)` |

### 浅色主题

| 元素 | 颜色 |
|------|------|
| 页面背景 | `#f5f4ed` (羊皮纸) |
| 卡片背景 | `#faf9f5` |
| 节点填充 | `#ebe9e2` → `#e0ddd4` |
| 节点描边 | `#8a7e6e` (暖棕) |
| 主文字 | `#141413` |
| 强调色 | `#8a7e6e`, `#c96442` |

### 字体规范

- 全局: JetBrains Mono
- 节点标题: 14px / 600
- 节点子标签: 11px / 400
- 连接线标注: 10px
- 段落标题: 16px / 700

---

## 各关系类型布局规范

### 递进关系
- 左→右阶梯式，节点逐渐升高
- 箭头统一向右，可选编号 ①②③
- 每层用浅色背景区分层级

### 流程关系
- 线性排列（≤4节点）或蛇形折行（5+节点）
- 每节点带圆形编号徽章
- 起始节点深色强调，结束节点特殊样式
- 分支点用菱形节点

### 循环关系
- 环形排列，首尾相连，中心可放核心概念
- 使用弧线连接，箭头沿环方向

### 层次结构
- 树形：根在上，子在下，同级水平对齐
- 或金字塔：底部宽，顶部窄
- 父子关系用竖线

### 对比关系
- 左右对称，中间竖线或 VS 分隔
- 两侧不同色调（蓝 vs 橙等）
- 共同点放上方，差异点分列两侧

### 矩阵关系
- 网格布局（2×2 / 3×3），行列表头标注维度
- 象限用浅色背景区分
- 对角线关系用特殊颜色

---

## 多段落处理

当文本包含多个独立逻辑段落时：
- 每段生成独立 SVG 图
- 每张图用 `<div class="diagram-card">` 包裹
- 上方标注段落标题或逻辑类型
- 所有图在同一 HTML 文件中按顺序排列
- 页面顶部显示：标题 + 源文本简述 + 主题切换按钮 + 检测到的关系类型概览

---

## 使用示例

```
用户: 帮我把这段话画成逻辑图

"AI 辅助编程经历了三个阶段。第一阶段是代码补全，IDE 根据上下文
自动提示下一行代码。第二阶段是对话式编程，开发者用自然语言描述需求，
AI 生成完整函数或模块。第三阶段是 Agent 式开发，AI 能自主理解项目
结构、拆解任务、执行多步骤操作并自我验证。每个阶段都在减少开发者
从"想"到"做"的延迟。"

→ 识别为递进关系，3 个层级
→ 输出: 三阶递进图 + 每阶段标题和关键特征
```

---

## 安装方式

```bash
cp -r text-logic-diagram/ ~/.claude/skills/text-logic-diagram/
```

上游: `npx skills add SpaceZephyr/design-buddy`（获取 design-buddy 全部 19 个技能）

---

## 上游致谢

基于 [SpaceZephyr/design-buddy](https://github.com/SpaceZephyr/design-buddy) 中的 `space-text-logic-diagram` v1.1 (MIT License)。