What is Flowchart Maker?

Flowchart Maker is an interactive drag-and-drop tool for creating professional flowcharts, process diagrams, and workflow visualizations — entirely in your browser. With 37 shape types including process boxes, decision diamonds, databases, tables, swimlanes, and more, you can build anything from simple decision trees to complex system architectures.

Who Is This For?

Software Developers

Document system flows, CI/CD pipelines, and data architectures with precision.

Business Analysts

Map out business processes, approval workflows, and customer journeys.

Students

Create algorithm flowcharts, decision trees, and study diagrams with ease.

Project Managers

Visualize project workflows and team processes for clearer communication.

Your Data Stays Private

All processing happens in your browser — nothing is ever sent to a server.

No uploads — your diagrams never leave your device
No tracking — we don't collect usage data
Auto-save — work is saved to your browser's local storage automatically

Table of Contents

1. What is Flowchart Maker?
- 1.1. Who Is This For?
- 1.2. Your Data Stays Private
2. How to Use Flowchart Maker
3. Features
4. Frequently Asked Questions

How to Use Flowchart Maker

Getting started is straightforward. Here's a complete walkthrough of the core interactions — from placing shapes to exporting your finished diagram.

Creating Shapes

Choose from 37 shape types in the left sidebar, organized into groups: Basic, Flow Control, Data, Process Types, Annotations, Additional, Logic/Junction, Storage, and More Shapes.

Click a shape in the sidebar to place it at the center of the canvas
Drag a shape from the sidebar and drop it anywhere on the canvas
Shapes automatically snap to a 20px grid for neat alignment

Connecting Shapes

Hover over a shape to reveal blue connection dots on its edges
Click a dot, then click another dot on a different shape to create a curved connection
Add labels (like "Yes" or "No") to connections from the properties panel
Choose from 4 arrow types: forward, backward, both directions, or no arrows

Editing Shapes

Double-click any shape to edit its text
Use the right properties panel to change colors, borders, opacity, font size, and dimensions
Drag the square resize handles around a selected shape to resize it

Working with Tables

Add a Table shape from the Additional group in the sidebar
Double-click any cell to edit its content
Press Tab to move to the next cell, Shift+Tab to go back
Use the properties panel buttons to add or remove rows and columns

Organizing Your Diagram

Select multiple shapes with Ctrl+Click or drag a selection rectangle
Use Align tools (appear when 2+ shapes are selected) to align or distribute evenly
Click Auto Layout to automatically arrange all shapes in a hierarchical layout
Group shapes with Ctrl+G to move them together

Exporting Your Work

PNG

High-resolution image (2x) — ideal for presentations and documents.

SVG

Scalable vector format — perfect for web and print use.

JSON

Save diagram data to reload later, share with others, or import across devices.

Features

37 Shape Types

A comprehensive library covering all standard flowchart symbols plus additional shapes for specialized use cases:

Basic & Flow Control

Basic — Process, Start/End, Subprocess, Predefined Process
Flow Control — Decision, Merge, Connector, Off-Page
Annotations — Note, Display

Data & Process Types

Data — Input/Output, Database, Document, Multi-Document, Internal Storage
Process Types — Manual Operation, Preparation, Delay, Manual Input

Logic & Storage

Logic — Or Gate, Summing Junction, Collate, Sort, Extract, Loop Limit
Storage — Stored Data, Direct Data

Additional & More Shapes

Additional — Free Text, Table, Cloud, Star, Callout, Arrow, Circle, Swimlane
More — Card, Tape, Diamond, Rounded Rect, Hexagon, H-Line, V-Line, Bracket, Curly Brace

Smart Connections

Connect shapes with smooth bezier curves. Add text labels to connections, choose from 4 arrow types, and customize line color, width, and style — solid, dashed, or dotted.

Interactive Tables

Add table shapes with fully editable cells. Double-click any cell to edit, use Tab to navigate between cells, and add or remove rows and columns directly from the properties panel.

Precision Tools

Snap Guidelines

Alignment lines appear automatically when dragging shapes near others for pixel-perfect placement.

Align & Distribute

Align shapes left, center, right, top, middle, or bottom — and distribute them evenly with one click.

Auto Layout

Automatically arrange all shapes into a clean hierarchical structure with a single click.

Grid Snapping

Shapes snap to a 20px grid, keeping your diagrams consistently aligned and tidy.

Minimap — overview panel with click-to-navigate for large diagrams
Zoom — scroll wheel, buttons, or fit-to-screen (10% to 500%)
Pan — right-click drag, middle-click drag, or hand tool (H)
Search — find and replace text across all shapes with Ctrl+F

Multi-Chart Workspace

Work on multiple diagrams in separate tabs. Add, rename, duplicate, or delete charts as needed. Each tab maintains its own independent set of shapes, connections, and viewport state.

Export & Import

Export your flowchart as PNG (high-resolution), SVG (vector), or JSON (data). Import JSON files to continue editing or share diagrams between devices.

12 Built-in Templates

Start quickly with pre-built templates designed for common use cases:

General

Basic Flow, Decision Tree

Business

E-commerce Checkout, Recruitment Process, Customer Support, Order Fulfillment

Technical

User Authentication, Bug Report, Software Development, CI/CD Pipeline, Database CRUD, File Upload

Frequently Asked Questions

How do I connect two shapes?

Hover over a shape to see blue dots appear on its edges. Click one dot, then click a dot on another shape — a curved arrow will connect them. You can also press C to switch to Connect mode.

How do I add labels like "Yes" or "No" to connections?

Click on a connection to select it. In the properties panel on the right, type your label text in the Label field. The text will appear at the midpoint of the connection.

How do I edit a table cell?

Double-click any cell in a table shape. Type your content and press Enter to save. Press Tab to move to the next cell or Shift+Tab to go back.

How do I select multiple shapes at once?

Hold Ctrl and click each shape individually. Alternatively, click on an empty area of the canvas and drag to create a selection rectangle — all shapes inside will be selected.

How do I align shapes neatly?

Select two or more shapes. Alignment buttons will appear in the toolbar. Click to align left, center, right, top, middle, or bottom. With 3 or more shapes selected, you can also distribute them evenly.

Can I save my flowchart?

Your work is automatically saved to your browser's local storage. To save a portable copy, click Export → JSON. You can later import this file to continue editing on any device.

What export formats are available?

PNG for images (2x resolution), SVG for scalable vector graphics, and JSON for diagram data that can be re-imported and edited later.

How do I work on multiple diagrams?

Click the + button next to the chart tabs in the toolbar to create a new tab. Each tab has its own independent canvas. Click the three-dot menu on any tab to rename, duplicate, or delete it.

What keyboard shortcuts are available?

Press ? to see the full list. Key shortcuts include:

V — Select mode
H — Pan mode
C — Connect mode
Ctrl+Z — Undo
Ctrl+C / Ctrl+V — Copy / Paste
Ctrl+F — Search
Ctrl+G — Group shapes

Is my data private?

100% Private: Everything runs entirely in your browser. No data is sent to any server. Your diagrams are stored only in your browser's local storage.