A small, fast diagramming canvas that runs entirely in the browser. Drag shapes onto an infinite grid, connect them with arrows that re-route themselves as you move things around, sketch freehand, and export the result as a PNG. No accounts, no backend, no saving to someone else's server.er.
It's built on Konva for canvas rendering and bundled with Vite.
- Shapes for flowcharts and diagrams: process, rounded, ellipse, decision (diamond), data (parallelogram), database (cylinder), prep (hexagon), and plain text. Drag one from the sidebar, or double-click it to drop one in the middle.e.
- Connections that snap to shape borders and re-route automatically when you drag the connected shapes. Switch to the Connect tool, then drag from one shape to another (or drag from the anchor dots that appear when you hover a shape).).
- Freehand drawing with the Draw tool for quick annotations.
- Styling per selection: fill color, stroke color, stroke width, and font.
- Transform anything: move, resize, and rotate via the selection handles.
- Inline text editing: double-click a shape to type a label.
- Pan and zoom: scroll to zoom toward the cursor, hold Space (or use the middle mouse button) to drag the canvas, and Fit to frame everything at once..
- Undo / redo backed by model snapshots.
- Export to PNG at 2x pixel ratio.
You'll need Node.js.
npm install
npm run dev # start the dev server
npm run build # build to dist/
npm run preview # preview the production buildnpm run dev prints a local URL to open in your browser.
| Action | Shortcut | What it does |
|---|---|---|
| Select | V |
Move, resize, rotate, and pick shapes |
| Draw | P |
Sketch freehand lines |
| Connect | C |
Drag between two shapes to draw an arrow |
| Action | Shortcut |
|---|---|
| Undo | Ctrl/Cmd + Z |
| Redo | Ctrl/Cmd + Shift + Z |
| Duplicate | Ctrl/Cmd + D |
| Delete selection | Delete or Backspace |
| Action | How |
|---|---|
| Zoom | Scroll wheel, or the + / - buttons, or = / - keys |
| Pan | Hold Space and drag, or drag with the middle mouse button |
| Fit | The Fit button frames all shapes |
| Marquee | Drag on empty canvas to box-select shapes |
Right-click cancels whatever you're in the middle of (drawing a line, dragging a connection, or a marquee selection)..
The app keeps a plain data model ({ nodes, edges }) separate from the Konva
views that render it. Most modules just install behavior onto a shared ctx
object created in the editor..
╭──────────────╮ creates ctx ╭───────────────────────────╮
│ main.js │────────────────▶│ editor.js │
│ UI wiring, │ │ model, history, transform, │
│ palette, │ │ zoom, export, public API │
│ shortcuts │ ╰─────────────┬─────────────╯
╰──────────────╯ │ installs
╭────────────────────┼────────────────────╮
▼ ▼ ▼
╭───────────────╮ ╭───────────────╮ ╭────────────────╮
│ views.js │ │interactions.js│ │ textEditor.js │
│ node/edge │ │ pointer tools,│ │ inline over a │
│ rebuild │ │ connect, draw │ │ node │
╰───────┬───────╯ ╰───────────────╯ ╰────────────────╯
│ uses
╭───────┴───────╮ ╭───────────────╮
│ shapes.js │ │ geometry.js │
│ shape visuals │ │ border points,│
│ + palette SVG │ │ edge routing │
╰───────────────╯ ╰───────────────╯
��╯
─────╯
- src/main.js — wires the DOM (palette, toolbar, style inputs, keyboard shortcuts) to the editor's public API..
- src/editor.js — the core: holds the model, sets up Konva layers and the transformer, and exposes add/delete/duplicate/undo/zoom/export..
- src/views.js — turns model nodes and edges into Konva groups and arrows, and handles drag/transform/reroute..
- src/interactions.js — pointer-driven tools: connecting, freehand drawing, marquee selection, panning, and wheel zoom..
- src/shapes.js — draws each shape type and the sidebar icons.
- src/geometry.js — math for where arrows touch a shape's border and how edges route between two shapes..
- src/history.js — undo/redo as serialized model snapshots.
- src/textEditor.js — floats a