Flow Diagram Editor

A web-based flowchart editor built with React and TypeScript. It features an open canvas for creating, connecting, and styling diagram elements.

View Live Application

Preview

---

Features

Canvas

• Pan by dragging the background
• Zoom via scroll wheel or on-screen controls

Nodes

• Add nodes in multiple shapes
• Drag, resize, and edit node content
• Style per node: background, border color/width/radius, text color and font size

Edges

• Connect nodes with directed edges via arrow handles
• Choose between straight or stepped (elbow) connectors
• Endpoints snap to the nearest anchor point

Export

• Drag a bounding box to select exactly which area of the canvas to export
• Export as PNG or JPEG
• Save via file download or copy directly to clipboard

Keyboard Shortcuts

• Ctrl+C / Ctrl+V — Copy and paste selected element
• Ctrl+X — Cut selected element
• Delete — Remove selected element
• Ctrl+Z / Ctrl+Shift+Z — Undo and redo

Getting Started

Requirements: Node.js 18+, a modern browser

git clone https://github.com/jairejustin/flow-diagram-editor.git
cd flow-diagram-editor
npm install
npm run dev

License

MIT