UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Flowchart Builder

Build hand-drawn style flowcharts and diagrams in your browser. Add shapes, arrows, and text labels. Drag to reposition, double-click to edit, and export as PNG.

About Flowchart Builder

Flowchart Builder is a lightweight, browser-based diagramming tool that renders shapes in a distinctive hand-drawn style using Rough.js. It supports five element types: rectangle (process step), diamond (decision), circle (terminal), arrow (flow connector), and free text. Shapes are placed by clicking the canvas, repositioned by dragging, and labeled by double-clicking. A color picker lets you choose fill and stroke colors for each shape, and a stroke-width slider adjusts line weight. The selected shape is highlighted with an accent outline. The entire diagram state is maintained as an in-memory array of shape objects — no external storage or server communication is needed. Export the finished diagram as a PNG at the canvas's native resolution. Rough.js is loaded on demand from CDN; a clean fallback renderer handles the case where CDN is unavailable.

Why use Flowchart Builder

Hand-drawn Rough.js style makes diagrams approachable and informal.
Five shape types cover the complete flowchart symbol vocabulary.
Drag-and-drop repositioning and inline text editing keep the workflow fast.
No account, no installation, and no data leaves your browser.
Arrow tool draws directional connectors with arrowheads automatically.
Hand-drawn Rough.js style makes diagrams approachable, informal, and great for early-stage design discussions.

How to use Flowchart Builder

Select a shape type from the toolbar (Box, Diamond, Circle, Arrow, or Text).
Click anywhere on the canvas to place the shape.
Drag a shape to reposition it.
Double-click a shape to edit its text label.
Choose fill color, stroke color, and line width from the toolbar, then click '↓ PNG' to download.
Click anywhere on the canvas to place the shape at that position.
Drag a shape to reposition it; the selected shape shows an accent outline.

When to use Flowchart Builder

Sketching a quick algorithm or process flow during a meeting.
Creating a decision tree or user journey for a presentation.
Documenting a simple workflow without opening heavy diagramming software.
Explaining a technical process with an informal, approachable aesthetic.
Sketching a quick algorithm or process flow during a meeting without launching heavy diagramming software.
Creating a decision tree or user journey for a presentation where formal aesthetics would feel premature.

Examples

Login flow

Input: User scenario: visitor arrives, decides whether they have an account, signs in or signs up, lands on dashboard

Output: Hand-drawn flowchart with terminal (Start), diamond (Has account?), two paths to rectangles (Sign in / Sign up), and terminal (Dashboard).

Bug triage

Input: Process: bug reported, reproduce, triage severity, assign or close

Output: Diagram with rectangles for actions and diamonds for severity decisions, exported as a 1600 × 900 PNG for the team wiki.

Algorithm sketch

Input: Algorithm: read input, validate, transform, write output, exit

Output: Linear flowchart with five rectangles connected by arrows in a presentation-ready hand-drawn style.

Tips

Start with the overall flow using the Arrow tool to plan your shape positions, then layer rectangles and diamonds on top.
Use diamond shapes for yes/no decision points and circles for start/end terminals; this matches the standard ANSI/ISO flowchart vocabulary.
Pick a light fill colour (e.g. #2a2a2a) and accent stroke (#f5c842) for the classic UtilityKit dark-theme look.
Increase stroke width to 3–4 for presentation-scale diagrams that are easy to read at a distance during talks.
Export often — the diagram only lives in browser memory and a tab refresh will lose unsaved work.
If the PNG export looks low-resolution, resize your browser window first; the PNG is exported at the canvas pixel size.

Frequently Asked Questions

How do I connect shapes with arrows?▾

Select the Arrow tool, click once on the canvas to set the arrow start point, then click again to set the end point. The arrowhead is drawn automatically at the second point.

Can I edit the text on a shape after placing it?▾

Yes. Double-click any shape to open an inline text editor. Press Enter or click away to confirm the new label.

How do I delete a shape?▾

Click a shape to select it (it highlights with an accent border), then press the Delete key, or click the '✕ Delete' button in the toolbar.

What does the 'hand-drawn' style mean?▾

The tool uses Rough.js to render shapes with slight imperfections and jitter that mimic hand-drawn lines, giving diagrams a natural, sketched appearance.

Can I save and reopen my diagram later?▾

Currently the tool only supports PNG export — there is no save/load for the diagram state. Export often to preserve your work.

Does the tool work offline?▾

Rough.js is loaded from CDN on first use. After that the page can function without a network connection within the same browser session. A graceful fallback renderer is used if the CDN is unavailable.

Explore the category

Glossary

Flowchart: A diagram that represents a process or algorithm using standardised symbols connected by arrows indicating flow direction.
Diamond shape: The standard flowchart symbol for a decision point, where the flow branches based on a yes/no or true/false condition.
Terminal symbol: A rounded shape (often a circle or stadium) marking the start or end of a flowchart — typically labelled 'Start' or 'End'.
Process step: A rectangular shape representing an action, computation, or transformation in a flowchart.
Rough.js: An open-source JavaScript library that renders shapes with a hand-drawn, sketchy appearance on HTML5 Canvas; powers Excalidraw and similar tools.
Arrowhead: The triangular tip at the end of a flow connector that indicates direction of flow from one process step to the next.
Canvas2D: The browser API used to render shapes pixel-by-pixel; Rough.js builds on top of it to add the sketch aesthetic.