# Legal Architecture

> 生成专业的法律结构可视化图，输出为自包含 HTML 文件（内嵌 SVG，浅色主题，适合打印和嵌入文档）。适用场景：(1) 用户要求"画结构图""生成可视化""做流程图""法律图示"时；(2) 涉及诉讼推理结构（当事人→证据→事实→法律→判决）；(3) 合同关系图（甲乙方权利义务、履约节点、违约责任）；(4) 法规程序图（申请→审查→决定→救济）；(5) 证据链图、请求权基础分析图、法律体系层级图。Use when the user asks for litigation flow diagrams, contract relationship diagrams, legal reasoning structure diagrams, evidence chain diagrams, or any legal visualization.

- **Type:** Skill
- **Install:** `agentstack add skill-zh-xx-legal-assistant-skills-legal-architecture`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [zh-xx](https://agentstack.voostack.com/s/zh-xx)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [zh-xx](https://github.com/zh-xx)
- **Source:** https://github.com/zh-xx/legal-assistant-skills/tree/main/legal-architecture

## Install

```sh
agentstack add skill-zh-xx-legal-assistant-skills-legal-architecture
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Legal Diagram Skill

Create professional legal structure diagrams as self-contained HTML files with inline SVG. Designed for court document analysis, contract review, legal knowledge management, and client presentations. Output is light-themed and print-ready.

## Design System

### Color Palette

Use these semantic colors for legal component types:

| Component Type | Fill (rgba) | Stroke | Use Case |
|---|---|---|---|
| 当事人/主体 (Party) | `rgba(219,234,254,0.9)` | `#2563eb` (blue-600) | 原告、被告、甲方、乙方、第三人 |
| 事实/行为 (Fact) | `rgba(241,245,249,0.9)` | `#475569` (slate-600) | 侵权行为、违约事实、案件经过 |
| 证据 (Evidence) | `rgba(254,243,199,0.9)` | `#b45309` (amber-700) | 书证、物证、证人证言、鉴定意见 |
| 法律规范 (Law) | `rgba(209,250,229,0.9)` | `#047857` (emerald-700) | 法条、司法解释、行政法规 |
| 程序节点 (Procedure) | `rgba(237,233,254,0.9)` | `#6d28d9` (violet-700) | 立案、开庭、举证、质证、裁定 |
| 裁判/结论 (Judgment) | `rgba(254,226,226,0.9)` | `#b91c1c` (red-700) | 判决主文、责任认定、风险结论 |
| 争议焦点 (Issue) | `rgba(255,237,213,0.9)` | `#c2410c` (orange-700) | 争议焦点、待查明事实 |

### Typography

Use Inter for all text — clean, professional, print-friendly:
```html

```

Font sizes: 12px for primary labels, 10px for secondary, 9px for annotations, 8px for tiny labels.

### Visual Elements

**Background:** `#f8fafc` with subtle light grid:
```svg

  

```

**Component boxes:** Rounded rectangles (`rx="6"`) with 1.5px stroke.
Always draw an opaque white background rect FIRST to mask arrows behind boxes:
```svg

```

**Arrows — standard flow:**
```svg

  

```

**Arrows — judgment emphasis (red):**
```svg

  

```

**Cross-layer or indirect logical connections:** Use dashed lines:
```svg
stroke-dasharray="4,3"
```

**Arrow z-order:** ALWAYS draw all arrows BEFORE component boxes in the SVG. SVG renders in document order, so arrows drawn first appear behind boxes drawn later.

### Layout Patterns

Choose the layout based on content type:

**1. 诉讼流程图 (Litigation Flow)** — top-to-bottom layered with group boxes

For: case analysis, judgment structure, evidence → fact → law → judgment chain.

**PREFERRED PATTERN — dashed group boxes + single vertical arrows:**

Each reasoning stage is enclosed in a dashed group box with a badge label straddling its top-left border. Stages connect via a single purely vertical arrow in the center (x=500 for a 1000-wide viewBox). No node-to-node arrows across stages — this avoids visual clutter and false logical implications.

```
┌─────────────────────────────────┐
│ [当事人]  原告 ●●● 被告          │  ← group box, dashed border
└─────────────────────────────────┘
              ↓  (single arrow at center x)
┌─────────────────────────────────┐
│ [争议焦点] 焦点一  焦点二         │
└─────────────────────────────────┘
              ↓
  ... etc through 证据 → 事实认定 → 法律适用 → 判决结果
```

Group box SVG pattern (badge label straddles top-left border):
```svg

争议焦点
```

Vertical gap between group boxes: 28–32px. Place one arrow per gap:
```svg

```

Within each group box, items are arranged horizontally (no intra-group arrows needed — spatial proximity implies relationship). Reserve arrows for cross-group logical flow only.

**2. 合同关系图 (Contract Relationship)** — hub-and-spoke or two-column
For: contract parties, rights/obligations flow, key clause mapping
```
甲方 ←→ 合同核心义务 ←→ 乙方
         ↓
    履约条件/违约责任
```

**3. 法律体系图 (Legal Framework)** — tree or hierarchical
For: legal concepts, regulatory hierarchy, claim basis analysis (请求权基础)
```
上位法 → 下位法 → 实施细则/司法解释
```

### Spacing Rules

**CRITICAL:** Avoid element overlaps:
- Standard component height: 55-60px for single-line, 75-90px for multi-line
- Minimum vertical gap between rows: 38px
- Minimum horizontal gap between same-row items: 15px
- Use equal start/end margins: startX = (viewBoxWidth - totalRowWidth) / 2

**Row width calculation:**
```
totalRowWidth = N * boxWidth + (N-1) * gap
startX = (viewBoxWidth - totalRowWidth) / 2
```

### Legend Placement

Place legend BELOW all diagram content, at least 20px below the lowest element. Use a light rounded-rectangle background. Arrange legend items horizontally.

### Page Structure

1. **Header** — title (with colored status dot), subtitle (case number / date / court)
2. **Diagram card** — white card with border-shadow, contains SVG
3. **Info cards** — 3-column grid with metadata (parties, evidence summary, judgment key points)
4. **Footer** — case number and skill attribution

## Output Format

Always produce a single self-contained `.html` file:
- Embedded CSS only (Google Fonts link allowed)
- Inline SVG (no external images or scripts)
- Light background (`#f8fafc`) — suitable for printing and embedding in Word/PPT
- No JavaScript required

File should open and render correctly in any modern browser, and look professional when printed.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [zh-xx](https://github.com/zh-xx)
- **Source:** [zh-xx/legal-assistant-skills](https://github.com/zh-xx/legal-assistant-skills)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-zh-xx-legal-assistant-skills-legal-architecture
- Seller: https://agentstack.voostack.com/s/zh-xx
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.