ahang1598 诉讼可视化
基于四步绘图法，将复杂的案件信息转化为直观、交互式的 HTML 图表。产出单文件 .html，浏览器直接打开，无需任何外部依赖。
适用场景
- 用户要求对案件进行可视化呈现
- 需要绘制法律关系图、时间线图、流程图等
- 跨 skill 联动调用（如案件事实梳理、要件攻防分析等）
四步绘图法
第一步：确定图表类型
根据用户需求和材料内容，从十大典型图表模式中选择最合适的类型：
| 序号 | 图表类型 | 适用场景 | 核心要素 |
|---|---|---|---|
| 1 | 法律关系图 | 多主体间权利义务关系 | 主体节点 + 法律关系连线 |
| 2 | 时间线图 | 案件事实发展脉络 | 时间轴 + 事件节点 + 标注 |
| 3 | 资金流向图 | 资金往来、转账路径 | 账户节点 + 金额标注箭头 |
| 4 | 股权结构图 | 公司股权、控制关系 | 公司/自然人节点 + 持股比例 |
| 5 | 合同关系图 | 多方合同网络 | 主体节点 + 合同类型连线 |
| 6 | 争议焦点图 | 诉辩主张对比 | 焦点中心 + 原被告观点分支 |
| 7 | 证据链图 | 证据之间的印证关系 | 证据节点 + 印证/矛盾连线 |
| 8 | 诉讼流程图 | 程序性步骤展示 | 流程节点 + 条件分支 |
| 9 | 组织架构图 | 公司内部层级/关联关系 | 层级节点 + 隶属连线 |
| 10 | 因果关系图 | 侵权/违约因果链条 | 原因→结果的有向链路 |
选型原则：
- 若用户明确指定类型，直接采用
- 若未指定，根据材料内容自动推荐最合适的 1-2 种类型
- 复杂案件可组合多种图表类型
第二步：确定信息结构
从材料中提取并组织图表所需的结构化信息：
- 识别节点：确定图中所有实体（人、公司、事件、证据等）
- 识别关系：确定节点间的连接关系及其性质
- 确定层级：安排节点的空间位置和层次结构
- 标注信息：确定每条连线/节点需要显示的关键文字
信息提取清单：
- 主体清单：[ 名称, 类型(自然人/法人/其他), 角色(原告/被告/第三人) ]
- 关系清单：[ 主体A → 主体B, 关系类型, 关键描述 ]
- 时间要素：[ 日期, 关联事件 ]（时间线图必选）
- 金额要素：[ 数额, 方向, 用途 ]（资金流向图必选）
第三步：构建 HTML 图表
📎 加载
references/diagram-patterns.md作为法律图表构图模式与视觉规范参考。
将结构化信息转化为单文件 HTML：
- 使用 SVG 绘制节点和连线（矢量清晰、缩放无损）
- 按层级排布节点位置（自动计算坐标避免重叠）
- 绘制连接线并标注关系文字
- 应用配色规范
- 添加交互能力（悬停高亮、点击展开详情、缩放平移）
第四步：美化输出
- 统一字体大小和节点尺寸
- 调整布局对齐
- 添加图例说明
- 检查连线交叉，优化路径
- 添加标题和摘要区域
配色规范
| 角色 | 填充色 | 边框色 | 文字色 | 用途说明 |
|---|---|---|---|---|
| 原告方 | #dae8fc | #6c8ebf | #333333 | 原告、原告关联方 |
| 被告方 | #f8cecc | #b85450 | #333333 | 被告、被告关联方 |
| 法院/仲裁 | #d5e8d4 | #82b366 | #333333 | 司法机关、仲裁机构 |
| 第三方/中立 | #e1d5e7 | #9673a6 | #333333 | 第三人、鉴定机构等 |
| 事件节点 | #fff2cc | #d6b656 | #333333 | 时间线中的事件 |
| 证据节点 | #f5f5f5 | #666666 | #333333 | 证据材料 |
| 高亮/重要 | #ffe6cc | #d79b00 | #333333 | 需要重点关注的元素 |
HTML 输出规范
单文件结构
所有 CSS、SVG、JavaScript 内联于一个 .html 文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{图表标题}</title>
<style>
/* 全部样式内联 */
</style>
</head>
<body>
<div class="chart-header">
<h1>{图表标题}</h1>
<p class="subtitle">{案件简称} · {图表类型}</p>
</div>
<div class="chart-container">
<svg id="chart" viewBox="..." xmlns="http://www.w3.org/2000/svg">
<!-- 节点和连线 -->
</svg>
</div>
<div class="legend">
<!-- 图例 -->
</div>
<script>
/* 交互逻辑：悬停高亮、缩放平移 */
</script>
</body>
</html>
SVG 节点定义
<!-- 矩形节点（适用于主体） -->
<g class="node" data-id="entity-1" data-role="plaintiff">
<rect x="100" y="100" width="120" height="60" rx="8"
fill="#dae8fc" stroke="#6c8ebf" stroke-width="2"/>
<text x="160" y="135" text-anchor="middle" font-size="13">节点文字</text>
</g>
<!-- 椭圆节点（适用于事件） -->
<g class="node" data-id="event-1">
<ellipse cx="300" cy="135" rx="70" ry="35"
fill="#fff2cc" stroke="#d6b656" stroke-width="2"/>
<text x="300" y="140" text-anchor="middle" font-size="12">事件描述</text>
</g>
SVG 连接线定义
<!-- 实线箭头（确定关系） -->
<g class="edge">
<path d="M220,130 C280,130 280,200 340,200"
fill="none" stroke="#666" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="280" y="155" text-anchor="middle" font-size="11" fill="#555">合同关系</text>
</g>
<!-- 虚线箭头（间接关系/待证事实） -->
<g class="edge dashed">
<path d="M220,130 L340,200"
fill="none" stroke="#999" stroke-width="1.5" stroke-dasharray="6,4"/>
<text x="280" y="155" text-anchor="middle" font-size="11" fill="#888">疑似关联</text>
</g>
交互能力
// 必须实现的交互：
// 1. 悬停高亮：鼠标悬停节点时高亮其关联连线
// 2. 缩放平移：鼠标滚轮缩放，拖拽平移画布
// 3. 详情弹窗：点击节点展示详细信息（可选）
// 4. 响应式：窗口缩放时 SVG 自适应
布局计算原则
- 节点间最小水平间距：80px
- 节点间最小垂直间距：60px
- 画布留白：上下左右各 40px
- 同层级节点水平对齐
- 层级间使用固定垂直间隔（建议 140px）
- 整体布局方向：法律关系图用力导向/自由布局，时间线用水平排列，层级结构用树形布局
执行流程
用户输入需求/材料
│
▼
┌─────────────────────┐
│ 第一步：确定图表类型 │
│ 分析需求 → 选型 │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ 第二步：确定信息结构 │
│ 提取节点 → 识别关系 │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ 第三步：构建 HTML │
│ SVG绘制 → 交互实现 │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ 第四步：美化输出 │
│ 配色 → 对齐 → 图例 │
└──────────┬──────────┘
│
▼
┌─────────────────────┐
│ 写入 .html 文件 │
│ 交付用户 │
└─────────────────────┘
各类型图表绘制要点
1. 法律关系图
- 主体用圆角矩形，按角色配色
- 关系用带标签的有向箭头
- 双向关系用双向箭头
- 核心主体居中，关联方环绕
- 标注关系性质（合同、侵权、担保等）和关键条款
2. 时间线图
- 时间轴为水平或垂直主线
- 事件节点均匀分布在轴线两侧
- 用颜色区分不同主体的行为
- 关键时间节点放大或高亮
- 标注具体日期和事件摘要
3. 资金流向图
- 账户/主体为节点
- 转账关系为带金额标注的有向箭头
- 线条粗细可反映金额大小
- 同一笔款项的拆分/汇合用分支表示
- 标注转账日期和用途
4. 股权结构图
- 树形自上而下布局
- 实际控制人置顶
- 持股比例标注在连线上
- 用虚线表示间接控制/一致行动关系
- 标注公司注册资本和实缴情况
5. 争议焦点图
- 争议焦点居中（菱形节点）
- 原告观点在左侧（蓝色系）
- 被告观点在右侧（红色系）
- 每个观点下方链接支撑证据
- 法院倾向性观点可用绿色标注
6. 证据链图
- 证据节点排列在中间
- 印证关系用实线双向连接
- 矛盾关系用红色虚线标注
- 证据分组（按时间/按主题）
- 关键证据用高亮标记
输出规范
- 输出格式：单文件
.html，浏览器直接打开 - 附加输出：提供图表文字说明（简述图中展示的核心信息）
- 无外部依赖：不引用 CDN 或外部资源——所有样式/脚本内联
- 打印友好：包含
@media print样式（隐藏交互元素、优化打印布局）
文件命名规范
{案件简称}_{图表类型}_{日期}.html
示例：张三诉李四_法律关系图_20240315.html
质量检查清单
📎 加载
references/quality-checklist.md作为图表质量检查清单。
- 所有节点文字清晰可读
- 配色符合角色规范
- 连线无遗漏（所有关系已表达）
- 布局无重叠
- 关键信息有标注
- HTML 浏览器直接打开正常显示
- 交互功能正常（悬停高亮、缩放平移）
- 图例完整（含配色说明）
- 无外部资源引用（完全自包含）
注意事项
- 信息准确性：图表中的事实信息必须严格来源于用户提供的材料，不得臆测
- 适度简化：复杂关系可分多张图表示，单张图节点建议不超过 15 个
- 中文支持：所有文字标注使用中文，SVG 中使用系统默认无衬线字体
- 可打印：图表应在 A4 纸上清晰可读（汇报/庭审用途）
- 零依赖：单文件 HTML 不依赖任何外部工具或服务，用户直接用浏览器打开
跨 Skill 调用接口
其他 skill 调用本技能时，应提供以下信息：
调用方式：调用「诉讼可视化」skill
输入参数：
- chart_type: 图表类型（从十大类型中选择）
- entities: 实体列表（名称、类型、角色）
- relations: 关系列表（主体A、主体B、关系类型、描述）
- title: 图表标题
- additional_info: 补充说明（可选）
输出：单文件 .html
本技能将根据输入参数自动执行四步绘图法，生成并输出图表。