文本逻辑关系图

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

触发条件

当用户提到以下场景时，主动使用此技能：

"生成逻辑图" / "画逻辑关系图" / "文本转图"
"逻辑拆解" / "拆成图" / "可视化"
用户粘贴了文章/段落/论述内容并要求分析逻辑
"递进图" / "流程图" / "循环图" / "层次图" / "对比图" / "矩阵图"
用户要求对文本进行结构化可视化

工作流程

第一步：文本分析

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

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

第二步：概念抽象

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

第三步：生成 SVG 图

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

多段拆解规则：

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

设计系统

主题系统

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

深色主题（默认）

元素	颜色
页面背景	`#0a0a0a`
卡片背景	`#141414`
节点填充主色	`#1a2332` → `#243447`
节点描边	`#3f72af`
主文字	`#ffffff`
副文字	`#8899aa`
连接线	`#556677`
箭头	`#8899aa`
强调色	`#3f72af` (蓝), `#5dade2` (亮蓝)

浅色主题

元素	颜色
页面背景	`#f5f7fa`
卡片背景	`#ffffff`
节点填充主色	`#e8edf2` → `#dbe2ef`
节点描边	`#3f72af`
主文字	`#112d4e`
副文字	`#4a6785`
连接线	`#aabbcc`
箭头	`#8899aa`
强调色	`#3f72af` (蓝), `#112d4e` (深蓝)

字体规范

全局使用 JetBrains Mono 等宽字体
节点标题：14px，font-weight 600
节点子标签：11px，font-weight 400
连接线标注：10px
段落标题：16px，font-weight 700
图例文字：10px

SVG 规范

通用规范

画布尺寸：每张图 viewBox 0 0 800 500，按需调整
内边距：上下左右各留 40px
箭头标记：小巧箭头，线宽 1
阴影效果：轻微阴影 dx=1.5, dy=1.5, stdDeviation=2

节点样式

<!-- 带阴影的圆角矩形节点 -->
<rect x="X" y="Y" width="W" height="H" rx="8"
  fill="url(#nodeGrad)" stroke="#3f72af" stroke-width="1.5"
  filter="url(#shadow)"/>
<text x="CX" y="CY" class="text-primary" font-size="14" font-weight="600"
  text-anchor="middle">概念名称</text>

连接线样式

<!-- 标准连接线 -->
<line x1="X1" y1="Y1" x2="X2" y2="Y2"
  stroke="#556677" stroke-width="1" marker-end="url(#arrow)"/>

<!-- 虚线连接（表示弱关系/隐含关系） -->
<line x1="X1" y1="Y1" x2="X2" y2="Y2"
  stroke="#556677" stroke-width="1" stroke-dasharray="4,3"
  marker-end="url(#arrow)"/>

<!-- 曲线连接（避开障碍物） -->
<path d="M X1 Y1 Q CX CY X2 Y2"
  stroke="#556677" stroke-width="1" fill="none"
  marker-end="url(#arrow)"/>

关系类型视觉规范

递进关系

从左到右阶梯式排列
节点逐渐升高或尺寸逐渐增大
箭头方向统一向右
可用编号标注顺序（①②③）
每层之间用浅色背景区分层级

流程关系

线性排列或蛇形排列（超过 4 个节点时折行）
每个节点带步骤编号（圆形徽章）
连接线使用实线箭头
起始节点用深色强调，结束节点用特殊样式
分支点使用菱形节点

循环关系

环形排列，首尾相连
中心可放置核心概念
连接线沿环形方向
使用弧线连接而非直线
箭头指向下一个节点

层次结构

树形结构：根节点在上，子节点在下
或金字塔结构：底部宽，顶部窄
同级节点水平对齐
父子关系用竖线连接
可用嵌套矩形表示包含关系

对比关系

左右对称布局
中间用竖线或 VS 分隔
左侧和右侧使用不同色调（如蓝色 vs 橙色）
共同点放在中间或上方
差异点分列两侧

矩阵关系

网格布局（2×2、3×3 等）
行列表头标注维度
每个单元格内放置概念
象限式分区（用浅色背景区分）
对角线关系用特殊颜色标注

页面布局

页眉 - 标题 + 源文本简述 + 主题切换按钮
概览卡片 - 显示检测到的关系类型和概念数量
图表区域 - 多张 SVG 图按顺序排列，每张图带标题标签
页脚 - 元数据

多图排列模板

<div class="diagram-card">
  <div class="diagram-label">
    <span class="label-tag">递进关系</span>
    <span class="label-title">第一段：XXX 的渐进发展</span>
  </div>
  <div class="diagram-body">
    <svg class="diagram-svg" viewBox="0 0 800 500">
      <!-- SVG 内容 -->
    </svg>
  </div>
</div>

中文适配规则

节点文字使用中文，技术术语保留英文
中文字符宽度约为英文 2 倍，节点宽度按 14px × 字数 × 0.7 估算
概念名称控制在 2-10 个汉字
连接线标注使用 4-8 个汉字

输出要求

始终生成一个独立的 .html 文件，包含：

内嵌 CSS（含主题变量）
多张内联 SVG（按段落拆分）
少量 JavaScript 用于主题切换
文件可直接在浏览器中打开

Cowrite 内嵌模式

当 Cowrite 口令要求“HTML/PPT 解释图”时，使用以下覆盖规则：

只输出一张 16:9 单页逻辑图，信息密度按一页 PPT 控制
使用浅色白底主题，全部 CSS 与 SVG 内联，不引用外部资源
不生成页眉、主题切换、概览卡片、页脚、Logo 或水印
中文文字必须清晰，优先使用系统中文字体栈
产物保存为独立 .html 文件，随后交给 cowriteuploadasset 与 cowriteinsertafter

text-logic-diagram

Installation

Summary

Stronger alternatives

Similar popular skills

Also in this package

Agent compatibility

Repository health

Skill metadata

Package contents

History

SKILL.md

文本逻辑关系图

触发条件

工作流程

第一步：文本分析

第二步：概念抽象

第三步：生成 SVG 图

设计系统

主题系统

深色主题（默认）

浅色主题

字体规范

SVG 规范

通用规范

节点样式

连接线样式

关系类型视觉规范

递进关系

流程关系

循环关系

层次结构

对比关系

矩阵关系

页面布局

多图排列模板

中文适配规则

输出要求

Cowrite 内嵌模式