法律案件視覺化
📖 技能介紹
name: legal-case-visualizer description: 法律案件分析報告視覺化工具，將案件分析報告中的主體關係、債權鏈條、時間軸、風險矩陣等核心內容轉換為專業SVG圖表，供律師直觀閱讀。本技能應在使用者需要將法律案件分析報告（如iterative-analysis技能輸出的報告）中的文字描述轉化為視覺化圖表時使用。不要用於：生成非法律類圖表、通用資料視覺化、程式碼結構分析。 license: CC BY-NC-SA 4.0 - 詳見 LICENSE.txt
legal-case-visualizer（最佳化版）
目標：把法律案件報告轉成可直接交付的 HTML 視覺化報告，圖表使用內嵌 SVG，支援瀏覽器內一鍵匯出 PDF（列印為 PDF）。
1. 適用邊界
僅用於法律案件報告視覺化，特別是執行、追償、擔保、債權轉讓、關聯主體分析場景。
不用於通用 BI 圖表、財務分析儀表盤、程式碼架構圖。
2. 強制原則（本技能核心）
2.1 事實分層（必須執行）
先把資訊分成兩層，再畫圖：
- A層：核心確認法律事實（可入主圖實線）
- 生效判決/裁定/調解書
- 已簽署合同、擔保檔案、登記資訊
- 已發生執行措施（查封、拍賣、以物抵債、終本等）
- B層：待核實線索（僅可用虛線或“待核實”標籤）
- “疑似”“可能”“待查詢”事項
- 外部平臺關係圈線索但無文書支撐事項
2.2 視覺化邏輯
- 主圖先展示 A 層事實關係，再附 B 層補充線索。
- 不得把 B 層線索畫成既定結論。
- 文件順序優先，圖表順序與原報告模組一致。
2.3 技術極簡
僅用：
HTML + CSS + SVG + 少量原生JS- PDF 匯出僅用瀏覽器列印：
window.print()
禁止引入複雜前端框架。
3. 輸出物標準（預設）
預設輸出一個檔案：案件視覺化報告.html
該檔案應包含：
- 頂部工具欄（標題、匯出按鈕）
- 按報告順序排列的章節
- 每章一個或多個 SVG 圖
- 頁尾“事實依據說明/版本資訊”
4. 標準章節順序（按文件邏輯）
按原報告順序排版：
案件摘要（文字卡片）圖V1 主體關係網路圖圖V2 債權轉讓與擔保鏈條圖圖V3 案件時間軸圖圖V4 資產狀況與追償路徑圖圖V5 風險矩陣圖圖V6 行動優先順序圖事實依據與核驗說明7w4.net小蔥技能。
若源報告缺少某類資料，可省略對應圖，但須寫“未生成原因”。
5. 圖表規則（簡化且可執行）
5.1 V1 主體關係網路圖
目的：展示控制關係、債權關係、擔保關係、執行主體關係。
要求：
- 主體型別分形狀（自然人圓、公司圓角矩形）
- A層事實連線為實線；B層線索連線為虛線並標“待核實”
- 被執行人邊框紅色，申請執行人邊框綠色
5.2 V2 債權鏈條圖
目的：展示“原始債權人→受讓鏈→現債權人”，並並列展示借款/擔保結構。
要求：
- 左側債權轉讓縱向鏈
- 右側借款與擔保關係
- 金額統一單位（萬元/億元）並標註口徑
5.3 V3 時間軸圖
目的：展示關鍵法律事件的先後關係。
要求：
- 節點必須有日期
- 事件分色：借款、違約、轉讓、執行、裁判
- 異常事項必須有“待核實/異常”標記
5.4 V4 資產與追償圖
目的：展示已處置資產、可執行資產、潛在追償路徑。
要求：
- 三列布局：已處置 / 可執行 / 追償路徑
- 每項標註狀態（已處置/輪候查封/待核實）
5.5 V5 風險矩陣
目的：展示風險等級與緊迫程度。
要求：
- 風險點必須來自報告文本，不憑空新增
- 每個風險點附簡要法律後果
5.6 V6 行動優先順序圖
目的：展示執行動作與時間安排。
要求：
- 維度至少包含：任務、責任主體、時限、優先順序
- 與報告行動計劃逐項對應
6. 一鍵匯出 PDF（強制支援）
HTML 內必須包含“匯出PDF”按鈕，呼叫：
<button onclick="window.print()">匯出PDF</button>
並配置列印樣式：
@media print {
.toolbar { display: none; }
.section { break-inside: avoid; page-break-inside: avoid; }
@page { size: A4 portrait; margin: 12mm; }
}
說明：瀏覽器執行“列印為 PDF”即完成匯出，屬於最簡、穩定方案。
7. HTML 最小模板（直接複用）
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>法律案件視覺化報告</title>
<style>
:root{
--bg:#f5f7fa; --card:#fff; --text:#1f2d3d; --line:#d9e1e8;
--primary:#1a3a5c; --danger:#e05a47; --warn:#d4a017; --ok:#2e7d32;
}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;}
.toolbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);}
.main{max-width:1200px;margin:16px auto;padding:0 12px;}
.section{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;}
h1,h2{margin:0 0 10px 0;color:var(--primary);}
.note{font-size:12px;color:#5b6b7b}
svg{width:100%;height:auto;border:1px solid #eef2f6;border-radius:8px;background:#fff}
@media print{
.toolbar{display:none}
.section{break-inside:avoid;page-break-inside:avoid}
@page{size:A4 portrait;margin:12mm}
body{background:#fff}
}
</style>
</head>
<body>
<div class="toolbar">
<strong>法律案件視覺化報告</strong>
<button onclick="window.print()">匯出PDF</button>
</div>
<main class="main">
<section class="section"><h2>案件摘要</h2></section>
<section class="section"><h2>圖V1 主體關係網路圖</h2><!-- svg --></section>
<section class="section"><h2>圖V2 債權轉讓與擔保鏈條圖</h2><!-- svg --></section>
<section class="section"><h2>圖V3 案件時間軸圖</h2><!-- svg --></section>
<section class="section"><h2>圖V4 資產狀況與追償路徑圖</h2><!-- svg --></section>
<section class="section"><h2>圖V5 風險矩陣圖</h2><!-- svg --></section>
<section class="section"><h2>圖V6 行動優先順序圖</h2><!-- svg --></section>
<section class="section"><h2>事實依據與核驗說明</h2></section>
</main>
</body>
</html>
8. 工作流程（執行版）
Step 1：讀取報告並抽取事實
- 建立“事實清單表”：主體、關係、金額、時間、證據來源、事實層級（A/B）
Step 2：先出結構再出圖
- 確認章節順序與圖表範圍
- 先排版 HTML 骨架，再填充 SVG
Step 3：生成 SVG
- 一圖一義，避免資訊過載
- 每張圖底部給出“事實口徑說明”
Step 4：嵌入匯出能力
- 頂部固定匯出按鈕
- 列印樣式確保 A4 可讀
Step 5：質檢
- 事實準確性（A/B層是否混淆）
- 視覺可讀性（字號、間距、色彩）
- 匯出可用性（按鈕可觸發列印）
9. 輸出格式要求
優先輸出完整 HTML 檔案內容或直接寫入 *.html 檔案。
如使用者仍要求 Markdown，則在 Markdown 中內嵌完整 HTML 程式碼塊，並明確“可另存為 html 後一鍵匯出 PDF”。
10. 質量檢查清單（交付前必須通過）
- [ ] 圖表順序與原報告模組順序一致
- [ ] 主圖只使用 A 層核心確認事實
- [ ] B 層線索全部有“待核實”標註
- [ ] 所有金額、時間、案號與原文一致
- [ ] HTML 在瀏覽器可直接開啟
- [ ] “匯出PDF”按鈕可用（觸發列印）
- [ ] 列印後版面未明顯錯位
11. 與其他技能配合
- 上游：
iterative-analysis/legal-case-analysis（提供案件事實與結構化文本） - 下游：可直接交付 HTML；如需文件化可再交由其他技能轉存
本技能已內建 HTML 與 PDF 匯出能力，通常無需額外轉換技能。
🤖 AI 評測
這個 Skill 質量較好，文件規範詳細，圖表配色專業，可直接生成 HTML 報告並匯出 PDF，適合法律從業者使用。但部分圖表規範缺失，缺少完整的使用示例，複雜案件的處理指導不足，整體完成度還有提升空間。
