ashtarkb 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
- Gather the list of nodes (steps) from the user or from your analysis.
- Optionally group nodes into zones (logical regions shown as dashed boxes).
- Assign each node a color theme and short tooltip description.
- Generate the HTML using the template in template.html.
- Save as a
.htmlfile in the project root or wherever the user specifies. - Open it in the browser with
open <file>(macOS) orxdg-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
.htmlfile. 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 for the full boilerplate. Replace the placeholder nodes, edges, zones, and tooltips with the actual content.