How to use the flowchart maker
- Add a Start / End, Process or Decision shape. The sample is already editable, so you may also rename, move or delete its shapes.
- Select a shape to change its type or color in the inspector. Click its text to edit directly. Drag the shape body to move it; arrow keys also move the selection.
- Drag from the top, bottom, left or right connection point to another shape. Select the line to edit its label, solid/dashed/dotted style and both arrow tips. The top palette adds separate shapes.
- Use Undo or Redo while editing, zoom and pan the view when the chart grows, then download SVG for scalable artwork or PNG for a ready-to-place image.
What the shapes mean
A rounded Start / End shape marks where a procedure begins or finishes. A Process rectangle is an action such as “Check inventory” or “Send confirmation”. A Decision diamond asks a question whose outgoing arrows normally carry labels such as Yes, No, Pass or Retry. These meanings are conventions rather than enforced rules: the editor will not invent steps, evaluate a decision or run the process. Keep each label brief enough to scan, and put detail in the document that accompanies the chart when necessary.
Example: an approval flow
Begin with Start, connect it to “Review request”, and connect that process to “Approved?”. Add one End shape labeled “Publish” and another process labeled “Revise request”. Draw a Yes arrow from the decision to Publish and a No arrow to Revise request; connect Revise request back to Review request if the procedure repeats. Moving the decision later keeps every arrow attached because connections refer to shapes, not old screen coordinates. This example shows a loop, a branch and labeled outcomes without asking the tool to decide which outcome is correct.
Example: a support checklist
Create Start, “Read ticket”, and the decision “Enough information?”. Connect Yes to “Investigate issue” and No to “Ask for details”. Finish both paths at “Reply to customer” and then End. Duplicate a process when two steps need similar wording, then edit the copy rather than repeatedly adding a blank shape. The duplicate has no copied arrows, which prevents an unnoticed connection from changing the meaning of the support path.
Selection, movement and edit history
The selected shape has a dashed outline and two actions: duplicate and delete. Its text, color and shape type are editable in the inspector; changing type keeps its name and connections. The palette adds new shapes, while the four connection points join existing ones. You can also focus a point and press Enter, then focus another point and press Enter to connect using a keyboard. Undo and Redo are the icons at the top-right of the canvas. Each addition, deletion, drag and completed text, color or line-style edit is one history step. Ctrl/Command+Z, Shift+Ctrl/Command+Z and Ctrl+Y work outside text inputs. Arrow keys move a selected shape; Delete removes it. Clear is also undoable.
Canvas and output limits
The canvas is a finite 1,200 by 760 coordinate area, with at most 40 shapes, 60 directed connections, 60 characters per shape and 36 characters per branch label. Shapes stop at the canvas edge. These limits keep interaction and image generation predictable; this page is not an infinite whiteboard. SVG preserves vector shapes and selectable XML text, although exact font metrics may vary by viewer. PNG is rendered at 1,200 by 760 pixels on a white background. The editor grid, selection outlines, controls, zoom and pan position are not included in either file.
Saving, privacy and compatibility
Edits stay in this browser tab and are not uploaded by this tool. Download is an image export, not an editable project backup: reloading, leaving the page or changing language discards the diagram. Save an SVG or PNG first. SVG is best when the destination accepts vector images and you need clean scaling; PNG is usually simpler for email, chat and documents that expect a bitmap. This tool does not provide accounts, cloud synchronization, collaboration, AI-generated diagrams, templates, automatic layout, editable import or a guarantee that another diagram editor can reconstruct the original connections.
Troubleshooting
If a connection is rejected, use two different shapes without an existing arrow in the same direction. Move shapes apart if there is no clear route or label space. Lines route around shape bounds; labels sit near the middle of their route without overlapping shapes or other labels. If a name is too long, shorten it. Use Fit to recover the view and drag blank space to pan. If PNG creation fails, try SVG. Before sharing, check each arrow and the meanings of its labels.
Frequently asked questions
Does the maker generate a flowchart from text or AI?
No. You add, label, connect and position every shape yourself. It does not analyze a prompt or invent a process.
Why did connections disappear when I deleted a shape?
An arrow needs both endpoint shapes. Deleting a shape also removes every arrow attached to it so the file cannot contain dangling connections.
Can I edit the downloaded file later?
SVG can be opened by many vector tools, but this page exports an image rather than a project file. Re-import and full connection editing are not promised.
Do arrows stay attached when a shape moves?
Yes. Both the editor and exports calculate arrow endpoints from the current positions of their source and destination shapes.
What is the difference between SVG and PNG?
SVG is vector markup that scales cleanly; PNG is a fixed 1,200 × 760 bitmap. Both contain the same current shapes, arrows and branch labels.