FlowBuilder

Login process flowchart

A login flow is the classic first flowchart for software students because it has an input, a decision and a loop. The retry counter is what most people forget: without it the "no" branch loops forever.

How to write steps
  • One step per line. Lines connect top to bottom.
  • End a line with ? to make a decision. Indent the answers under it: yes: Ship it, no: Refund.
  • Indent more lines under an answer to continue that branch.
  • -> Step name jumps back to an earlier step (a loop). no -> Step name works inside a decision.
  • Start, End, Done or Stop become rounded start/end shapes.
  • Shape tags: [input] [output] [doc] [db] [sub] [manual] [delay].
  • lane: Sales on its own line puts the next steps in a swimlane.
  • Or paste Mermaid code starting with flowchart TD. It’s detected automatically.

Mermaid code for this chart
flowchart TD
  n1(["Start"])
  n2[/"Enter email and password"/]
  n3{"Details correct?"}
  n4["Open the dashboard"]
  n5(["End"])
  n6["Add 1 to failed attempts"]
  n7{"Fewer than 5 attempts?"}
  n8["Lock account for 15 minutes"]
  n9[/"Email the account owner"/]
  n1 --> n2
  n2 --> n3
  n3 -->|"yes"| n4
  n4 --> n5
  n3 -->|"no"| n6
  n6 --> n7
  n7 -->|"no"| n8
  n8 --> n9
  n9 --> n5
  n7 -->|"yes"| n2

The steps as text

This is the source of the chart above, so the template is readable even without the diagram.

Start
[input] Enter email and password
Details correct?
  yes: Open the dashboard
    End
  no: Add 1 to failed attempts
    Fewer than 5 attempts?
      yes: -> Enter email and password
      no: Lock account for 15 minutes
        [output] Email the account owner
        End

More flowchart examples

Bug triageReproduce, prioritise and fix a reported bug.Algorithm: largest of three numbersThe textbook algorithm flowchart: read A, B, C and print the largest.Algorithm: sum of 1 to N (loop)A counting loop: add the numbers from 1 to N and print the total.Yes/no: should I answer this email now?A light yes/no flowchart for triaging email in under a minute.

Questions people ask

How do I edit this login process flowchart?

Change the text in the editor. Each line is a step, lines ending in “?” are decisions, and indented lines are the answers. The chart redraws as you type and is saved in your browser.

Can I download it?

Yes: PNG for documents and slides, SVG for sharp printing, or Mermaid code for GitHub, Notion and Obsidian.