Get Started
- Open Chart Hero in any modern browser
- Drag a shape from the left palette onto the canvas
- Connect nodes by dragging from one handle to another
- Style with themes, color palettes, and the properties panel
- Export as PNG, SVG, PDF, PPTX, or JSON
Everything auto-saves to your browser. Install as a desktop app via your browser's PWA prompt.
At a Glance
Highlights
28 shapes — Flowchart, architecture, and specialty shapes with full customization.
29 diagram themes — One-click visual overhauls from Blueprint to Watercolor to Military C2.
21 color palettes — Quick-color nodes with number keys 1–9.
AI assistant — 37 tools across 11 categories. Create, modify, and style diagrams with natural language. Bring your own API key (Anthropic, OpenAI, OpenRouter, Groq, or any compatible endpoint).
Swimlanes — Horizontal rows, vertical columns, or matrix grids with collapsible lanes.
Dependencies — Depends-on, blocks, and related relationships with chain highlighting and critical path analysis.
Status pucks — Multiple draggable status badges per node (Not Started, In Progress, Completed, Blocked, Review).
Auto-layout — Dagre-based hierarchical arrangement in 4 directions.
Legends — Auto-generated from your diagram's colors, edges, and status pucks.
Presentation mode — Full-screen with pen, highlighter, and eraser annotations.
Live collaboration — Real-time peer-to-peer editing via WebRTC. Share a room link and edit the same diagram simultaneously. See remote cursors, selections, and join/leave notifications. No server required. Rooms are fully ephemeral — each browser holds exactly one room at a time, nothing is stored on any server, and when all participants leave the room simply ceases to exist. Zero memory footprint when not in use.
AI Assistant
Open with the sparkle button or Ctrl+Shift+A. The AI sees your full diagram and can build, edit, and style it through conversation.
| Category | Examples |
|---|
| Diagrams | "Create a CI/CD pipeline" — generates the full diagram |
| Nodes & Edges | "Add a database node", "Connect Login to Dashboard" |
| Styles | "Switch to Blueprint theme", "Color the servers blue" |
| Swimlanes | "Add swimlanes for 3 departments" |
| Layout | "Auto-arrange top to bottom", "Align these to the left" |
| Legend | "Generate a legend", "Move the legend to bottom-right" |
| Status | "Mark Deploy as blocked" |
| Export | "Export as PNG" |
| Research | "Create a diagram of the OAuth 2.0 PKCE flow" — researches first |
Multi-provider support: Anthropic (Claude), OpenAI (GPT-4o), OpenRouter, Groq, or any OpenAI-compatible endpoint. Your API key stays in your browser and never touches a server.
What You Can Build
| Diagram Type | How |
|---|
| Flowcharts | Rectangles, diamonds, and arrows from the shape palette |
| Architecture diagrams | Database, cloud, and predefined process shapes |
| Swimlane workflows | Horizontal, vertical, or matrix swimlanes |
| Dependency maps | Dependency connectors with chain highlighting |
| C2 / COMREL charts | Military C2 theme with relationship-typed connectors |
| Sprint & Kanban boards | Built-in Agile templates |
| Mind maps | Branch outward from a central node |
| Decision trees | Diamond shapes with labeled yes/no paths |
Or ask the AI: "Create a microservices architecture diagram" and it builds it for you.
Canvas & Shapes
- 28 shapes — rectangles, diamonds, circles, ellipses, triangles, stars, parallelograms, hexagons, clouds, documents, databases, sticky notes, text boxes, callouts, block arrows, and more
- Drag-and-drop from the shape palette or press N to add a node
- Infinite canvas with pan, zoom, and fit-to-view
- Grid (dots, lines, cross) with configurable spacing
- Snap-to-grid with adjustable distance (4 / 8 / 16 / 32 px)
- Rulers along top and left edges
- Alignment guides that snap nodes to neighbors while dragging
Connectors
- 6 types — SmoothStep, Bezier, Step, Straight, Dependency, Animated
- 7+ arrowheads — filled/open triangles, diamonds, circles, tee bars
- Draggable edge labels
- Edge reconnection — drag an endpoint to re-route
- Auto-straighten all edges (Ctrl+Alt+S)
Layout & Organization
- Auto-arrange — Dagre hierarchical layout in 4 directions (Ctrl+Shift+L)
- Z-ordering — Ctrl+] / Ctrl+[, bring to front / send to back
- Alignment — left, center, right, top, middle, bottom
- Distribution — equal horizontal or vertical spacing
- Mirror / flip (Ctrl+Shift+H, Ctrl+Alt+V)
- Grouping (Ctrl+G) and link-grouping (Ctrl+Shift+G)
- Layer management with visibility, lock, opacity, and color
- Nudge — arrow keys (1 px) or Shift+arrows (10 px)
Swimlanes
- 3 modes — horizontal rows, vertical columns, or matrix grid
- Drag-to-resize lanes, borders, and headers
- Customizable container border, title, divider styling
- Collapsible lanes
- Auto-assignment — nodes update their lane when swimlanes change
Link Analysis Frames
- Bounded regions for nodal link-analysis graphs (any shape = entity, connectors = links)
- 3 auto-layouts — force-directed (live reflow while dragging), hierarchy tree, radial ego-center
- Graph metrics in the Data tab — degree, hubs, isolated nodes, connected components
- Parents / children / siblings and reach lists with click-to-center
- Shortest-path finder with highlight-on-canvas
Image Nodes
- Paste (Ctrl+V) or drag image files onto the canvas — images become full node elements
- Resize, rotate, flip, connect, reorder, label — everything a shape can do
- Right-click swatches set border color; slider sets transparency; Border Width submenu for thickness
- Embedded as data URLs — survive JSON round-trips and all export formats
Status Pucks
- Multiple pucks per node (Not Started, In Progress, Completed, Blocked, Review)
- Drag to any corner; Shift+drag to resize
- Custom icons, colors, borders, and sizes
Dependencies
- 3 types — Depends On, Blocks, Related
- Chain highlighting (Ctrl+Click)
- Critical path analysis
- Dependency badges and walk mode
Legends
- Two independent legends (Node and Swimlane)
- Auto-generate from diagram colors, edges, and pucks
- 5 swatch kinds — fill, border, puck, edge, lane
- Draggable, inline-editable, context-menu-driven
Banners
- Top and bottom banners for titles, branding, or captions
- Customizable height, text, colors, and font
Templates
15 built-in templates across 4 categories:
| Category | Templates |
|---|
| General | Blank Canvas, Simple Flowchart, Mind Map, Mind Map (Colored) |
| Business | Cross-Functional Flowchart, Decision Tree, Project Timeline, Process Infographic, User Journey Map |
| Software | Software Architecture, Deployment Pipeline, Sequence Diagram, Network Architecture |
| Agile | Sprint Board, Kanban Board |
Export
- Formats — PNG, JPG, SVG, PDF, PPTX, JSON
- Clipboard — copy as PNG or SVG vector (paste into Figma, Illustrator, PowerPoint)
- PNG/JPG — scale 1–4x, quality, transparent background, padding
- PDF — A4/A3/Letter/Legal, orientation, fit-to-page, margins, auto-footer
- PPTX — standard or widescreen, title slide, speaker notes
- JSON — full-fidelity round-trip of every property
Presentation Mode
- Full-screen with pen, highlighter, and eraser annotations
- Undo/redo strokes, export annotations, screenshot capture
Mobile & Touch
- Responsive layout — adapts to phone, tablet, and laptop screens
- Compact single-row toolbar on phones with a More (⋯) toggle exposing every toolbar group
- Collapsible bottom shape tray to maximize drawing space
- Full editing on touch: drag shapes from the palette, pinch-zoom, one-finger pan
- Tap to select, drag to move; edit labels via the floating Edit button or long-press menu
- Properties open as a bottom sheet on phones; dialogs go full-screen
- Floating selection bar for edit / duplicate / delete (no keyboard needed)
- 44px touch targets, safe-area insets for notched devices
Other
- Format painter (Ctrl+Alt+C / Ctrl+Shift+V)
- Multi-line labels (Shift+Enter)
- Per-node fonts via right-click
- 1,000+ Lucide icons with color, background, outline, and sizing
- Dark mode (Ctrl+Shift+K)
- Context menus on nodes, edges, selections, and canvas
- Minimap with swimlane and legend overlays
- Status bar — session timer, element count, cursor position, zoom
- Custom cursors for selection, panning, connecting, and edge editing
- Live Collaboration — peer-to-peer real-time editing via WebRTC (Yjs + y-webrtc)
- Remote cursors, selection highlighting, and join/leave notifications
- Room sharing via URL hash with MD5-style room IDs
- PWA — install as a desktop app, works offline
- Offline fonts — all bundled locally
- Auto-save to browser localStorage
| Shortcut | Action |
|---|
| Ctrl+S | Save as JSON |
| Ctrl+Z / Ctrl+Shift+Z | Undo / Redo |
| Ctrl+C / Ctrl+V | Copy / Paste |
| Ctrl+D | Duplicate selected |
| Ctrl+A | Select all |
| Delete | Delete selected |
| N | Add node at center |
| F2 | Edit label |
| Ctrl+Shift+E | Export dialog |
| Ctrl+Shift+L | Auto-arrange |
| Ctrl+Alt+S | Auto-straighten edges |
| Ctrl+Shift+K | Toggle dark mode |
| Ctrl+Shift+A | Toggle AI Assistant |
| Ctrl+G | Group selected |
| Ctrl+Shift+G | Link-group |
| Ctrl+] / Ctrl+[ | Z-order forward / backward |
| Ctrl+Shift+H | Mirror horizontally |
| Ctrl+Alt+V | Mirror vertically |
| Ctrl+Alt+C | Copy style |
| Ctrl+Shift+V | Paste style |
| Arrow keys | Nudge 1 px |
| Shift+Arrow | Nudge 10 px |
| 1–9 | Apply palette color |
| Ctrl+/ | Show shortcuts |
| Escape | Deselect / exit mode |
Chart Hero's JSON format provides full-fidelity round-trip access to every property — nodes, edges, swimlanes, layers, legends, banners, viewport, and styles.
Why JSON matters:
- AI pipeline — AI systems generate JSON, Chart Hero renders it
- Programmatic generation — scripts create diagrams without a GUI
- Version control — store diagram source alongside your code
- Automation — CI/CD pipelines generate architecture diagrams from code analysis
Export: Press Ctrl+Shift+E → JSON tab, or Ctrl+S for quick save.
Import: Toolbar → Import button → paste JSON. Auto-validates, deduplicates IDs, and applies defaults.
See the JSON Import Rulebook for the full specification.
Tech Stack
| Layer | Technology |
|---|
| UI framework | React 19 + TypeScript (strict) |
| Canvas engine | @xyflow/react v12 (React Flow) |
| State | Zustand v5 + Immer |
| Styling | Tailwind CSS 4 |
| Build | Vite 7 |
| Icons | Lucide React (1,000+) |
| Colors | chroma-js |
| Layout | dagre |
| Export | jspdf, pptxgenjs, html-to-image, jszip, file-saver |
| Collaboration | Yjs + y-webrtc (P2P, no server) |
| Sketch | roughjs |
| PWA | vite-plugin-pwa |
| Deploy | GitHub Pages (GitHub Actions) |
Setup
git clone https://github.com/ghost-ng/Chart-Hero.git
cd Chart-Hero
npm install
npm run dev # localhost:5173
Build & Deploy
npm run build # TypeScript check + Vite production build
npm run preview # Preview locally
npm run deploy # Deploy to GitHub Pages
Pushes to main also auto-deploy via GitHub Actions.
Project Structure
src/
components/ # React components
Canvas/ # FlowCanvas, GenericShapeNode, MiniMapOverlays
Panels/ # Toolbar, ShapePalette, PropertiesPanel
AI/ # AIChatPanel, AISettingsDialog, ChatMessage
Edges/ # Custom edge components + ArrowheadMarkers
Legend/ # LegendOverlay, LegendButton
Swimlanes/ # SwimlaneLayer, SwimlaneResizeOverlay
collab/ # Real-time collaboration (Yjs, WebRTC, awareness)
store/ # 12 Zustand stores (flow, ui, style, swimlane, legend,
# dependency, export, settings, layer, banner, ai, collab)
styles/ # 29 diagram themes, 21 color palettes, app CSS
lib/ai/ # AI integration (client, streaming, tools, prompts)
hooks/ # Custom React hooks
utils/ # Export, layout, color, alignment, transforms
data/ # Templates, shape definitions
Architecture Notes
- Single node renderer —
GenericShapeNode renders all 28 shapes via CSS clip-paths and inline SVGs
- Immer middleware — all stores mutate state directly inside
set() callbacks
- Code splitting — Vite chunks:
react-vendor, flow-vendor, export-vendor, icons-vendor, diagram-styles, ai-lib, collab-vendor
- Path alias —
@/* maps to src/*
License
MIT
