文本逻辑关系图

将文本转换为精准的逻辑关系 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 (赭石)