# Diagram & Flowchart Maker

> Write flowcharts, sequence diagrams and mind maps as text and get a laid-out SVG/PNG diagram. 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.

Part of usefulweb.site (https://usefulweb.site/). Results are deterministic calculations from the inputs and the listed assumptions; the API returns exactly what the web page shows.

## Use it
- Human interface: https://diagramflowchartmaker.usefulweb.site/ (interactive tool at https://diagramflowchartmaker.usefulweb.site/tool)
- JSON API: POST https://diagramflowchartmaker.usefulweb.site/api/v1/calculate with a JSON object of inputs (schema: https://diagramflowchartmaker.usefulweb.site/api/v1/tool)
- OpenAPI: https://diagramflowchartmaker.usefulweb.site/openapi.json
- MCP (Streamable HTTP): https://diagramflowchartmaker.usefulweb.site/mcp - tool `diagram_flowchart_maker`

## Inputs
- source (textarea, required): Diagram text - First line: "flowchart TD" (or LR, BT, RL), "sequenceDiagram" or "mindmap". See the examples.
- title (text): Title - Shown above the diagram and used as its accessible name.
- png (boolean): Also create a PNG image

## Method
- 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.

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