◣ diagram

diagram

A lightweight diagram editor built with vanilla HTML, CSS, and JavaScript. No dependencies, no build step. Create flowcharts and diagrams directly in the browser.

Launch App

Features

Shape Tools Rectangle, rounded rectangle, circle, diamond, triangle, terminator, and custom SVG shapes.
Connections Draw lines and arrows between shapes with smart snapping and endpoint dragging.
Custom SVG Paste your own SVG code to create custom shapes with full viewBox control.
Text Labels Add floating text to shapes with adjustable font size, color, and alignment.
Auto-Save Work is automatically saved to localStorage and survives page reloads.
Keyboard Shortcuts Full keyboard navigation and editing shortcuts for power users.

Quick Start

Creating Shapes

Click a shape button in the toolbar, then click on the canvas to place it. Drag handles to resize, drag the body to move.

Drawing Connections

Select the Line tool (L), click and drag from one shape to another. Lines snap to shape edges automatically.

Adding Custom SVG Shapes

Click the Custom Shape button (last button in the toolbar), click on the canvas, then paste your SVG code into the Custom SVG textarea in the properties panel. Adjust the ViewBox Width and Height to match your SVG's coordinate space.

Tip: If your SVG doesn't have a wrapping <svg> tag, the app defaults to a 100x100 coordinate space. Use the ViewBox fields to adjust if needed.

Keyboard Shortcuts

V Select tool

L Line tool

T Text tool

G Toggle grid

S Toggle snap

Ctrl+Z Undo

Ctrl+Y Redo

Ctrl+D Duplicate

Delete Delete selected

Enter Edit text

+ - Zoom in/out

Esc Deselect

Technical Details

Framework: Vanilla JavaScript (ES5-compatible), no dependencies
Rendering: DOM-based shapes with inline SVG
State: Centralized state object with undo/redo (50 steps)
Theme: Catppuccin Mocha dark color scheme with light mode toggle
Canvas: 10,000 x 10,000 px grid layer
Zoom: Mouse wheel zoom (0.1x to 5x)