A for loop

A flow diagram. A loop as a flowchart: the counter, the condition, the body and the increment back into the condition.

                                                              ╭──────╮
                              ┌────────────────────────┐   ┌─►│ End  │
  ╭────────╮    ┌────────┐    │                        │───┘  ╰──────╯
  │ Start  │───►│ i = 0  │───►│ ◇ i < array.length? ◇  │ false
  ╰────────╯    └────────┘    │                        │───┐
                              └────────────────────────┘   │  ┌──────────────────┐      ┌──────┐
                                           ▲               └─►│ Process array[i] │─────►│ i++  │
                                           ╎             true └──────────────────┘   ┌╌╌│      │
                                           ╎                                         ╎  └──────┘
                                           ╎                                         ╎
                                           └╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌┘

Spec

JSON

{
  "type": "flow",
  "direction": "RIGHT",
  "nodes": [
    {"id": "start", "label": "Start", "shape": "circle"},
    {"id": "init", "label": "i = 0", "shape": "rect"},
    {"id": "check", "label": "i < array.length?", "shape": "diamond"},
    {"id": "process", "label": "Process array[i]", "shape": "rect"},
    {"id": "increment", "label": "i++", "shape": "rect"},
    {"id": "end", "label": "End", "shape": "circle"}
  ],
  "edges": [
    {"id": "e-start-init", "from": "start", "to": "init"},
    {"id": "e-init-check", "from": "init", "to": "check"},
    {"id": "e-check-process", "from": "check", "to": "process", "label": "true"},
    {"id": "e-process-increment", "from": "process", "to": "increment"},
    {"id": "e-increment-check", "from": "increment", "to": "check", "style": "dashed"},
    {"id": "e-check-end", "from": "check", "to": "end", "label": "false"}
  ]
}

Draw it yourself

diago render for-loop.json > for-loop.svg

Open it in the playground to edit it in your browser.