PromptBoard

A Figma-like visual process canvas specialized for prompt engineering workflows. Create, annotate, and export process diagrams as structured JSON for AI interpretation.

What it does

• Canvas-based diagramming — drag, zoom, pan, marquee select
• Typed connectors — flows_to, triggers, depends_on, part_of, blocks (orthogonal routing, draggable waypoints)
• Sections — Figma-style group containers with spec fields (description, acceptance criteria, dependencies)
• Node annotation panel — role, type, flow, automation level, description, rules, notes
• Export for Claude — structured JSON with completeness report and warnings
• Board Consistency Review — deterministic readiness checks plus optional AI advisory suggestions
• Auto-save to localStorage + manual save/load JSON files
• Undo/Redo — 80 levels, JSON-snapshot based

Quick start

# Option 1: open the monolith directly (zero install)
open process-canvas.html

# Option 2: build from source
python build.py
open dist/index.html

Development

src/
  html/index.html   — HTML skeleton (%%CSS%% and %%JS%% injection markers)
  css/main.css      — All styles
  js/               — JS modules (load order matters — see build.py)
    state.js        — Global state, DOM refs, INITIAL_DATA
    variables.js    — Canvas variable store and helpers
    history.js      — Undo/redo snapshot stack
    canvas.js       — Pan, zoom, marquee, wheel, fit-all
    nodes.js        — Node DOM, drag, selection, alignment, render()
    connectors.js   — Orthogonal routing, waypoints, segment handles
    sections.js     — Section DOM, drag, resize, add/delete
    editor.js       — Prompt content editing helpers
    panels.js       — Node/section/connector annotation panels
    toolbar.js      — Keyboard shortcuts, connector mode buttons
    export.js       — Export-for-Claude JSON builder
    review.js       — Board consistency review engine + optional AI advisory pass
    execution.js    — Runtime node execution engine and provider calls
    persistence.js  — initData(), autoSave(), saveToFile(), loadFromFile()
    templates.js    — Template gallery and seed loading
    ui.js           — Context menus, utils, app entry point

build.py            — Assembles dist/index.html (Python stdlib only)
archive/            — Regression reference (original monolith)
dist/               — Build output (gitignored)

Build

python build.py
# → Built dist/index.html  (120,834 bytes)  in ~3ms

Requires Python 3.8+, no dependencies.

Architecture

See docs/architecture.md for module dependency graph and design decisions.