Home › Image Tools › Flowchart Maker
Flowchart Maker
Draw clear flowcharts in your browser. Drag standard shapes onto the grid, pull arrows from the blue connection points, label the Yes/No branches and export a crisp PNG or SVG. Your chart autosaves on this device and can be saved as JSON.
Last updated:
100%
Drag a blue dot to connect · release on empty space to add the next step · double-click to edit text · drag the background to scroll · Delete removes.
Advertisement
Advertisement
How to use the Flowchart Maker
- Add shapes by clicking a symbol in the palette or dragging it onto the grid. Start with a Terminator labelled Start.
- Connect steps: hover a shape, drag from one of its blue dots and release on another shape. Release on empty space to create and connect a new step.
- Edit text by double-clicking a shape or connector; press Enter to finish (Shift+Enter for a new line).
- Style it in the side panel: colours, size, connector type, dashes and labels such as Yes and No for decisions.
- Export a PNG or SVG for documents and slides, or Save JSON to keep editing later.
Flowchart symbols and their meaning
| Symbol | Name | Use it for |
|---|---|---|
| Rounded rectangle (pill) | Terminator | Start and end points of the process |
| Rectangle | Process | An action or step, written as a verb phrase ("Send invoice") |
| Diamond | Decision | A yes/no or multi-way question; label every exit |
| Parallelogram | Input / output | Data entering or leaving the process ("Read user input", "Print report") |
| Rectangle with wavy bottom | Document | A document or report that is produced or used |
| Rectangle with double sides | Predefined process | A sub-process or function defined elsewhere |
| Cylinder | Database | Stored data such as a database or file |
| Small circle | Connector | Joins flow lines or links to another part of the chart |
| Folded-corner note | Annotation | Comments and explanations that are not steps |
These shapes follow the conventions of ISO 5807 and the classic ANSI flowchart symbols, which most readers recognise.
Rules for a readable flowchart
- One start, clear ends. Begin with a single Start terminator; every path should reach an End.
- Flow top to bottom, left to right. Keep the main "happy path" in a straight vertical line and branch exceptions to the side.
- Label decision exits. Every arrow leaving a diamond needs a label such as Yes / No, or the possible values.
- One action per box. Start process text with a verb and keep it short; split long steps in two.
- Avoid crossing lines. Rearrange shapes or use a connector circle instead of letting arrows cross.
- Keep the level consistent. If a step needs its own detailed chart, use a predefined process box and draw it separately.
Frequently asked questions
What do the flowchart shapes mean?
Rounded terminators mark the start and end, rectangles are process steps, diamonds are decisions with two or more labelled exits, parallelograms are inputs or outputs, a wavy-bottom shape is a document, a rectangle with double sides is a predefined process (a sub-routine), a cylinder is stored data and a small circle is an on-page connector.
How do I connect two shapes?
Hover or select a shape to show its four blue connection points. Drag from a point and release over another shape; the arrow attaches to the nearest side. If you release on an empty area, a new process shape is created and connected for you.
How do I label Yes and No branches?
Click the connector (or double-click it) and type the label, for example Yes or No. Labels sit in the middle of the line with a white background so they stay readable.
Is my flowchart saved?
It autosaves in your browser's local storage on this device. For a permanent copy, use Save JSON and open the file later with Open JSON. Nothing is uploaded.
Should I export PNG or SVG?
SVG is a vector file that stays sharp at any size and can be edited in design tools; it is ideal for documentation and printing. PNG is a 2× bitmap that pastes easily into slides, chats and word processors.
Which keyboard shortcuts are available?
Delete removes the selection, Ctrl+Z / Ctrl+Y undo and redo, Ctrl+D duplicates a shape, arrow keys nudge (Shift for bigger steps), Enter or F2 edits text and Escape clears the selection.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
Mind Map MakerBuild mind maps fast with keyboard shortcuts and auto layout, then export PNG, SVG or JSON.Org Chart MakerType an indented list of names and titles and get a clean org chart to download as PNG or SVG.Venn Diagram MakerMake 2- or 3-circle Venn diagrams from lists; overlaps are found for you. Export PNG or SVG.Family Tree MakerBuild a family tree with people, dates and photos; auto-layout, save JSON, export PNG/PDF.Arrow SymbolsCopy and paste 600+ arrow symbols → ⇒ ➜ ↑ ↻ by direction and style, with Alt and HTML codes.ASCII Diagram EditorDraw boxes, arrows and text on a character grid and copy plain-text diagrams for code and READMEs.Database Schema DesignerDesign tables and relationships visually, then export SQL for MySQL, PostgreSQL or SQLite.JSON Graph VisualizerSee JSON as an interactive node graph with zoom, collapse and search; export PNG or SVG.Meme GeneratorMake memes with classic templates and custom text.Logo MakerDesign a text logo with fonts, icons and colors, then save SVG or PNG.Certificate MakerDesign certificates from templates and export one or many as PDF.GIF MakerTurn videos and images into GIFs, trim and compress.Business Card MakerDesign business cards and download a print-ready PDF.Flyer MakerDesign printable and social media flyers from free templates.Poster MakerDesign posters in A0–A5 and US sizes and download a print-ready PDF.Invitation Card MakerCreate printable birthday, wedding and party invitations for free.Thumbnail Safe ZonePreview YouTube and TikTok thumbnail safe zones.Thumbnail MakerDesign 1280×720 YouTube thumbnails with templates, bold text and stickersWallpaper GeneratorCreate gradient and pattern wallpapers sized for any phone, tablet or desktopYouTube Thumbnail GrabberPaste a YouTube link to get every thumbnail size, from HD 1280x720 down to 120x90.CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with draggable stops and export CSS or PNG.Chart MakerMake bar, line, area, pie and doughnut charts from a simple table and download PNG or SVG.Timeline MakerCreate horizontal or vertical timelines from dated events with colors, then save PNG or SVG.Gantt Chart MakerPlan tasks with dates, progress and dependencies on a Gantt chart, then export PNG or CSV.Word Cloud GeneratorTurn any text into a word cloud in shapes like a heart or star, then save it as PNG or SVG.Pie Chart MakerMake pie and donut charts with labels, percentages and a legend, then download PNG or SVG.Favicon GeneratorMake a favicon.ico, PNG icons, apple-touch-icon and web manifest from an image, text or emoji.Passport Photo MakerMake passport and visa photos for any country and print them on a 4x6 sheet.Signature MakerDraw or type your signature and download it as a transparent PNG or SVG.Quote Image MakerTurn a quote into a shareable image for Instagram, Stories or X with backgrounds and fonts.Profile Picture MakerMake a round or square profile picture with a ring border and color or gradient background.Before and After Image MakerCombine two photos into a labeled before and after image or an animated slider video.Device Mockup GeneratorPut a screenshot into a phone, tablet, laptop, monitor or browser frame and download a PNG.Seamless Pattern GeneratorMake seamless dot, stripe, wave, grid, zigzag and check patterns. Export CSS, SVG or PNG.3D Text GeneratorRender extruded 3D text with depth, bevel, materials and rotation; export a transparent PNG.Album Cover MakerDesign 3000×3000 album and podcast cover art with photo filters and type presets.Animated Text GIF MakerCreate animated text GIFs with typing, blink, bounce, rainbow or scroll effects; GIF or WebM.App Icon GeneratorMake every iOS, Android adaptive, PWA and macOS app icon size from one image, as a ZIP.Low Poly GeneratorTurn a photo or a random gradient into low-poly triangle art. Download PNG, JPG or SVG.Seamless Texture MakerMake any image tileable with offset blending, edge cross-fade or mirroring, with a tiled preview.Mesh Gradient GeneratorDrag color points to make smooth mesh and aurora gradients with grain, then export PNG or CSS.Motivational Poster MakerMake a classic black-border motivational or funny demotivational poster from your photo.Name Tag MakerMake printable name badges in bulk from a list of names, titles and companies as a PDF.Neon Text GeneratorMake glowing neon sign text on brick or dark walls, with flicker, and save it as PNG or GIF.Open Graph Image GeneratorDesign 1200x630 social share images with templates and live link previews, then export PNG.Paint by Numbers GeneratorTurn a photo into a numbered paint-by-numbers outline with a color palette and printable PDF.Pinterest Pin MakerDesign 1000×1500 Pinterest pins with templates, headline overlays, brand colors and a URL footer.Cover Photo MakerMake Facebook, LinkedIn, X and Twitch cover images at exact sizes with profile-photo guides.Sticker MakerTurn a photo into a die-cut sticker: remove the background, add a white outline and shadow.Twibbon MakerPut your photo behind a campaign frame PNG, drag and zoom to fit, download a square picture.Wanted Poster MakerMake an old-west wanted poster with your photo, name and reward on aged paper. PNG or PDF.YouTube Banner MakerDesign 2560×1440 YouTube channel art with safe-area guides, text, shapes and templates.Banner MakerDesign web ad banners, headers and printable vinyl banners with templates; PNG, JPG or PDF.Barcode ScannerScan UPC, EAN, Code 128, QR and Data Matrix codes with your camera or a photo. Export CSV.Bulk QR Code GeneratorTurn a list or CSV of links into hundreds of QR codes: ZIP of PNG/SVG or a printable PDF sheet.Christmas Card MakerMake printable folded or 5×7 photo Christmas cards with festive templates, fonts and messages.Emoji MakerDesign your own custom emoji from faces, eyes, mouths and accessories, then save a transparent PNG.Floor Plan MakerDraw rooms, doors, windows and furniture to scale with live dimensions, then export PNG, SVG or PDF.Gift Certificate MakerDesign printable gift certificates and vouchers with amount, codes, expiry and your logo.Infographic MakerBuild a vertical infographic from templates with stats, charts, icons and steps; export PNG or PDF.Nutrition Facts Label GeneratorMake an FDA-style Nutrition Facts label with auto %DV and rounding; download PNG, SVG or PDF.QR Code Generator with LogoMake a custom QR code with your logo in the middle, styled dots, eyes, colors and gradient.T-Shirt Mockup GeneratorPut your design on a realistic front or back t-shirt mockup in any color and download a PNG.Tier List MakerRank images or text in S, A, B, C, D tiers by drag and drop, then save the tier list as a PNG.US Map MakerColor US states by hand or from CSV data, add a legend, labels and title; export PNG or SVG.Wedding Invitation MakerDesign elegant printable wedding invitations and matching RSVP cards, 5x7 PDF or PNG.WiFi QR Code GeneratorMake a Wi-Fi QR code guests scan to join your network, plus a printable sign or card.World Map MakerColor countries by hand or from CSV data, add a legend and title; Robinson or Mercator; PNG/SVG.