// 将文本内容进行逻辑拆解，生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文，一次可拆解多张图。
| name | text-logic-diagram |
| description | 将文本内容进行逻辑拆解，生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文，一次可拆解多张图。 |
| license | MIT |
| metadata | {"version":"1.1","author":"Text Logic Diagram Skill"} |
将文本转换为精准的逻辑关系 SVG 图，输出为独立 HTML 文件。
当用户提到以下场景时，主动使用此技能：
| 关系类型 | 适用场景 | 视觉特征 |
|---|---|---|
| 递进关系 | 概念渐进发展、层层深入 | 阶梯式排列，箭头从左到右或从上到下 |
| 流程关系 | 步骤顺序、阶段推进 | 线性/蛇形排列，带编号的节点 |
| 循环关系 | 概念循环往复、闭环反馈 | 环形排列，首尾相连 |
| 层次结构 | 包含、从属、分类关系 | 树形/金字塔/嵌套结构 |
| 对比关系 | 对照、比较、优劣分析 | 左右/上下对称排列 |
| 矩阵关系 | 多维度交叉、复杂关联 | 网格/象限布局 |
根据分析结果，使用本技能的设计规范生成 HTML 文件。
多段拆解规则：
<div class="diagram-card"> 容器支持深色和浅色主题切换，默认深色。
融合 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 (赭石) |
0 0 800 500，按需调整dx=1.5, dy=1.5, stdDeviation=2<!-- 带阴影的圆角矩形节点 -->
<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>
<!-- 标准连接线 -->
<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)"/>
<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>
始终生成一个独立的 .html 文件，包含：
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
生成设计美观的图表 HTML 文件。支持 10 种图表类型：流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。