---
name: process-flow-diagram
description: Create polished dark-themed process flow diagrams as self-contained HTML+SVG files. Use when the user asks for workflow diagrams, process maps, approval flows, or automation sequences.
---
# Process Flow Diagram Skill
Create professional process flow diagrams as self-contained HTML files with inline SVG graphics and CSS styling. Optimized for linear, sequential workflows with clear step progression โ manual steps, automated steps, integrations, and decision branches.
> **Version 1.1** ยท MIT License ยท Authored by [Cocoon AI](mailto:hello@cocoon-ai.com)
## When to Use
Use for:
- Business process documentation
- Automation workflow visualization
- Sprint / development process flows
- Approval workflows and decision trees
- Multi-step procedures with clear sequence
- Onboarding and runbook diagrams
Skip when: the relationships are non-sequential (system component graphs, infrastructure topologies). For those, see [architecture-diagram-generator](https://github.com/Cocoon-AI/architecture-diagram-generator).
## Design System
### Color Palette (Step Types)
| Step Type | Fill (rgba) | Stroke | Icon/Indicator |
|-----------|-------------|--------|----------------|
| Start/End | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) | Pill shape |
| Manual Step | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) | ๐ค actor |
| Automated Step | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) | โก or ๐ค |
| Integration/API | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) | ๐ or โ๏ธ |
| Decision | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) | Diamond shape |
| Prerequisite | `rgba(30, 41, 59, 0.3)` | `#94a3b8` (slate-400) | Dashed border |
### Typography
Use JetBrains Mono for all text (monospace, technical aesthetic):
```html
```
Font sizes: 11px for step names, 9px for descriptions, 8px for annotations, 10px for step numbers.
### Visual Elements
**Background:** `#020617` (slate-950) with subtle grid pattern.
**Step boxes:** Rounded rectangles (`rx="8"`) with 1.5px stroke, semi-transparent fills, minimum 140x70px.
**Step number badges:** Small circles with step number, positioned top-left of each step box:
```svg
1
```
**Start/End nodes:** Pill shapes (large rx value):
```svg
```
**Decision diamonds:** Rotated squares:
```svg
```
**Prerequisites box:** Dashed border container at top:
```svg
```
**Flow arrows:** Use arrowhead marker, with optional labels:
```svg
```
### Layout Patterns
**Horizontal flow (default):** Steps flow left-to-right, wrap to new row if needed.
- Prerequisites at top
- Start node on left
- Steps progress rightward
- End node on right
- Info cards below
**Vertical flow:** Steps flow top-to-bottom. Use for longer processes or when horizontal space is limited.
### ViewBox & Overflow Guidelines
**CRITICAL: Prevent right-edge cutoff**
1. **Calculate viewBox width generously:**
- Step stride is **220px** (160px box + 60px gap โ the 60px gap is needed for arrow labels like `output โ input`)
- Formula: `(number of steps ร 220) + 200px padding`
- **Add +120px** for each inline decision diamond (the diamond's ยฑ57px corners plus its label consume a full step's worth of horizontal budget)
- **Add +100px** if there is an exit node to the right of the last step
- For 4 steps + 1 inline decision + exit pill: `(4 ร 220) + 120 + 100 + 200 = 1300px`
2. **Match min-width to viewBox AND container max-width:**
- `.diagram-container svg { min-width: [viewBox width]px; }` โ same number as viewBox width, so the SVG never shrinks below its design width
- `.container { max-width: [viewBox width + 48]px; }` โ outer container must accommodate the SVG **plus** the `.diagram-container`'s 24px side padding (48px total). If you set `.container` max-width equal to viewBox width, you'll get a 48px horizontal scroll and the right side will be clipped on export. **Always add 48** to the viewBox width when setting `.container` max-width.
- Default sizing rule: pick viewBox width V, then set `svg { min-width: Vpx }` and `.container { max-width: (V + 48)px }`. The three numbers (viewBox, svg min-width, container max-width โ 48) should always be equal.
3. **Right-side elements need breathing room:**
- Decision diamonds: keep 120px from right edge of viewBox
- Exit nodes: keep 80px from right edge
- Loop-back arrows: account for their curve radius
4. **Default safe viewBox:** `viewBox="0 0 1300 540"` with `min-width: 1300px` and `.container { max-width: 1348px }`
- **If you change the viewBox width, change all three together:** set `svg { min-width: px }` and `.container { max-width: px }`. The `+ 48` accounts for the `.diagram-container`'s 24px side padding. If these three numbers drift apart you'll get the right side clipped behind a horizontal scroll bar (and that clipped region won't survive PNG/PDF export).
- Accommodates 4 steps with decision + exit node comfortably
- Scale up for more complex processes โ see "Multi-row wrap" below if you need >5 steps in horizontal flow
### Multi-row wrap pattern
If a horizontal flow needs more than ~5 steps + a decision, wrap to a second row instead of letting the viewBox grow past 1500px. Use a **dashed slate connector** to bridge end-of-row-1 to start-of-row-2:
```svg
continue
```
Place row 2 at `y = row1_y + 270` to leave room for the connector to clear both rows. Keep the connector's horizontal segment at `y โ midway between rows` so it doesn't graze either row's boxes.
### Cyclical loop pattern
For continuously-running processes (monitoring โ trigger โ action โ loop), there is no Start/End pill. Instead, use a **dashed cyan loop-back arrow that travels over the top of the row** to return from the last step to the first:
```svg
โป resume monitoring
```
Reserve `y = 100โ120` (above the actor labels) for the horizontal segment of the loop arrow. Keep "exception path" loops (e.g. QC fail) below the row at `y = row_y + 180+` with a rose dashed stroke.
### Step Box Pattern
```svg
NACTORStep NameDescription line 1Description line 2
```
### Arrow with Label Pattern
```svg
output โ input
```
### Info Cards (Bottom Section)
Three cards for process metadata:
1. **Prerequisites** โ What's needed before starting
2. **Inputs/Outputs** โ Data flowing through the process
3. **Tools/Integrations** โ Systems involved
### Export Toolbar (built-in)
Every diagram ships with a single unobtrusive `โฏ` toggle in the header. Click it to reveal three buttons โ ๐ Copy (high-DPI PNG to clipboard, scale: 2), ๐ผ๏ธ PNG (high-DPI PNG download), ๐ PDF (PNG embedded in a one-page PDF via jsPDF). The toolbar collapses back to the icon by default so it doesn't clutter the diagram. All three formats use the same html2canvas capture (with the toolbar excluded and 32px padding around the content), so PDF preserves the dark theme without going through the browser's print dialog.
When generating a new diagram, keep these intact in the template:
- The two CDN scripts in `` (pinned versions, with Subresource Integrity hashes and `crossorigin="anonymous"`):
- `https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js` โ `integrity="sha384-ZZ1pncU3bQe8y31yfZdMFdSpttDoPmOZg2wguVK9almUodir1PghgT0eY7Mrty8H"`
- `https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js` โ `integrity="sha384-en/ztfPSRkGfME4KIm05joYXynqzUgbsG5nMrj/xEFAHXkeZfO3yMK8QQ+mP7p1/"`
- SRI ensures generated diagrams are tamper-resistant against CDN compromise. Do not modify the hashes; if the version is bumped, the new hash must be computed fresh.
- `id="report-container"` on the outermost `.container` div (this is what gets captured)
- `.toolbar` markup with `.toolbar-actions` (collapsed by default) and `.toolbar-toggle` (the `โฏ` button)
- `.toolbar` CSS + `@media print { .toolbar { display: none !important; } }`
- `copyAsImage()`, `downloadPNG()`, and `downloadPDF()` script before ``, all using `getBoundingClientRect()` + `html2canvas(document.body, { x, y, width, height, ignoreElements })` to capture a precise rect with breathing room and no toolbar
Caveats: clipboard API needs a user gesture and a secure context (https/file/localhost). SVG `` renders inconsistently in html2canvas โ stick to plain `