ChartFlow

A flowchart builder powered by Next.js and React Flow. Build flowcharts manually with a node-by-node builder, or describe what you want in plain English and let AI draft it for you.

Getting Started

npm install
npm run dev

Open http://localhost:3000.

No server-side API keys needed. The AI feature uses your own OpenAI key, entered in the browser.

Features

Manual Node Builder

The left sidebar provides five node types as pill buttons:

Pill	Node Type	Appearance
Step	Process	Sharp rectangle
Decision	Decision	Diamond (rotated square)
Yes	Terminal	Pill shape, accent color fill
No	Terminal	Pill shape, muted fill
End	Terminal	Pill shape, accent color fill

Adding nodes:

• Select a pill type, type a label, click "Add node" (or press Enter)
• Nodes auto-connect to the currently selected (active) node
• Yes/No nodes always attach to the nearest decision node in the graph

Active node:

• Click any node on the canvas to select it -- new nodes will branch from it
• The sidebar shows "Attaching to: [label]" so you know the connection target
• Click empty canvas to deselect

Drag and drop:

• Drag any pill button directly onto the canvas to place a node at an exact position
• Dropped nodes are not auto-connected -- draw edges manually

Manual Edge Drawing

Drag from any source handle (dot) on one node to a target handle on another to draw a custom edge. Edges drawn from a decision node's Yes/No handles are automatically labeled.

AI Draft

Generate a full flowchart from a plain-English description using OpenAI.

Setup:

1. Go to platform.openai.com/api-keys and create a new API key
2. In the sidebar, switch to the Build tab and scroll to "Draft from description"
3. Paste your key into the OpenAI API Key field

Usage:

• Type a description like "Check if the issue is urgent. If yes, escalate. Otherwise assign to the general queue."
• Click Generate draft -- the AI returns a complete flowchart with nodes and edges
• Edit, move, resize, and reconnect nodes as needed
• If results look wrong, click Clear all and try rephrasing

Privacy:

• Your API key is stored in localStorage in your browser only
• It is sent over HTTPS directly to api.openai.com -- it never passes through our server
• You can verify this in your browser's Network tab
• To remove your key, clear the field or clear your browser data

Theme Panel

The right sidebar controls the visual appearance of the canvas and nodes:

• Presets: Light, Dark, Blueprint -- one-click theme switching
• Colors: Canvas background, node fill, border, accent, text
• Layout: Corner radius, border width, font size, font family (9 system fonts)
• Arrows: Color and size of edge arrow markers
• Shadow: Toggle and blur radius

Theme changes only affect the canvas -- the sidebar and theme panel have their own adaptive chrome that switches between light and dark based on the canvas background color.

Node Interactions

• Resize: Click a node to select it, then drag the corner/edge handles to resize
• Delete: Hover over any node to reveal a red "x" button -- clicking it removes the node and all connected edges
• Drag: Drag nodes to reposition them freely on the canvas
• Clear all: Remove all nodes and edges with one click (with confirmation)

Export

• SVG: Exports the canvas as a vector SVG file
• PNG: Exports at 2x resolution for crisp output

Saved Charts

Click "Save Chart" to snapshot the current nodes and edges. Saved charts appear in a list at the bottom of the sidebar and can be reloaded with one click.

Guide Tab

The sidebar has a Guide tab with step-by-step instructions for every feature, including detailed AI setup, usage tips, and privacy information.

Architecture

src/
  app/
    page.tsx              # Main page -- state management, wires components together
  components/
    FlowCanvas.tsx        # React Flow canvas with custom node types
    Sidebar.tsx           # Node builder, AI draft, saved charts, guide
    ThemePanel.tsx        # Theme controls and export buttons
    nodes/
      ProcessNode.tsx     # Sharp rectangle node
      DecisionNode.tsx    # Diamond node with Yes/No handles
      TerminalNode.tsx    # Pill-shaped node (Start, End, Yes, No)
  store/
    theme.ts              # Zustand store for all theme values
  lib/
    generate.ts           # Client-side OpenAI API call (raw fetch, no SDK)
    layout.ts             # Dagre graph layout + shared node dimensions
    shell-theme.ts        # Light/dark shell palette derived from canvas color
    prompt.ts             # System prompt for OpenAI

Key Design Decisions

• Theme state in Zustand only. No theme props drilling. Node components read directly from the store.
• Client-side AI calls. OpenAI is called directly from the browser via fetch. No server route, no SDK dependency. The user's API key never touches our server.
• Dagre handles layout. React Flow never calculates positions -- layout.ts owns that.
• Node dimensions defined once in layout.ts and shared by the Sidebar for handle alignment.
• Node components are memoized with React.memo and use CSS :hover for the delete button instead of React state.

Tech Stack

• Next.js (App Router)
• React Flow v12
• Dagre for automatic graph layout
• Zustand for state management
• OpenAI API for AI-powered chart generation (client-side, BYOK)
• html-to-image for SVG/PNG export
• Tailwind CSS v4