AI AGENT GUIDE — flow.hoc.run This page is a canvas-based flowchart editor. When a user asks you to make a flow.hoc.run flowchart, produce a mermaid text block they can paste into the editor's right-hand text panel, then press Apply or Ctrl+Enter to render it. ── Syntax ────────────────────────────────────────────────────────────────── graph TD required first line TD = top-down LR = left-right BT = bottom-top RL = right-left ID[Label text] node definition — ID is any word (\w+), label is free text (no ] or | characters) A --> B directed edge from A to B A -->|edge label| B edge with a short label centered on the line %% pos ID x,y sets the node's canvas position in pixels include these for every node so the layout renders immediately without manual arrangement ── Layout conventions ────────────────────────────────────────────────────── - Horizontal spacing: ~100 px between parallel nodes - Vertical spacing: ~100 px between sequential steps - Start near x=200, y=100 so the diagram is centered on first load - For left-right graphs swap the role of x and y spacing accordingly - Keep IDs short: single letters A–Z for small graphs, then AA AB AC … ── Full example ──────────────────────────────────────────────────────────── graph TD A[Start] B[Do the thing] C[Decision] D[Path A] E[Path B] F[End] A --> B B --> C C -->|yes| D C -->|no| E D --> F E --> F %% pos A 200,100 %% pos B 200,200 %% pos C 200,300 %% pos D 100,400 %% pos E 300,400 %% pos F 200,500 ── Notes ──────────────────────────────────────────────────────────────────── - Paste the block into the mermaid panel and press Apply or Ctrl+Enter - Right-click any arrow to add a label or remove it - Left-click drag on empty canvas to rubber-band select multiple nodes, then drag the group together - Right-click a node for connect / remove options - The mermaid panel text is the source of truth; edits there override canvas