[TITLE]

# Diagram Templates Ready-to-use HTML templates for common diagram patterns. ## Linear Pipeline Template Standard left-to-right data flow (most common for benchmarks). ```html [TITLE]

Figure [N]

[TITLE]

[data_type_1]

[Name 1] [Technology]

[data_type_2]

[Name 2] [Technology]

[data_type_3]

[Name 3] [Technology]

Results

Out

[CAPTION - Describe what the diagram shows]

Data Preparation

Execution

Analysis

``` ## Branching Architecture Template For systems with parallel processing or multiple output paths. ```html

Branch A

Branch B

``` ## Multi-Stage with Grouping Template For showing distinct phases with visual grouping. ```html

Data Preparation Execution Analysis

``` ## Vertical Stack Template For systems with top-to-bottom flow. ```html ``` ## Usage Notes 1. **Replace placeholders**: `[TITLE]`, `[N]`, `[Name]`, `[Technology]`, `[data_type]`, `[CAPTION]` 2. **Adjust widths**: Modify `.stage-label` and `.bracket` widths to match component count 3. **Add/remove components**: Copy component blocks as needed 4. **Change stages**: Use appropriate class (`data-prep`, `execution`, `analysis`)