# Interactive Flow Graph

> Generate a self-contained interactive HTML flow graph for presentations. Nodes connected left-to-right with animated edges, step-by-step navigation, hover tooltips, and auto-play. Use when the user asks for a flow diagram, architecture graph, request flow visualization, pipeline diagram, or interactive presentation graph.

- Skill: `ashtarkb/interactive-flow-graph` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add ashtarkb/interactive-flow-graph`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ashtarkb/interactive-flow-graph/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ashtarkb (https://skillmd.com/u/ashtarkb)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ashtarkb/interactive-flow-graph

---


# Interactive Flow Graph

Generate a single self-contained `.html` file (no external dependencies) that
renders an SVG-based left-to-right flow graph with step-through animation.

## When to use

User asks for any of: flow diagram, architecture graph, request flow, pipeline
visualization, interactive graph, presentation diagram, step-by-step flow.

## How to build

1. Gather the list of **nodes** (steps) from the user or from your analysis.
2. Optionally group nodes into **zones** (logical regions shown as dashed boxes).
3. Assign each node a **color theme** and short **tooltip** description.
4. Generate the HTML using the template in [template.html](template.html).
5. Save as a `.html` file in the project root or wherever the user specifies.
6. Open it in the browser with `open <file>` (macOS) or `xdg-open <file>` (Linux).

## Customization guide

### Defining nodes

Each node needs:

| Field | Description |
|-------|-------------|
| `id` | Numeric index starting at 1 |
| `title` | Short name (max ~18 chars for best fit) |
| `subtitle` | One-liner context (e.g. file name, protocol) |
| `icon` | Single emoji |
| `color` | Hex color for the border accent (use `44` alpha suffix on `stroke`) |
| `tooltip.tag` | Category label (e.g. "Client", "Server", "Database") |
| `tooltip.tagColor` | Hex color for the tag pill |
| `tooltip.text` | 1-2 sentence description, can use `<strong>` for emphasis |

### Defining edges

Each edge connects consecutive nodes. Set `data-edge` to the source node's id.
The SVG `<line>` goes from the right side of the source node to the left side of
the target node. A `<circle class="packet">` with `<animateMotion>` rides along
the same path.

### Defining zones

Zones are dashed `<rect>` backgrounds with a `<text>` label above them. Group
related nodes visually. Typical zones: "Client", "Network", "Server", "Data
Layer".

### Layout rules

- Node size: 130 x 80px.
- Horizontal gap between adjacent nodes: ~20-60px.
- Use two rows (y=150 and y=270) to avoid a cramped single line when there are
  more than 5 nodes. Stagger nodes between rows to create a natural zigzag flow.
- SVG viewBox width: ~140px per node + zone padding.

### Color palette (dark theme)

| Purpose | Color |
|---------|-------|
| Blue (client/SDK) | `#388bfd` |
| Green (network/storage) | `#238636` |
| Purple (ingress/gateway) | `#8957e5` |
| Orange/yellow (server/DB) | `#d29922` |
| Red (auth/security) | `#da3633` / `#f85149` |
| Teal (object storage) | `#1a7f37` |

These are defaults. Match colors to the domain — use whatever makes sense for
the user's context.

### Controls

The template includes: Previous/Next buttons, step counter, Play/Pause
auto-advance (2s interval), Reset, and keyboard shortcuts (arrow keys, space,
R). Do not remove these.

## Key rules

- **Single file**: Everything (HTML + CSS + JS + SVG) in one `.html` file. No
  external CSS, JS, images, or fonts.
- **No domain leakage**: The template is generic. Fill in node titles, tooltips,
  and zones based on what the user is describing — never hardcode project-specific
  content into the skill itself.
- **Presentation-ready**: Dark background (#0f1419), minimal text, large enough
  to read on a projector. Keep node labels short.
- **Tooltips only on hover**: Don't clutter the graph with long descriptions.
  Details go in the tooltip popup that appears on mouse hover.
- **Animated transitions**: Active edges glow blue with a traveling dot. Visited
  nodes stay visible, future nodes are dimmed.

## Scaling to more or fewer nodes

- **3-5 nodes**: Single row at y=190. Simpler layout.
- **6-10 nodes**: Two rows (y=150 and y=270), zigzag between them.
- **11+ nodes**: Consider splitting into two separate graphs or using three rows.
  Auto-adjust the SVG viewBox width.

## Template reference

Read [template.html](template.html) for the full boilerplate. Replace the
placeholder nodes, edges, zones, and tooltips with the actual content.