agentsclimarketplace
Sign in

Litigation visualization

Skill Youchu-lawhub/cn-litigation-toolkit/skills/litigation-visualization

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

Install
npx -y skills add Youchu-lawhub/cn-litigation-toolkit --skill litigation-visualization

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 20 stars20 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

11.8 KB, ~4.2k tokens by cl100k_base, as published. Nobody here has run it

诉讼可视化（litigation-visualization）

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

<!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. 证据链图

  • 证据节点排列在中间
  • 印证关系用实线双向连接
  • 矛盾关系用红色虚线标注
  • 证据分组（按时间/按主题）
  • 关键证据用高亮标记

输出规范

  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

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

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

案件管家联动（强制）

本 skill 完成产出后，必须在输出文档之前调用「案件管家」的台账回写协议，六步流程 / 降级 / 不阻塞规则统一由套件 Hub 维护：

协议单一权威源：skills/case-manager/references/downstream-writeback-protocol.md 入口条款：/case-manager SKILL.md §0.7

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

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

What ships with it: 2 files

6.5 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.