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/Subject (Party) | rgba(219,234,254,0.9) |
#2563eb (blue-600) |
Plaintiff, defendant, Party A, Party B, third party |
| Fact/Act (Fact) | rgba(241,245,249,0.9) |
#475569 (slate-600) |
Tortious act, facts of breach of contract, case history |
| Evidence (Evidence) | rgba(254,243,199,0.9) |
#b45309 (amber-700) |
Documentary evidence, physical evidence, witness testimony, expert opinion |
| Legal Norms (Law) | rgba(209,250,229,0.9) |
#047857 (emerald-700) |
Legal provisions, judicial interpretations, administrative regulations |
| Procedural Milestones (Procedure) | rgba(237,233,254,0.9) |
#6d28d9 (violet-700) |
Case filing, court hearing, presentation of evidence, cross-examination of evidence, ruling |
| Judgment/Conclusion (Judgment) | rgba(254,226,226,0.9) |
#b91c1c (red-700) |
Operative part of the judgment, determination of liability, risk conclusion |
| Issue in Dispute (Issue) | rgba(255,237,213,0.9) |
#c2410c (orange-700) |
Issues in dispute, facts to be ascertained |
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 Flowchart (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 Diagram (Contract Relationship) — hub-and-spoke or two-column For: contract parties, rights/obligations flow, key clause mapping
甲方 ←→ 合同核心义务 ←→ 乙方
↓
履约条件/违约责任
3. Legal System Diagram (Legal Framework) — tree or hierarchical For: legal concepts, regulatory hierarchy, claim basis analysis (basis of claim)
上位法 → 下位法 → 实施细则/司法解释
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
- Header — title (with colored status dot), subtitle (case number / date / court)
- Diagram card — white card with border-shadow, contains SVG
- Info cards — 3-column grid with metadata (parties, evidence summary, judgment key points)
- 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.