← Back to editor

Practical diagram guide

Mermaid flowchart tutorial with an editable example

Build a decision workflow with Mermaid nodes, arrows, and labeled branches. Open a working example in the editor.

Describe the decision first

A flowchart shows which action happens next. Start with one process and one decision rather than drawing every exception at once. This example routes an approved request into scheduled work and sends a rejected request back for revision.

Read the syntax

flowchart TD lays the diagram out from top to bottom. Each short identifier, such as A, names a node. Square brackets define a rectangular action; braces define a diamond-shaped decision. The text between vertical bars labels a branch.

Keep identifiers stable when you rename visible labels. Connecting to A again reuses the existing node. For left-to-right layout, change the header to flowchart LR.

Adapt the example

  1. Open the example and choose Use example.
  2. Rename “Submit request” for your process, such as “Receive support ticket”.
  3. Change the decision question and the branch labels.
  4. Use the Layout controls to adjust node spacing, then export the result.

On a phone, use Code to edit and Preview to inspect the diagram. The Examples library can also start an org chart, which uses flowchart syntax for reporting relationships.

Avoid common flowchart errors

Put labels with punctuation inside double quotes, for example A["Review (optional)"]. Use a capitalized label like “End” rather than the reserved lowercase keyword end. If the preview shows a parse error, check the reported line for an unclosed quote or bracket.

Try it in the editor

Model a request, a decision, and the next action.

flowchart TD
  A[Submit request] --> B{Approved?}
  B -->|Yes| C[Schedule work]
  B -->|No| D[Revise request]
  D --> A
Open this example Download .mmd

Opening the example lets you review it before replacing your current diagram.

Syntax reference: official Mermaid documentation.

Keep exploring