youchu-lawhub/cn-litigation-toolkit/litigation-visualization

Name: litigation-visualization
Author: youchu-lawhub

Claude Code and agent skill by youchu-lawhub/cn-litigation-toolkit

Trust tier 3

community

By youchu-lawhub
Design
youchu-lawhub/cn-litigation-toolkit
skills/litigation-visualization/SKILL.md
Updated 2 Oct 2026
Version 1.0.01 version recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

将案件事实、法律关系、诉讼策略转化为交互式 HTML 可视化图表。当用户需要可视化、关系图、流程图、时间线图、股权结构图、资金流向图、证据链图时使用此技能。

Install

npx vskill@latest install youchu-lawhub/cn-litigation-toolkit/litigation-visualization

SKILL.md

诉讼可视化（litigation-visualization）

基于四步绘图法，将复杂的案件信息转化为直观、交互式的 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 文件：

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 节点定义

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 连接线定义

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>

交互能力

javascript

// 必须实现的交互：
// 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

本技能将根据输入参数自动执行四步绘图法，生成并输出图表。

🔗 台账自动回写（强制）：在产出交付物之前，调用「案件管家」§0.7 自动同步接口：搜索台账 recordId → 追加案件进展"{日期}诉讼可视化图表已生成" → 下一步动作保持原值 → 写入。搜索无结果跳过回写并标注；回写失败不阻塞输出但标注"⚠️ 台账未自动更新"。

案件管家联动（强制）

本 skill 完成产出后，必须在输出文档之前调用「案件管家」的台账回写协议，六步流程 / 降级 / 不阻塞规则统一由套件 Hub 维护：
协议单一权威源：skills/case-manager/references/downstream-writeback-protocol.md
入口条款：/case-manager SKILL.md §0.7

本 skill 的产出：可视化图表（HTML / 图片）

差异化字段回写：下一步动作 → 归档 / 嵌入文书

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingskills/litigation-visualization/SKILL.md

Popularity

Repository stars: 23
Repository forks: 3
7-day trend score: 16

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/youchu-lawhub/cn-litigation-toolkit/litigation-visualization/badge)](https://verified-skill.com/skills/youchu-lawhub/cn-litigation-toolkit/litigation-visualization)

Something wrong with this skill or its page? Tell us.