text-logic-diagram

name	text-logic-diagram
description	文章→逻辑图生成器。将论述性文本拆解为递进·流程·循环·层次·对比·矩阵六种逻辑关系， 生成深色/浅色双主题 SVG 图（自包含 HTML）。支持多段落一次拆解多张图。 与 architecture-diagram（系统架构图）和 fireworks-tech-graph（多风格技术图） 形成互补——本技能专注"论述逻辑"可视化。 Trigger keywords: 逻辑图, 文章→图, 文本可视化, 逻辑拆解, 递进图, 层次图, 对比图, 矩阵图, 论述可视化, 文字转图, logic diagram, text to diagram, 帮我画个逻辑图, 把这段话画成图, 文章结构图, 概念关系图.
allowed-tools	["Read","Write","Edit","Bash","Glob","Grep"]
metadata	{"category":"design","source":"https://github.com/SpaceZephyr/design-buddy (MIT)","upstream":"space-text-logic-diagram","version":"1.0.0","license":"MIT"}

Text Logic Diagram — 文章→逻辑图

把论述性文章拆成精准的逻辑关系 SVG 图。不是架构图、不是流程图——是"这篇文章在讲什么逻辑"。 上游来源: 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 个层级
→ 输出: 三阶递进图 + 每阶段标题和关键特征

---

安装方式

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

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

---

上游致谢

基于 SpaceZephyr/design-buddy 中的 space-text-logic-diagram v1.1 (MIT License)。