| 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)。
