文本逻辑关系图
将文本转换为精准的逻辑关系 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。
触发条件
当用户提到以下场景时，主动使用此技能：
- "生成逻辑图" / "画逻辑关系图" / "文本转图"
- "逻辑拆解" / "拆成图" / "可视化"
- 用户粘贴了文章/段落/论述内容并要求分析逻辑
- "递进图" / "流程图" / "循环图" / "层次图" / "对比图" / "矩阵图"
- 用户要求对文本进行结构化可视化
工作流程
第一步：文本分析
- 通读全文，识别文本中的核心论点、关键概念和逻辑链条
- 段落拆解，将文本按自然段落或逻辑段落分割
- 判断关系类型，为每个段落选择最适合的逻辑关系：
| 关系类型 | 适用场景 | 视觉特征 |
|---|---|---|
| 递进关系 | 概念渐进发展、层层深入 | 阶梯式排列，箭头从左到右或从上到下 |
| 流程关系 | 步骤顺序、阶段推进 | 线性/蛇形排列，带编号的节点 |
| 循环关系 | 概念循环往复、闭环反馈 | 环形排列，首尾相连 |
| 层次结构 | 包含、从属、分类关系 | 树形/金字塔/嵌套结构 |
| 对比关系 | 对照、比较、优劣分析 | 左右/上下对称排列 |
| 矩阵关系 | 多维度交叉、复杂关联 | 网格/象限布局 |
第二步：概念抽象
- 提取关键词：从每个段落中提取 2-6 个核心概念
- 精简文字：每个概念节点文字控制在 15 字以内
- 标注关系：概念之间的连接线和箭头标注简要说明
- 分层整理：区分主要概念和次要概念
第三步：生成 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 (赭石) |
字体规范
- 全局使用 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
节点样式
svg<!-- 带阴影的圆角矩形节点 --> <rect x="X" y="Y" width="W" height="H" rx="8" class="svg-node" stroke="#7a6e5e" stroke-width="1.5" filter="url(#shadow)"/> <text x="CX" y="CY" class="svg-text-primary" font-size="14" font-weight="600" text-anchor="middle">概念名称</text>
连接线样式
svg<!-- 标准连接线 --> <line x1="X1" y1="Y1" x2="X2" y2="Y2" class="svg-line" stroke-width="1" marker-end="url(#arrow)"/> <!-- 虚线连接（表示弱关系/隐含关系） --> <line x1="X1" y1="Y1" x2="X2" y2="Y2" class="svg-line" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrow)"/> <!-- 曲线连接（避开障碍物） --> <path d="M X1 Y1 Q CX CY X2 Y2" class="svg-line" stroke-width="1" fill="none" marker-end="url(#arrow)"/>
关系类型视觉规范
递进关系
- 从左到右阶梯式排列
- 节点逐渐升高或尺寸逐渐增大
- 箭头方向统一向右
- 可用编号标注顺序（①②③）
- 每层之间用浅色背景区分层级
流程关系
- 线性排列或蛇形排列（超过 4 个节点时折行）
- 每个节点带步骤编号（圆形徽章）
- 连接线使用实线箭头
- 起始节点用深色强调，结束节点用特殊样式
- 分支点使用菱形节点
循环关系
- 环形排列，首尾相连
- 中心可放置核心概念
- 连接线沿环形方向
- 使用弧线连接而非直线
- 箭头指向下一个节点
层次结构
- 树形结构：根节点在上，子节点在下
- 或金字塔结构：底部宽，顶部窄
- 同级节点水平对齐
- 父子关系用竖线连接
- 可用嵌套矩形表示包含关系
对比关系
- 左右对称布局
- 中间用竖线或 VS 分隔
- 左侧和右侧使用不同色调（如蓝色 vs 橙色）
- 共同点放在中间或上方
- 差异点分列两侧
矩阵关系
- 网格布局（2×2、3×3 等）
- 行列表头标注维度
- 每个单元格内放置概念
- 象限式分区（用浅色背景区分）
- 对角线关系用特殊颜色标注
页面布局
- 页眉 - 标题 + 源文本简述 + 主题切换按钮
- 概览卡片 - 显示检测到的关系类型和概念数量
- 图表区域 - 多张 SVG 图按顺序排列，每张图带标题标签
- 页脚 - 元数据
多图排列模板
html<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 用于主题切换
- 文件可直接在浏览器中打开
