usefulweb.site Diagram & Flowchart Maker

Charts & data

Diagram & Flowchart Maker

Write flowcharts, sequence diagrams and mind maps as text and get a laid-out SVG/PNG diagram.

First line: "flowchart TD" (or LR, BT, RL), "sequenceDiagram" or "mindmap". See the examples.

Shown above the diagram and used as its accessible name.

Try an example: Order flowchart (top-down, shapes, labelled edges, a loop) · Login sequence diagram · Trip mind map · Left-to-right pipeline

How it works

Type a diagram in a Mermaid-like text syntax – flowcharts (top-down or left-right, node shapes, labelled arrows), sequence diagrams (participants, messages, notes, loop/alt blocks) or indented mind maps – and get an automatically laid-out, accessible SVG with SVG/PNG downloads. Syntax errors are reported with line numbers.

  • The text is parsed line by line; every error is reported with its line (and column for flowcharts). Supported: flowchart/graph TD|TB|BT|LR|RL with shapes [rect] (round) ([stadium]) [[subroutine]] [(database)] ((circle)) {diamond} {{hexagon}} [/parallelogram/] [/trapezoid\] >flag], arrows --> --- -.-> ==> <-->, labels -->|text| or -- text -->, chains A --> B --> C and groups A & B --> C; sequenceDiagram with participant/actor (… as Alias), ->> -->> -> --> -x --x -) --), Note left of/right of/over, loop/alt/else/opt/par/critical/break … end, autonumber; mindmap with indentation and the usual node shapes.
  • Flowcharts are laid out with a layered (Sugiyama-style) algorithm: cycles are broken by reversing DFS back edges; nodes get the longest-path layer (edges with labels span two layers so the label gets its own slot); long edges get dummy nodes; crossings are reduced with 24 alternating barycentre sweeps plus adjacent swaps, keeping the best ordering; positions are assigned by order-preserving least squares (isotonic regression) toward the neighbours, which keeps long edges straight.
  • Sequence diagrams place participants in order of appearance, widen gaps to fit message texts and stack messages, notes and blocks top-down. Mind maps are drawn as a two-sided tree, balancing first-level branches by their number of leaves.
  • Styling statements (style, classDef, class, linkStyle, click) and subgraph frames are accepted but not drawn; they are listed as ignored lines. The output is plain SVG (no scripts, no external references) that passes the site’s strict sanitiser; arrowheads are drawn as shapes so PNG export keeps them.

A Mermaid-like subset, not full Mermaid compatibility: complex features (subgraph frames, styling, class diagrams, Gantt charts) are not supported.

For scripts and AI agents

  • JSON API: POST https://diagramflowchartmaker.usefulweb.site/api/v1/calculate (same calculation as this page)
  • Interface description: OpenAPI 3.1 · AI guide: llms.txt
  • MCP server (Streamable HTTP): https://diagramflowchartmaker.usefulweb.site/mcp · tool name diagram_flowchart_maker
Example request
curl -s -X POST https://diagramflowchartmaker.usefulweb.site/api/v1/calculate \
  -H 'content-type: application/json' \
  -d '{"source":"flowchart TD\n  start([Order received]) --> pay{Paid?}\n  pay -->|Yes| pick[Pick items]\n  pay -->|No| remind[/Send reminder/]\n  remind --> pay\n  pick --> stock{In stock?}\n  stock -->|Yes| ship[[Ship parcel]]\n  stock -->|No| back[(Backorder list)]\n  back -.-> pick\n  ship --> done((Done))","title":"Order handling"}'

Related tools

  • Embeddable Chart Builder – Make a self-contained chart to embed anywhere: inline SVG, standalone HTML, accessible snippet.
Feedback