interactive-flowchart-builder

name

interactive-flowchart-builder

description

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.

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)

<section class="workflow">
  <div class="workflow-track"><div class="workflow-track-fill"></div></div>
  <div id="wf-nodes" class="wf-nodes"></div>
  <h3 id="wf-title"></h3>
  <p  id="wf-desc"></p>
  <div id="wf-cumulative" class="wf-cumulative"></div>
  <div id="wf-output" class="wf-output"></div>
</section>
<script src="tools.js"></script>
<script src="workflow.js"></>

Required data shape (in tools.js + workflow.js)

window.NEBOR_TOOLS = {
  "<slug>": {
    name: "<Display Name>",
    color: "#HEX",
    cat: "<Category>",          // CRM, Data, Enrichment, LLM, Outreach, Analytics, etc.
    fb:  "Xx",                  // 2-letter fallback mark
    domain: "<example.com>",    // optional
    desc: "<one-sentence why-this-tool>"
  }
};

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",     :  },
      { : ,      : , : , :  }
    ],
    : 
  }
];

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 <dir> && 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).