# Space Text Logic Diagram

【公众号配图版】把公众号文章/段落拆成逻辑关系图，做成可直接放进公众号的配图。生成逻辑关系 SVG，默认输出独立 HTML（可本地预览、可截图导出 PNG），也可交给...

- Repository: https://github.com/SpaceZephyr/creator-buddy (1778 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-08-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add SpaceZephyr/creator-buddy --skill space-text-logic-diagram -g -a claude-code -y`
Codex: `npx skills add SpaceZephyr/creator-buddy --skill space-text-logic-diagram -g -a codex -y`
Cursor: `npx skills add SpaceZephyr/creator-buddy --skill space-text-logic-diagram -g -a cursor -y`
Gemini CLI: `npx skills add SpaceZephyr/creator-buddy --skill space-text-logic-diagram -g -a gemini-cli -y`

## Description

【公众号配图版】把公众号文章/段落拆成逻辑关系图，做成可直接放进公众号的配图。生成逻辑关系 SVG，默认输出独立 HTML（可本地预览、可截图导出 PNG），也可交给 Codex/workbuddy 内置出图模型出成图片。支持递进、流程、循环、层次、对比、矩阵六种关系。当用户给文章/段落/论述并要求生成逻辑图、关系图、配图、可视化时触发。支持中文，一次可拆多张。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 文本逻辑关系图

将文本转换为精准的逻辑关系 SVG 图，输出为独立 HTML 文件。

## 公众号配图适配

**定位**：公众号配图工具。用户给一段内容（文章 / 段落 / 论述），你把它的逻辑拆成图，做成可直接放进公众号的配图。

**两种出图方式**：
- **HTML 出图（本 Skill 主路径）**：生成自包含 HTML（内含 SVG），可本地预览；要图片时对预览截图导出 PNG。
- **模型出图**：把拆好的逻辑结构 + 风格描述交给当前环境内置出图模型出 PNG, , Codex 用内置 `image_gen`/`image2`，workbuddy 用其出图模型。适合要「手绘/插画感」而非精确 SVG 时。

**公众号常用尺寸**：正文配图 16:9 或 3:2｜方图 1:1｜头图 2.35:1。生成 HTML 时画布按此比例。

**输出**：默认存用户图片目录，命名 `MMDD-主题.html` 或 `.png`。

## 触发条件

当用户提到以下场景时，主动使用此技能：
- "生成逻辑图" / "画逻辑关系图" / "文本转图"
- "逻辑拆解" / "拆成图" / "可视化"
- 用户粘贴了文章/段落/论述内容并要求分析逻辑
- "递进图" / "流程图" / "循环图" / "层次图" / "对比图" / "矩阵图"
- 用户要求对文本进行结构化可视化

## 工作流程

### 第一步：文本分析

1. **通读全文**，识别文本中的核心论点、关键概念和逻辑链条
2. **段落拆解**，将文本按自然段落或逻辑段落分割
3. **判断关系类型**，为每个段落选择最适合的逻辑关系：

| 关系类型 | 适用场景 | 视觉特征 |
|---------|---------|---------|
| 递进关系 | 概念渐进发展、层层深入 | 阶梯式排列，箭头从左到右或从上到下 |
| 流程关系 | 步骤顺序、阶段推进 | 线性/蛇形排列，带编号的节点 |
| 循环关系 | 概念循环往复、闭环反馈 | 环形排列，首尾相连 |
| 层次结构 | 包含、从属、分类关系 | 树形/金字塔/嵌套结构 |
| 对比关系 | 对照、比较、优劣分析 | 左右/上下对称排列 |
| 矩阵关系 | 多维度交叉、复杂关联 | 网格/象限布局 |

### 第二步：概念抽象

1. **提取关键词**：从每个段落中提取 2-6 个核心概念
2. **精简文字**：每个概念节点文字控制在 15 字以内
3. **标注关系**：概念之间的连接线和箭头标注简要说明
4. **分层整理**：区分主要概念和次要概念

### 第三步：生成 SVG 图

根据分析结果，使用本技能的设计规范生成 HTML 文件。

**多段拆解规则：**
- 当文本包含多个独立逻辑段落时，生成多张 SVG 图
- 每张图使用独立的 `<div class="diagram-card">` 容器
- 每张图上方标注段落标题或逻辑类型
- 所有图按顺序排列在同一 HTML 文件中

## 设计系统

### 主题系统

支持深色和浅色主题切换，默认深色。

#### 深色主题（默认）

融合 Cursor 暖色深底 + Claude 赭石强调色。告别冷蓝色调。

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

#### 浅色主题

融合 Claude 羊皮纸 + Cursor 暖面。

| 元素 | 颜色 |
|------|------|
| 页面背景 | `#f5f4ed` (羊皮纸) |
| 卡片背景 | `#faf9f5` (Ivory) |
| 节点填充主色 | `#ebe9e2` → `#e0ddd4` |
| 节点描边 | `#8a7e6e` (暖棕) |
| 主文字 | `#141413` (暖近黑) |
| 副文字 | `#5e5d59` (橄榄灰) |
| 连接线 | `#c8c5bc` |
| 箭头 | `#8a8377` |
| 强调色 | `#8a7e6e` (暖棕), `#c96442` (赭石) |

The rest: https://github.com/SpaceZephyr/creator-buddy/blob/HEAD/gzh-Skills/space-text-logic-diagram/SKILL.md