Flowchart Maker for Diagrams That Build Themselves
This flowchart maker is a drag-and-drop tool for building flowcharts, process diagrams, and workflow visualizations right in your browser. Pick a shape, drop it on the canvas, and connect the boxes — nothing to install and no account to create.
With 44 shape types — from process boxes and decision diamonds to databases, swimlanes, and logic gates — you can map anything from a simple decision tree to a full system architecture. It fits software developers documenting pipelines, business analysts mapping approval workflows, students drawing algorithm flowcharts, and project managers visualizing team processes.
How to Make a Flowchart
Add shapes
Open a shape group in the left sidebar — Basic, Flow Control, Data, and more — then click a shape to drop it at the center, or drag it anywhere on the canvas. Shapes snap to a 20px grid for tidy alignment.
Connect them
Hover a shape to reveal its blue connection dots, then click one dot and a dot on another shape to draw a curved arrow. Press C for Connect mode, and add a label like Yes or No from the properties panel.
Edit and style
Double-click any shape to type its text. Use the right properties panel to change fill, border, opacity, font size, and dimensions, or drag the resize handles to reshape a selected shape.
Arrange neatly
Select shapes with Ctrl+click or a drag rectangle, then use the Align and Distribute tools, or click Auto Layout to arrange everything into a clean hierarchy automatically.
Export your work
Open the Export menu and save your flowchart as a PNG image, an SVG vector, or a JSON data file. Import a JSON file later to keep editing or to share a diagram between devices.
Features
44 Shape Types
A full library of flowchart symbols — process, decision, terminal, data, database, document, table, swimlane, logic gates, and more — organized into nine groups.
Drag-and-Drop Canvas
Drag shapes from the sidebar or click to place them. Everything snaps to a 20px grid, with snap guidelines that appear as you align shapes to their neighbors.
Smart Connections
Link shapes with smooth curved arrows. Add labels, pick from four arrow styles (forward, backward, both, none), and set line color, width, and solid, dashed, or dotted styles.
Interactive Tables
Drop a table shape with editable cells. Double-click a cell to type, press Tab to move along, and add or remove rows and columns from the properties panel.
Auto Layout & Alignment
One click arranges your shapes into a tidy hierarchy. Align left, center, right, top, middle, or bottom, and distribute selected shapes evenly.
Grouping & Z-Order
Group shapes with Ctrl+G to move them as one, ungroup with Ctrl+Shift+G, and bring shapes to the front or send them to the back to control overlap.
Search & Replace
Press Ctrl+F to find any text across every shape and replace it in one place — handy for renaming steps in large diagrams.
Minimap & Zoom
A minimap gives a click-to-navigate overview of big diagrams. Zoom from 10% to 500% with the wheel, buttons, or fit-to-screen, and pan with the hand tool.
Multi-Chart Tabs
Work on several diagrams in separate tabs. Add, rename, duplicate, or delete charts, with each tab keeping its own shapes, connections, and viewport.
12 Built-In Templates
Start fast with ready-made diagrams: basic flow, decision tree, e-commerce checkout, recruitment, authentication, bug report, software development, support, order fulfillment, CI/CD, database CRUD, and file upload.
Export & Import
Export to PNG (2x resolution), SVG vector, or JSON data, and re-import a JSON file to continue editing or share diagrams between devices.
Shortcuts & Dark Mode
Keyboard shortcuts cover tools and editing — press ? for the full list — plus undo/redo history, a right-click menu, and a built-in dark theme.
Frequently Asked Questions
How do I make a flowchart online?
Open a shape group in the left sidebar, then click or drag a shape onto the canvas. Hover a shape to reveal its blue dots and click between two shapes to connect them. Double-click a shape to type its text. There is nothing to download or sign up for — just open the page and start building.
Is this flowchart maker free, and do I need an account?
Yes, it runs entirely in your browser with no sign-up. Every shape and connection is built locally, and your work auto-saves to your browser's storage so it is still there when you return.
What do the flowchart symbols mean?
A rectangle (Process) is a step or action, a diamond (Decision) is a yes/no branch, and an oval (Start / End, also called a terminal) marks where a flow begins or ends. Beyond these basics there are 44 shapes in all, including data, database, document, swimlane, and logic-gate symbols, each grouped by purpose in the sidebar.
How do I connect two shapes and add a label?
Hover a shape to see the blue dots on its edges, click one dot, then click a dot on another shape to draw a curved arrow. You can also press C for Connect mode. To label a line, select it and type into the Label field in the properties panel — the text appears at the midpoint.
How do I export a flowchart as an image?
Open the Export menu and choose PNG for a high-resolution (2x) image, SVG for a scalable vector you can print or place on the web, or JSON to save the editable data. Re-import the JSON file later to keep working on the same diagram.
How do I align shapes and arrange them automatically?
Select two or more shapes and the Align tools appear — align left, center, right, top, middle, or bottom, and distribute three or more evenly. To skip manual placement entirely, click Auto Layout and the tool arranges every shape into a hierarchical structure.
Can I work on more than one diagram at a time?
Yes. Add a new chart tab from the toolbar and each tab keeps its own independent canvas, shapes, and zoom. Use a tab's menu to rename, duplicate, or delete it.
What keyboard shortcuts can I use?
Press ? for the full list. Common ones include V (select), H (pan), and C (connect), plus Ctrl+Z to undo, Ctrl+C / Ctrl+V to copy and paste, Ctrl+D to duplicate, Ctrl+G to group, and Ctrl+F to search and replace.
Is my data private?
Yes. Everything runs in your browser and nothing is sent to a server. Your diagrams live only in your browser's local storage, where they auto-save as you work.
No comments yet. Be the first to comment!