# 诉讼可视化 > 将案件事实、法律关系、诉讼策略转化为交互式 HTML 可视化图表。 当用户需要可视化、关系图、流程图、时间线图、 股权结构图、资金流向图、证据链图时使用此技能。 - Skill: `ahang1598/skill-98` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add ahang1598/skill-98` - Raw SKILL.md: https://api.skillmd.com/api/skills/ahang1598/skill-98/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: ahang1598 (https://skillmd.com/u/ahang1598) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/ahang1598/skill-98 --- # 诉讼可视化 基于四步绘图法，将复杂的案件信息转化为直观、交互式的 HTML 图表。产出单文件 `.html`，浏览器直接打开，无需任何外部依赖。 --- ## 适用场景 - 用户要求对案件进行可视化呈现 - 需要绘制法律关系图、时间线图、流程图等 - 跨 skill 联动调用（如案件事实梳理、要件攻防分析等） --- ## 四步绘图法 ### 第一步：确定图表类型 根据用户需求和材料内容，从十大典型图表模式中选择最合适的类型： | 序号 | 图表类型 | 适用场景 | 核心要素 | |------|----------|----------|----------| | 1 | 法律关系图 | 多主体间权利义务关系 | 主体节点 + 法律关系连线 | | 2 | 时间线图 | 案件事实发展脉络 | 时间轴 + 事件节点 + 标注 | | 3 | 资金流向图 | 资金往来、转账路径 | 账户节点 + 金额标注箭头 | | 4 | 股权结构图 | 公司股权、控制关系 | 公司/自然人节点 + 持股比例 | | 5 | 合同关系图 | 多方合同网络 | 主体节点 + 合同类型连线 | | 6 | 争议焦点图 | 诉辩主张对比 | 焦点中心 + 原被告观点分支 | | 7 | 证据链图 | 证据之间的印证关系 | 证据节点 + 印证/矛盾连线 | | 8 | 诉讼流程图 | 程序性步骤展示 | 流程节点 + 条件分支 | | 9 | 组织架构图 | 公司内部层级/关联关系 | 层级节点 + 隶属连线 | | 10 | 因果关系图 | 侵权/违约因果链条 | 原因→结果的有向链路 | **选型原则：** - 若用户明确指定类型，直接采用 - 若未指定，根据材料内容自动推荐最合适的 1-2 种类型 - 复杂案件可组合多种图表类型 ### 第二步：确定信息结构 从材料中提取并组织图表所需的结构化信息： 1. **识别节点**：确定图中所有实体（人、公司、事件、证据等） 2. **识别关系**：确定节点间的连接关系及其性质 3. **确定层级**：安排节点的空间位置和层次结构 4. **标注信息**：确定每条连线/节点需要显示的关键文字 **信息提取清单：** ``` - 主体清单：[ 名称, 类型(自然人/法人/其他), 角色(原告/被告/第三人) ] - 关系清单：[ 主体A → 主体B, 关系类型, 关键描述 ] - 时间要素：[ 日期, 关联事件 ]（时间线图必选） - 金额要素：[ 数额, 方向, 用途 ]（资金流向图必选） ``` ### 第三步：构建 HTML 图表 > 📎 加载 `references/diagram-patterns.md` 作为法律图表构图模式与视觉规范参考。 将结构化信息转化为单文件 HTML： 1. 使用 SVG 绘制节点和连线（矢量清晰、缩放无损） 2. 按层级排布节点位置（自动计算坐标避免重叠） 3. 绘制连接线并标注关系文字 4. 应用配色规范 5. 添加交互能力（悬停高亮、点击展开详情、缩放平移） ### 第四步：美化输出 1. 统一字体大小和节点尺寸 2. 调整布局对齐 3. 添加图例说明 4. 检查连线交叉，优化路径 5. 添加标题和摘要区域 --- ## 配色规范 | 角色 | 填充色 | 边框色 | 文字色 | 用途说明 | |------|--------|--------|--------|----------| | 原告方 | #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` 文件： ```html {图表标题}

{图表标题}

{案件简称} · {图表类型}

``` ### SVG 节点定义 ```svg 节点文字 事件描述 ``` ### SVG 连接线定义 ```svg 合同关系 疑似关联 ``` ### 交互能力 ```javascript // 必须实现的交互： // 1. 悬停高亮：鼠标悬停节点时高亮其关联连线 // 2. 缩放平移：鼠标滚轮缩放，拖拽平移画布 // 3. 详情弹窗：点击节点展示详细信息（可选） // 4. 响应式：窗口缩放时 SVG 自适应 ``` ### 布局计算原则 - 节点间最小水平间距：80px - 节点间最小垂直间距：60px - 画布留白：上下左右各 40px - 同层级节点水平对齐 - 层级间使用固定垂直间隔（建议 140px） - 整体布局方向：法律关系图用力导向/自由布局，时间线用水平排列，层级结构用树形布局 --- ## 执行流程 ``` 用户输入需求/材料 │ ▼ ┌─────────────────────┐ │ 第一步：确定图表类型 │ │ 分析需求 → 选型 │ └──────────┬──────────┘ │ ▼ ┌─────────────────────┐ │ 第二步：确定信息结构 │ │ 提取节点 → 识别关系 │ └──────────┬──────────┘ │ ▼ ┌─────────────────────┐ │ 第三步：构建 HTML │ │ SVG绘制 → 交互实现 │ └──────────┬──────────┘ │ ▼ ┌─────────────────────┐ │ 第四步：美化输出 │ │ 配色 → 对齐 → 图例 │ └──────────┬──────────┘ │ ▼ ┌─────────────────────┐ │ 写入 .html 文件 │ │ 交付用户 │ └─────────────────────┘ ``` --- ## 各类型图表绘制要点 ### 1. 法律关系图 - 主体用圆角矩形，按角色配色 - 关系用带标签的有向箭头 - 双向关系用双向箭头 - 核心主体居中，关联方环绕 - 标注关系性质（合同、侵权、担保等）和关键条款 ### 2. 时间线图 - 时间轴为水平或垂直主线 - 事件节点均匀分布在轴线两侧 - 用颜色区分不同主体的行为 - 关键时间节点放大或高亮 - 标注具体日期和事件摘要 ### 3. 资金流向图 - 账户/主体为节点 - 转账关系为带金额标注的有向箭头 - 线条粗细可反映金额大小 - 同一笔款项的拆分/汇合用分支表示 - 标注转账日期和用途 ### 4. 股权结构图 - 树形自上而下布局 - 实际控制人置顶 - 持股比例标注在连线上 - 用虚线表示间接控制/一致行动关系 - 标注公司注册资本和实缴情况 ### 5. 争议焦点图 - 争议焦点居中（菱形节点） - 原告观点在左侧（蓝色系） - 被告观点在右侧（红色系） - 每个观点下方链接支撑证据 - 法院倾向性观点可用绿色标注 ### 6. 证据链图 - 证据节点排列在中间 - 印证关系用实线双向连接 - 矛盾关系用红色虚线标注 - 证据分组（按时间/按主题） - 关键证据用高亮标记 --- ## 输出规范 1. **输出格式**：单文件 `.html`，浏览器直接打开 2. **附加输出**：提供图表文字说明（简述图中展示的核心信息） 3. **无外部依赖**：不引用 CDN 或外部资源——所有样式/脚本内联 4. **打印友好**：包含 `@media print` 样式（隐藏交互元素、优化打印布局） ### 文件命名规范 ``` {案件简称}_{图表类型}_{日期}.html ``` 示例：`张三诉李四_法律关系图_20240315.html` --- ## 质量检查清单 > 📎 加载 `references/quality-checklist.md` 作为图表质量检查清单。 - [ ] 所有节点文字清晰可读 - [ ] 配色符合角色规范 - [ ] 连线无遗漏（所有关系已表达） - [ ] 布局无重叠 - [ ] 关键信息有标注 - [ ] HTML 浏览器直接打开正常显示 - [ ] 交互功能正常（悬停高亮、缩放平移） - [ ] 图例完整（含配色说明） - [ ] 无外部资源引用（完全自包含） --- ## 注意事项 1. **信息准确性**：图表中的事实信息必须严格来源于用户提供的材料，不得臆测 2. **适度简化**：复杂关系可分多张图表示，单张图节点建议不超过 15 个 3. **中文支持**：所有文字标注使用中文，SVG 中使用系统默认无衬线字体 4. **可打印**：图表应在 A4 纸上清晰可读（汇报/庭审用途） 5. **零依赖**：单文件 HTML 不依赖任何外部工具或服务，用户直接用浏览器打开 --- ## 跨 Skill 调用接口 其他 skill 调用本技能时，应提供以下信息： ``` 调用方式：调用「诉讼可视化」skill 输入参数： - chart_type: 图表类型（从十大类型中选择） - entities: 实体列表（名称、类型、角色） - relations: 关系列表（主体A、主体B、关系类型、描述） - title: 图表标题 - additional_info: 补充说明（可选） 输出：单文件 .html ``` 本技能将根据输入参数自动执行四步绘图法，生成并输出图表。