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:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

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

Visual Elements

Background: #f8fafc with subtle light grid:

<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#f1f5f9" stroke-width="0.8"/>
</pattern>

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

<rect x="X" y="Y" width="W" height="H" rx="6" fill="white"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(219,234,254,0.9)" stroke="#2563eb" stroke-width="1.5"/>

Arrows — standard flow:

<marker id="arr" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#94a3b8"/>
</marker>
<line x1="..." y1="..." x2="..." y2="..." stroke="#94a3b8" stroke-width="1.2" marker-end="url(#arr)"/>

Arrows — judgment emphasis (red):

<marker id="arr-red" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <polygon points="0 0, 8 3, 0 6" fill="#b91c1c"/>
</marker>

Cross-layer or indirect logical connections: Use dashed lines:

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):

<!-- Group box -->
<rect x="8" y="127" width="984" height="82" rx="8"
      fill="rgba(255,237,213,0.12)" stroke="#fb923c"
      stroke-width="1.2" stroke-dasharray="6,4"/>
<!-- Badge: rect behind text, centered on top border (y = group top - 8) -->
<rect x="14" y="119" width="64" height="16" rx="4"
      fill="rgba(255,237,213,0.95)" stroke="#fb923c" stroke-width="0.8"/>
<text x="46" y="131" fill="#9a3412" font-size="9" font-weight="600"
      text-anchor="middle" font-family="Inter,system-ui">争议焦点</text>

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

<line x1="500" y1="[group_bottom+2]" x2="500" y2="[next_group_top-2]"
      stroke="#64748b" stroke-width="1.5" marker-end="url(#arr)"/>
<!-- Final arrow to judgment box uses red: stroke="#b91c1c" stroke-width="2" marker-end="url(#arr-red)" -->

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.