Simplify the meticulous.
A free, browser-based diagramming tool. No sign-ups. No subscriptions. No server.
Launch App · User Guide · JSON Rulebook
- 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.
 Dark Mode |
 AI Assistant |
 15 Templates |
 Multi-Format Export |
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.
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.
| 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.
- 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
- 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)
- 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)
- 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
- 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
- 3 types — Depends On, Blocks, Related
- Chain highlighting (Ctrl+Click)
- Critical path analysis
- Dependency badges and walk mode
- 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
- Top and bottom banners for titles, branding, or captions
- Customizable height, text, colors, and font
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 |
- 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
- Full-screen with pen, highlighter, and eraser annotations
- Undo/redo strokes, export annotations, screenshot capture
- 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.
| 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) |
git clone https://github.com/ghost-ng/Chart-Hero.git
cd Chart-Hero
npm install
npm run dev # localhost:5173npm run build # TypeScript check + Vite production build
npm run preview # Preview locally
npm run deploy # Deploy to GitHub PagesPushes to main also auto-deploy via GitHub Actions.
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
- Single node renderer —
GenericShapeNoderenders 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 tosrc/*