DEV3 Free Whiteboard Flowchart Maker — Source Code (React + Tailwind)

Source code of the DEV3 Whiteboard Flowchart Maker, a custom SVG whiteboard for flowcharts with an infinite pan and zoom canvas, shapes, sticky notes, freehand pen, connectors that stay attached and re-route, and PNG, SVG and JSON export.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/whiteboard-flowchart-maker shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Infinite canvas: hand tool, space or middle-mouse pan, wheel and button zoom, fit to content
• Rectangle, ellipse, diamond, text and sticky shapes with resize handles and inline text editing
• Connectors anchored to the nearest side that follow shapes, orthogonal or straight, arrowheads and labels
• Marquee and shift selection, copy, paste, duplicate, layer order, snap to grid and one-step-per-drag undo/redo
• Light-background PNG and SVG cropped to content, validated JSON import and export

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, jspdf.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• Exports are rasterised from the SVG in the browser; very large drawings are scaled to fit 4096 px.
• No real-time collaboration; the drawing lives in localStorage unless exported.