Professional ATM Flowchart Builder

Show one section at a time on smaller screens

Shapes Palette

Start

Process

Decision

End

Overlay Symbols & Ranks

Diagram Templates

Color & Theme

Select node/link ➜ click a color to restyle it.

Diagram theme

Arrow Style

Select one or more links, then change arrowhead style here.

Text-Driven Builder

Append to existing diagram

JSON Flow Import / Export

Pro Tips

Double-click any shape or label to edit text.
Drag from one node to another to create arrows.
Hold Shift, click source then target to auto-link.
Press Delete or Backspace to remove selection.
Use JSON import for complex branched diagrams (best for LLM output).

LLM JSON Instructions

Return ONLY valid JSON (no markdown fences).

Schema:
{
  "schema": "pmh-flowchart/v1",
  "meta": { "title": "Diagram title", "theme": "light|midnight|ocean|sunset" },
  "nodes": [
    {
      "id": 1,
      "type": "start|process|decision|end",
      "text": "Node label",
      "x": 0, "y": 0,
      "width": 160, "height": 60,
      "color": "#hex",
      "borderColor": "#hex"
    }
  ],
  "links": [
    {
      "from": 1, "to": 2,
      "label": "Yes/No/etc",
      "arrow": "Standard|Triangle|OpenTriangle|Diamond|OpenCircle|None",
      "color": "#hex",
      "vertices": [{"x":120,"y":240}]
    }
  ],
  "overlays": [
    {
      "id": 1,
      "kind": "square|circle|triangle|diamond|hexagon|star|four-star|colonel",
      "x": 0, "y": 0,
      "width": 28, "height": 28,
      "color": "#hex",
      "borderColor": "#hex",
      "anchorTo": 2
    }
  ]
}

Rules:
- IDs must be unique integers
- Links must reference existing IDs
- Overlays are optional standalone markers
- Use 'decision' for diamonds
- Use start/end for terminators
- Use x/y for layout (top-to-bottom recommended)
- Use colors by subsystem consistently

drag to pan · wheel to zoom