Flowcharts: edge styles and arrows

简介 / Introduction

Edges in a flowchart are the lines connecting nodes — they can be undirected, directed with arrows, dashed for optional paths, or bold for emphasis. Both PlantUML and Mermaid support these variants, but their syntax differs. This post uses the same simple login-flow to show equivalent notations in both engines.

PlantUML 版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@startuml
skinparam defaultArrowColor gray
skinparam defaultTextAlignment center

:Open homepage;
if (Logged in?) then (Yes)
  :Show dashboard;
else (No)
  :Show login page;
  :Login → show dashboard;
endif

:Go to user management;
:List all users;

note right: Admin only

stop
@enduml

Key syntax points:

• if (...) then (Yes) — branch with a label after then
• else (No) — the false branch label
• endif — closes the conditional block
• note right: — attaches a note to the right of an edge or node

PlantUML arrows are directed by default; the :Text; syntax creates rounded terminal nodes (start/end).

Mermaid 版

1
2
3
4
5
6
7
8
9
10
11

flowchart TD
    A([Open homepage]) --> B{Logged in?}
    B -- Yes --> C[Show dashboard]
    B -- No --> D[Show login page]
    D --> E[Login → show dashboard]
    E --> C
    C --> F[Go to user management]
    F --> G[/List all users/]
    G -.-> |Admin only| H((Admin only))

    style H fill:#f9f,stroke:#333,stroke-width:2px

Key syntax points:

• flowchart TD — Top-Down flow; change to LR for left-to-right
• -- Yes --> — solid directed edge with a label inline
• -.-> — dashed directed edge
• {Yes/No} — diamond shape for decision nodes
• [Text] — rounded rectangle; (/Text/) — parallelogram; ((Circle)) — circle for terminal

对比 / Side-by-side

小结 / Wrap-up

PlantUML’s flowchart syntax leans on natural-language constructs (if then else endif), making it a good fit for complex decision logic. Mermaid uses symbolic markers ({}, [ ], (( ))) for a more compact, sketch-like feel. Both let you distinguish semantics through edge style and node shape — pick based on team familiarity and the rest of your toolchain.