diagram v1.1.0
A lightweight diagram editor built with vanilla HTML, CSS, and JavaScript. No dependencies, no build step. Create flowcharts and diagrams directly in the browser.
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.
- Touch Support Pointer Events for iPadOS and touchscreens, pinch-to-zoom, and finger-friendly handles.
- 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
- Input: Pointer Events API (unified mouse + touch + pen)
- State: Centralized state object with undo/redo (50 steps)
- Theme: Free Open Tools ecosystem dark/light scheme with toggle
- Canvas: 10,000 x 10,000 px grid layer
- Zoom: Mouse wheel zoom (0.1x to 5x) + pinch-to-zoom
Version History
1.1.0current
- Ecosystem spacing/radius/shadow tokens (F2/F3/F4)
- Normalized all tool icons to 24×24 viewBox (F1)
- aria-live on action log (F5)
- Canvas aria-label and role (F6)
- Cross-tab theme sync via storage event (F8)
- localStorage key migration: diagramflow-* → diagram-* (F10)
- Updated documentation to v1.1 (STYLE_GUIDE, reconciliation, README, REVIEW)
1.0.0Sep 6, 2025
- Pointer Events API — unified mouse, touch, and pen input
- Pinch-to-zoom on touchscreens
- Touch-friendly resize handles (22px)
- Larger toolbar buttons and context menu items (40px+ targets)
- Delete and Duplicate toolbar buttons for keyboardless use
- "Edit Text" in context menu
- Versioning system and about page light theme
- Fixed: connection endpoint snap on release
0.3.0Sep 6, 2025
- Custom SVG shapes with viewBox control
- Export to PNG, JPG, PDF (auto-crop and full canvas)
- Save/Load project files (.json)
- Project name and canvas dimensions in properties panel
- Shape naming, connection naming, action log
- Text alignment and padding controls
- Connection endpoint dragging with smart snap
- Free Open Tools ecosystem dark/light theme with toggle
- About page
0.2.0Sep 3, 2025
- Shape tools: rectangle, rounded rect, circle, diamond, triangle, terminator
- Line/arrow connections between shapes with outline snapping
- Text tool for floating labels
- Fill, stroke, opacity, and text color styling
- Undo/redo (50-step history)
- Zoom and pan with mouse wheel
- Grid and snap-to-grid
- Context menu: duplicate, delete, reorder, lock
- Auto-save to localStorage
0.1.0Sep 1, 2025
- Initial prototype — canvas, basic shapes, selection and dragging