# Interactive Flowchart Builder
> Build interactive "living workflow" flowcharts in the visual style of https://statuesque-starship-49757d.netlify.app/revenue-engine - vanilla HTML/CSS/JS files with a horizontal step bar, a vertical trunk that grows per step, tool-to-tool columns with animated payload pills between brand-marked tool nodes, alternating left/right step descriptions, and per-step outputs. Use whenever the user says "build a flowchart", "interactive flowchart", "living workflow", "revenue engine flowchart", "demand gen flowchart", "GTM workflow diagram", "process diagram with animations", "Nebor-style flowchart", or asks to recreate the workflow visual from the Nebor site. Always asks which flowchart to build (Revenue Engine / Demand Gen / CRM & RevOps / Custom) and waits for explicit approval of the step + tool + edge table before generating any files.
- Skill: `qa-aman/interactive-flowchart-builder` (Agent Skill)
- Install (CLI): `npx skillmds@latest add qa-aman/interactive-flowchart-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/qa-aman/interactive-flowchart-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: qa-aman (https://skillmd.com/u/qa-aman)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/qa-aman/interactive-flowchart-builder
---
## When to invoke
User asks for an interactive multi-step process flowchart with tools, edges, and animated data flow - especially one modeled on the Nebor site's "living workflow" pattern. If the user just wants a static diagram, a Mermaid chart, or a slide-deck flowchart, hand off to a different skill - this one specifically produces the Nebor-style vanilla-JS animated flowchart.
## Reference visual
The output should match the rendering pattern of:
- https://statuesque-starship-49757d.netlify.app/revenue-engine (Sales Engine & GTM)
- https://statuesque-starship-49757d.netlify.app/demand-gen (Demand Gen & ABM)
- https://statuesque-starship-49757d.netlify.app/crm-revops (CRM & RevOps)
All three use the same vanilla-JS engine driven by two globals: `window.NEBOR_TOOLS` and `window.NEBOR_WORKFLOW`. Reproduce that engine.
## Workflow
### Step 1 - Ask which flowchart to build
Print exactly this block and wait:
> Which flowchart would you like me to build?
>
> 1. **Revenue Engine / Sales Engine & GTM** - Identify → Enrich → Personalize → Send → Qualify → Book
> 2. **Demand Gen & ABM** - audience build → signal capture → orchestrated plays → measurement
> 3. **CRM & RevOps** - audit → model → automate → report → govern
> 4. **Custom** - tell me the domain, steps, and tools and I'll design it
>
> Reply with `1`, `2`, `3`, or `4` (with details).
### Step 2 - Draft and confirm the scope
Once the user picks an option, produce a compact markdown table with:
- 4-7 steps (verb-first names, e.g. "Identify", "Enrich")
- One-line `desc` per step
- 3-5 tools per step (real product names, real hex brand colors)
- `roles` map (one sentence per tool, per step)
- `flow` edges - each with `from`, `to`, `proto` (one of `api` / `webhook` / `event` / `sql` / `llm`), `label`
- One-line `output` per step (e.g. "1,284 ranked accounts written to HubSpot - weekly refresh")
End with: *"Approve as-is, or change anything before I generate the files?"*
**Do not generate any files until the user types an approval (yes / approved / ship it / etc.).**
### Step 3 - Generate the files
After approval, write three files into the current working directory (or a path the user specifies):
1. `index.html` - DOM skeleton + inline CSS + script tags
2. `tools.js` - populates `window.NEBOR_TOOLS`
3. `workflow.js` - populates `window.NEBOR_WORKFLOW` + the renderer + animation loop
#### Required DOM skeleton (in index.html)
```html
```
#### Required data shape (in tools.js + workflow.js)
```js
window.NEBOR_TOOLS = {
"": {
name: "",
color: "#HEX",
cat: "", // CRM, Data, Enrichment, LLM, Outreach, Analytics, etc.
fb: "Xx", // 2-letter fallback mark
domain: "", // optional
desc: ""
}
};
window.NEBOR_WORKFLOW = [
{
step: "Identify",
desc: "TAM mapped from firmographics, tech-stack, and intent.",
tools: ["apollo", "clay", "builtwith", "hubspot"],
roles: {
apollo: "Sources accounts from firmographic + funding filters",
clay: "Orchestrates enrichment passes across 50+ providers",
// one role per tool
},
flow: [
{ from: "apollo", to: "clay", proto: "api", label: "POST /accounts" },
{ from: "builtwith", to: "clay", proto: "api", label: "tech.signals" },
{ from: "clay", to: "hubspot", proto: "webhook", label: "ranked.json" }
],
output: "1,284 ranked accounts written to HubSpot - weekly refresh"
}
];
```
#### Render rules
1. Build a horizontal step bar from `NEBOR_WORKFLOW`. Auto-advance every 4-6s; clicking a step jumps to it.
2. Below the bar, render a vertical "trunk" - one continuous line connecting every step's `root` and `merge` markers.
3. Each step renders a `.tree-section` containing: `.trunk-root` (number + step name) → `.trunk-fork` (horizontal bar) → `.trunk-cols[data-cols=N]` (columns of `from-tool` → animated `.tree-payload` on `.tree-wire` → `to-tool`) → `.trunk-merge`.
4. Alternate the step description side: even index → text right, odd → text left.
5. Animate ALL visible payload pills in sync (not just the current step's) - the "living" quality is the defining feature.
6. Past steps render with class `past` and status pill "wired"; the current step renders with class `current` and pill "live".
7. Tool nodes show: brand-color square mark on the left (inline SVG if available, else the 2-letter `fb` mark) + tool name + hover tooltip with the step-specific `role`.
8. Color-code `.tree-payload` by `proto`:
- `api` - indigo (`#4F46E5`)
- `webhook` - teal (`#0D9488`)
- `event` - amber (`#D97706`)
- `sql` - violet (`#7C3AED`)
- `llm` - rose (`#E11D48`)
#### Style targets
- Background: warm off-white `#F5F1EA`. Ink: `#15140F`.
- Serif display for headings (Tiempos, Cormorant, or Playfair Display fallback). Grotesk for body (Inter / system-ui).
- Tool node: rounded rectangle, white fill, 1px ink border, brand mark on the left.
- Payload pill: small pill shape, color per protocol, animated translateX along the wire with CSS keyframes.
- Magazine-grade whitespace. No drop shadows, no glassmorphism, no gradients except subtle.
### Step 4 - Hand off
After writing files, print:
- How to preview: `cd && python3 -m http.server 8000` then open `http://localhost:8000`.
- How to add a step: append an object to `NEBOR_WORKFLOW` in `workflow.js`.
- How to add a tool: add a slug entry to `NEBOR_TOOLS` in `tools.js`.
- Where to tweak protocol colors / animation speed (note exact CSS class names).
## Anti-Patterns
- Don't reach for React, ReactFlow, Mermaid, or D3. The reference engine is vanilla JS by design - introducing a framework defeats the point.
- Don't generate files before the user approves the scope table. Skipping the confirmation step produces flowcharts the user has to redo.
- Don't invent tools or hex colors. Use real product names and real brand colors. If you don't know a color, ask before guessing.
- Don't drop the animation. A static flowchart fails the brief.
- Don't merge `tools.js` and `workflow.js` into one file unless the user asks - keeping them split is what makes the flowchart editable.
- Don't write a README or extra docs unless the user asks. Three files is the deliverable.
## Quality Checklist
- [ ] User explicitly approved the step + tool + edge table before any file was written.
- [ ] 4-7 steps total, each with `step`, `desc`, `tools`, `roles` (one per tool), `flow`, `output`.
- [ ] Every tool slug referenced in any `flow.from`, `flow.to`, or `tools[]` exists as a key in `NEBOR_TOOLS`.
- [ ] Every edge has a valid `proto` (`api` | `webhook` | `event` | `sql` | `llm`) and a human label.
- [ ] Horizontal step bar + vertical trunk + animated payloads all render from a single `index.html` open in the browser (no build step).
- [ ] Past steps show as "wired", current step shows as "live".
- [ ] Hover on a tool node shows the step-specific role tooltip.
- [ ] Brand-color marks render for every tool (SVG or 2-letter fallback).