Diagram Maker — Sequence, State, ER, Gantt & Flowcharts

Diagram Maker: build a flowchart with a simple form or Mermaid text and export it as SVG, PNG or PDF.

Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.

Build a flowchart without dragging boxes around. In Simple builder you list the shapes (steps, decisions, start and end points) and the arrows between them; the chart lays itself out neatly. Prefer typing? Switch to Text (Mermaid) and write the diagram in Mermaid, a popular plain-text format, or start from one of the templates.

Export a crisp SVG for documents and design tools, a PNG, or a PDF. The Diagram Maker version also includes templates for sequence, state, class, entity-relationship, Gantt and timeline diagrams.

Step by step

  1. Add shapes: In Simple builder, type the text for each shape and pick its type — use Diamond (decision) for yes/no questions. Add shape adds another.
  2. Connect them: Under Arrows, choose where each arrow starts and points, add an optional label such as “Yes”, and pick a style.
  3. Choose a direction: Lay the chart out Top to bottom or Left to right.
  4. Fine-tune in text (optional): Switch to Text (Mermaid) to edit the generated code directly, add groups (subgraphs) or try a template.
  5. Download: Pick a background and click Download SVG, Download PNG or Download PDF.

Handy for

Processes

Document how an order, refund or approval moves through a team.

Decisions

Map out yes/no checks for support or onboarding.

Study notes

Draw algorithms and lab procedures for assignments.

Software

Sketch login flows and system sequences in Mermaid, then paste the code into GitHub or docs that support it.

Good to know

  • If the text has a mistake, the problem line is named — click Go to line to jump to it. The preview keeps the last version that worked.

  • Put labels with special characters in quotes, e.g. A["Price (₹)"].

  • Use subgraph Name … end in text mode to draw swimlanes for teams.

  • SVG files stay sharp at any size and can be edited in Figma, Illustrator or Inkscape.

Questions

What is Mermaid?

An open, text-based way of describing diagrams (A --> B draws an arrow from A to B). It’s supported by GitHub, GitLab, Notion and many documentation tools, so your diagram code is reusable.

Can I drag shapes to place them myself?

No — the layout is automatic, which keeps charts tidy as they change. You control the order and direction; for free-form drawing use the Live Sketchboard.

Is the diagram code run as a program?

No. Diagrams are rendered in strict mode: links, scripts and HTML in labels are ignored, so pasted diagram text can’t run code in your browser.

Is my data uploaded anywhere?

No. Everything is drawn in your browser, so your numbers, text and word lists never leave your device.

More Charts & Diagrams tools

  • Mind Map Maker — Type an indented outline and get a colourful, collapsible mind map you can download as SVG, PNG or PDF.
  • Word Search Maker — Make printable word search puzzles from your own words, with diagonal and backwards options and an answer key.
  • Bingo Card Generator — Print sets of unique bingo cards — classic 1–75 numbers or your own words — with a free space and a caller’s sheet.
  • Chart Maker — Turn a table, CSV or Excel sheet into a bar, line, area, scatter or pie chart and download it as PNG or PDF.
  • Pie Chart Maker — Type labels and values to get a clean pie or doughnut chart with percentages and labels, ready to download.

All Charts & Diagrams tools