agentsclimarketplace

Litigation visualization

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

中国民商事诉讼工具箱 — 面向执业律师与公司法务的全流程诉讼工具箱 (23 skills, MCP-agnostic, CC BY-NC-ND 4.0)

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.

3 things to look at

  • 26 days oldThe repository was created 26 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 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.
  • 7 stars7 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.

What its author says it does

Copied from the file, not written here

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

SKILL.md

11.8 KB, 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 / 图片）

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

Gives 0 of the 12 instructions most data analysis skills give

Counted across 286 of the 286 authors here whose files we hold, read 2026-08-06

  • use excel formulas instead of hardcoded calculated valuesin 35 of 286, across 7 files
  • match existing template conventions when modifying filesin 35 of 286, across 7 files
  • document sources for all hardcoded valuesin 35 of 286, across 7 files
  • write minimal concise python codein 35 of 286, across 7 files
  • place all assumptions in separate assumption cellsin 32 of 286, across 5 files
  • apply industry-standard color coding to financial modelsin 31 of 286, across 5 files
  • format years as text stringsin 30 of 286, across 3 files
  • recalculate formulas using recalc.py after modificationsin 30 of 286, across 3 files
  • format negative numbers using parenthesesin 30 of 286, across 3 files
  • fix all identified formula errors before finishingin 27 of 286, across 1 file
  • use colorblind-safe palettesin 19 of 286, across 12 files
  • Name tests after the prevented bugin 13 of 286, across 8 files

Said here and by no other author read

  • extract entities and relationships from materials
  • draw nodes and connections using SVG
  • inline all CSS, SVG, and JavaScript into the HTML
  • implement hover, zoom, and pan interactions
  • apply the specified role-based color scheme
  • add a legend to the chart

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. 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.