诉讼可视化

Name: 诉讼可视化
Author: ahang1598

ASecurity

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

28 stars

0 votes

0 copies

0 views

Added 9/12/2026

developmentjavascriptjavanode

Security Analysis

A100/100

Scanned 9/12/2026

Install to Claude Code

$npx -y skills add ahang1598/doubao-workbuddy-qwenwork-skills --skill 诉讼可视化 --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of 诉讼可视化?

Add the live security badge to your README — it updates automatically with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/ahang1598-doubao-workbuddy-qwenwork-skills-4d91acff/badge)](https://www.skillsdirectory.com/skills/ahang1598-doubao-workbuddy-qwenwork-skills-4d91acff)

More formats (shields.io, HTML) on the badges page.

Files

SKILL.md

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

# 诉讼可视化

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

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

---

## 输出规范

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
```

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

诉讼可视化

Security Analysis

Attribution

Comments (0)