How to Label Mermaid Flowchart Edges and Yes/No Branches

All Mermaid tools and guides

Put text between pipes on a flowchart connector: check -->|Yes| work labels a solid arrow, while ask -.->|Updated request| check labels a dotted arrow. The text tells readers what happened; the line style is a visual choice, not a condition evaluated by Mermaid.

Label both sides of a decision

This request flow makes the Yes and No branches explicit and uses a dotted return arrow for the follow-up:

flowchart TD
  intake["New request"] --> check{"Details complete?"}
  check -->|Yes| work["Process request"]
  check -->|No| ask["Request missing details"]
  ask -.->|Updated request| check
  work --> done["Close request"]

Run this decision flow in the Mermaid playground

Flowchart with Yes and No labels from the details decision, and a dotted Updated request arrow returning to the check

The diamond has a stable ID (check) and a separate display label (Details complete?). Both branches leave that same decision; the dotted edge returns to it only after someone provides more information. Using short branch words makes them easy to read even if the layout changes.

Compare solid and dotted labeled arrows

You can give each path its own text and line style without changing the node declarations:

flowchart LR
  gate["Deployment gate"] -->|Pass: release| deploy["Deploy"]
  gate -.->|Fail: notify| oncall["On-call"]
  oncall -->|After fix| gate

Run the deployment-gate example in the Mermaid playground

Deployment gate flowchart with a solid Pass release arrow, a dotted Fail notify arrow, and a solid After fix return

Here -->|Pass: release| is a solid directed edge and -.->|Fail: notify| is a dotted directed edge. The labels express the outcomes; Mermaid does not execute a gate or check whether a build passed. The return arrow is solid to keep the notification path visually distinct.

These examples render in this site's Mermaid 10.9 playground. When a connector is hard to follow, keep edge labels short and leave space for the diagram to lay itself out; changing TD to LR can help. For multiline node labels rather than edge text, use the line-breaks guide.

Related guides

Reference: Mermaid flowchart syntax.