# HTML Diagram Templates
Copy-paste ready HTML templates for common diagram types.
## Linear Pipeline (3 boxes)
```html
Pipeline Diagram
Figure 1
Pipeline Architecture
Data Loader
JSON/CSV
Processor
Node.js
Analyzer
Statistics
Data flows through preparation, execution, and analysis stages.
```
## Branching Architecture (Y-split)
```html
Branching Diagram
Figure 2
Branching Architecture
Input Router
Input is routed to parallel processing paths.
```
## Comparison (Before/After)
```html
Comparison Diagram
Figure 3
Architecture Comparison
Before
Legacy Component A
Legacy Component B
Legacy Component C
After
Modern Service
Unified API
Migration consolidates three legacy components into two modern services.
```
## Arrow SVG Snippets
### Horizontal Arrow (right)
```html
```
### Horizontal Arrow (left)
```html
```
### Vertical Arrow (down)
```html
```
### Vertical Arrow (up)
```html
```
### Bidirectional Arrow (horizontal)
```html
```