View source for Mermaid Flowcharts (with UML Meanings)

<span id="mermaid-flowcharts-with-uml-meanings"></span>
= Mermaid Flowcharts (with UML Meanings) =

'''Beginner‑friendly guide with short explanations and many examples.'''


-----

<span id="what-is-mermaid-flowchart"></span>
== 1) What is Mermaid Flowchart? ==

A '''flowchart''' is a diagram made of '''nodes''' (shapes with text) connected by '''edges''' (lines/arrows). Mermaid lets you write text that renders into a diagram. '''Mermaid Flowchart ≠ UML''': Mermaid is a diagram tool; UML is a modeling standard. In this guide we show the '''closest UML ideas''' for each Mermaid feature. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])


-----

<span id="quick-start-minimal-example"></span>
== 2) Quick start (minimal example) ==

<pre class="mermaid">flowchart TD
  Start([Start]) --&gt; Check{In stock?}
  Check --&gt;|Yes| Ship[Ship order]
  Check --&gt;|No| Backorder[Backorder]</pre>
'''What it shows:''' A top‑down flow with one decision and two outcomes.


-----

<span id="directions-and-graph-keyword"></span>
== 3) Directions and <code>graph</code> keyword ==

Use <code>flowchart</code> (or its alias <code>graph</code>) plus a direction:

* <code>TB</code> / <code>TD</code> = top‑down
* <code>BT</code> = bottom‑up
* <code>LR</code> = left‑to‑right
* <code>RL</code> = right‑to‑left

Direction changes '''layout only''' (no UML meaning). ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

'''TD example'''

<pre class="mermaid">flowchart TD
  A[Start] --&gt; B[Step] --&gt; C[End]</pre>
'''What it shows:''' A vertical (top‑down) layout.

'''LR example'''

<pre class="mermaid">flowchart LR
  A[Start] --&gt; B[Step] --&gt; C[End]</pre>
'''What it shows:''' A horizontal (left‑to‑right) layout.


-----

<span id="nodes-ids-labels-text"></span>
== 4) Nodes: ids, labels, text ==

* '''Id vs label''': <code>A[Text]</code> creates node id <code>A</code> with label <code>Text</code>. You can set label once and reuse id later.
* '''Unicode/markdown''' in labels: put the label in '''double quotes''', and markdown (bold/italic) works in labels.
* '''Escape special characters''' either by quoting (<code>&quot;...&quot;</code>) or using '''HTML entities''' like <code>&amp;quot;</code>, <code>&amp;lt;</code>, <code>&amp;#35;</code>. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart LR
  A[&quot;Hello **world** and *friends*&quot;] --&gt; B[&quot;Unicode: “Привет”&quot;]
  C[&quot;Quote: &amp;quot;Hi&amp;quot;, less-than: &amp;lt;, hash: &amp;#35;&quot;]</pre>
'''What it shows:''' Ids, markdown in labels, and escaped characters.

'''Gotchas'''

* Using the lowercase word '''<code>end</code>''' as a node label breaks parsing. Use '''<code>End</code>''' or '''<code>END</code>''' instead. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* If a node id '''starts with <code>o</code> or <code>x</code>''' right after a link operator (e.g., <code>A---oB</code>), Mermaid may think you want a '''circle or cross edge'''. Add a space (<code>A--- oB</code>) or capitalize (<code>A---OB</code>). ([https://mermaid.js.org/syntax/flowchart.html Mermaid])


-----

<span id="shapes-classic-bracket-syntax"></span>
== 5) Shapes (classic bracket syntax) ==

{| class="wikitable"
|-
! Mermaid Syntax
! Visual Shape (name)
! Typical Flowchart Role
! Closest UML Meaning
! Example
|-
| <code>A[Text]</code>
| Rectangle
| Process/step
| '''Action''' (UML Activity uses rounded rectangles; this is a near match)
| <code>A[Process step]</code>
|-
| <code>A(Text)</code>
| Rounded rectangle
| Process/step
| '''Action''' (best visual match)
| <code>A(Start job)</code>
|-
| <code>A([Text])</code>
| Stadium / terminator
| Start/End in flowcharts
| '''No''' direct UML; UML start/end use circles
| <code>A([Begin])</code>
|-
| <code><nowiki>A[[Text]]</nowiki></code>
| Subroutine / double-rect
| Subprocess
| '''Call Behavior Action''' (sub‑activity)
| <code><nowiki>A[[Recalculate total]]</nowiki></code>
|-
| <code>A[(Text)]</code>
| Cylinder (database)
| Data store
| '''DataStoreNode / Object Node'''
| <code>A[(Orders DB)]</code>
|-
| <code>A((Text))</code>
| Circle
| Connector/terminator in flowcharts
| '''Initial node''' (if filled) or '''junction'''; style may be needed
| <code>A((Start))</code>
|-
| <code>A(((Text)))</code>
| Double circle
| End/terminator
| '''Activity final node'''
| <code>A(((End)))</code>
|-
| <code>A{Text}</code>
| Diamond (rhombus)
| Decision
| '''Decision / Merge node'''
| <code>A{In stock?}</code>
|-
| <code><nowiki>A{{Text}}</nowiki></code>
| Hexagon
| Preparation / condition
| No standard UML; use an '''Action''' with note/stereotype
| <code><nowiki>A{{Prepare}}</nowiki></code>
|-
| <code>A&gt;Text]</code>
| Asymmetric
| Off‑page link / special step
| No standard UML
| <code>A&gt;Go to page 2]</code>
|-
| <code>A[/Text/]</code>
| Parallelogram
| Input/Output
| Often modeled as '''Object node''' or specific '''Action''' (e.g., accept input)
| <code>A[/User input/]</code>
|-
| <code>A[\Text\]</code>
| Parallelogram alt
| Input/Output
| Same as above
| <code>A[\Show result\]</code>
|-
| <code>A[/Text\]</code>
| Trapezoid
| Manual operation (base bottom/top varies)
| No standard UML; use '''Action''' with «manual» stereotype
| <code>A[/Manual step\]</code>
|-
| <code>A[\Text/]</code>
| Trapezoid alt
| Manual operation (alt)
| Same as above
| <code>A[\Manual step/]</code>
|}

<blockquote>Note: the '''asymmetric''' shape currently has only one orientation (no mirrored form). ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
</blockquote>
<pre class="mermaid">flowchart LR
  R[Rect] --&gt; RR(Rounded)
  ST([Terminator]) --&gt; D{Decision}
  DB[(DB)] --&gt; C((Circle)) --&gt; CC(((End)))
  HEX{{Prepare}} --&gt; S&gt;Asymmetric]
  IN[/Input/] --&gt; OUT[\Output\]
  M[/Manual\] --&gt; M2[\Manual/]
  SUB[[Subroutine]] --&gt; R</pre>
'''What it shows:''' A sampler of classic shapes connected in one flow. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

'''Reminder:''' These are '''flowchart''' symbols. UML Activity Diagrams mainly use '''Actions (rounded rectangles)''', '''Decisions (diamonds)''', '''Initial (filled circle)''', '''Final (bullseye)''', and '''Fork/Join bars'''. When a flowchart shape has no exact UML meaning, use an '''Action''' plus a '''note/stereotype''', or an '''Object Node'''.


-----

<span id="expanded-shapes-v11.3"></span>

== 6) Expanded shapes (v11.3+) ==

Mermaid v11.3+ adds a general way to assign shapes:

* '''Generic assignment:''' <code>A@{ shape: rect }</code>
* Many new shapes are available, e.g.:
** <code>circle</code> (Start) → UML '''Initial node'''
** <code>dbl-circ</code> (Stop) → UML '''Activity final'''
** <code>hex</code> (Prepare) → No standard UML; use '''Action''' + stereotype
** <code>fork</code> (Fork/Join bar) → UML '''Fork/Join'''
** <code>cyl</code> (Database) → UML '''DataStoreNode/Object Node'''
** <code>doc</code> (Document) → Usually '''Object Node''' or '''Action'''
** <code>text</code> (Text block) → No UML semantics (note-like) (Full list in docs; feature tag '''v11.3.0+'''.) ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart LR
  S@{ shape: circle, label: &quot;Start&quot; } --&gt; P@{ shape: rect, label: &quot;Process&quot; }
  P --&gt; F@{ shape: fork, label: &quot;Fork/Join&quot; } --&gt; E@{ shape: dbl-circ, label: &quot;Stop&quot; }</pre>
'''What it shows:''' New shape syntax mixed with classic flow.


-----

<span id="edges-links-and-labels"></span>
== 7) Edges (links) and labels ==

{| class="wikitable"
|-
! Edge Syntax
! Meaning
! Closest UML Meaning
! Example
!
!
!
!
|-
| <code>A --&gt; B</code>
| Directed edge with arrow
| '''Control flow'''
| <code>A --&gt; B</code>
|
|
|
|
|-
| <code>A --- B</code>
| Open line (no arrow)
| No standard in UML Activity
| <code>A --- B</code>
|
|
|
|
|-
| <code>A -.-&gt; B</code>
| Dotted arrow
| Not standard in UML Activity (dashed lines mean '''dependency''' elsewhere)
| <code>A -.-&gt; B</code>
|
|
|
|
|-
| <code>A ==&gt; B</code>
| Thick arrow
| Style only, no UML semantics
| <code>A ==&gt; B</code>
|
|
|
|
|-
| <code>A -- text --&gt; B</code> or <code>A --&gt;             | text                            | B</code>
| Labeled edge
| UML guards like <code>[x &gt; 0]</code>
| <code>Check --&gt; | Yes | Ship</code>
|
|
|
|
|-
| <code>A o--o B</code>, <code>B &lt;--&gt; C</code>, <code>C x--x D</code>
| Circle/cross heads, both‑ways
| No standard UML meaning
| <code>A o--o B</code>
|
|
|
|
|-
| <code>A [[User:Ryan|Ryan]] ([[User talk:Ryan|talk]]) B</code>
| Invisible link (layout only)
| No UML meaning
| <code>A [[User:Ryan|Ryan]] ([[User talk:Ryan|talk]]) B</code>
|
|
|
|
|-
| <code>a --&gt; b &amp; c --&gt; d</code>
| Chaining / parallel link syntax
| Convenience only
| <code>a --&gt; b &amp; c --&gt; d</code>
|
|
|
|
|-
| Extra dashes (<code>----&gt;</code>, <code>===&gt;</code>, <code>-..-&gt;</code>)
| Longer rank spacing
| Layout only
| <code>B ----&gt; E</code>
|
|
|
|
|}

Mermaid supports all of the above, plus link '''lengthening''' using extra dashes/equal/dot characters and '''multi‑directional arrows'''. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart LR
  Start([Start]) --&gt; Q{Approved?}
  Q --&gt;|Yes| Go[Proceed]
  Q ----&gt;|No| Fix[Fix and retry]</pre>
'''What it shows:''' Yes/No labels and “extra dashes” to push the <code>No</code> edge further. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])


-----

<span id="subgraphs-groups"></span>
== 8) Subgraphs (groups) ==

You can group nodes with <code>subgraph ... end</code>. You can connect edges '''to and from''' subgraphs. You can also set a '''direction''' inside a subgraph. '''Limitation:''' if any node in a subgraph links outside, the subgraph’s direction is '''ignored''' and it inherits the parent direction. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart LR
  subgraph Fulfillment
    direction TB
    Pick[Pick items] --&gt; Pack[Pack box]
  end

  Order([Order]) --&gt; Fulfillment
  Pack --&gt; Ship[Ship]

  %% Because Pack links to Ship (outside), the TB direction inside
  %% may be ignored and Fulfillment will inherit LR from the parent.</pre>
'''What it shows:''' A subgraph with internal direction and edges to/from outside; demonstrates the direction limitation.


-----

<span id="styling-and-classes"></span>
== 9) Styling and classes ==

* '''Single node:''' <code>style nodeId fill:#fee,stroke:#c33,stroke-width:2px,color:#900</code>
* '''Classes:''' <code>classDef warn fill:#fff3cd,stroke:#856404;</code> then <code>class X warn;</code> (or attach with <code>:::</code>).
* '''Links:''' <code>linkStyle N ...</code> (use link number(s) or <code>default</code>) to style links.
* '''Curves:''' set curve types like <code>cardinal</code>, <code>stepBefore</code>, etc., for all edges via config; per‑edge curve is possible '''when the edge has an ID (v11.10+)'''. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">%% Diagram-level curve style via directive
---
config:
  flowchart:
    curve: stepBefore
---
flowchart LR
  A[Start] --&gt; B[Warned edge] --&gt; C[End]
  style C fill:#e6ffed,stroke:#1f883d
  classDef warn fill:#fff3cd,stroke:#856404
  class B warn
  linkStyle 1 stroke:#555,stroke-width:3px</pre>
'''What it shows:''' A custom node color, a class, a styled link, and a diagram‑level curve. (Edge‑level curves require '''Edge IDs''', v11.10+.) ([https://mermaid.js.org/syntax/flowchart.html Mermaid])


-----

<span id="interaction-click"></span>
== 10) Interaction (click) ==

You can make nodes clickable—either call a JS '''callback''' or go to a '''URL'''. This works when Mermaid’s <code>securityLevel</code> is '''<code>loose</code>''' (not <code>strict</code>). ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart LR
  Home[Home] --&gt; Repo[Repo]
  click Home &quot;https://example.com&quot; &quot;Go home&quot;
  click Repo href &quot;https://github.com&quot; &quot;_blank&quot;
  %% For callbacks (requires securityLevel: 'loose'):
  %% click Home callback &quot;Tooltip text&quot;</pre>
'''What it shows:''' Clickable nodes (URL and callback).


-----

<span id="icons-images-v11.3v11.7"></span>
== 11) Icons &amp; images (v11.3+/v11.7+) ==

* '''Special shapes (v11.3+):''' <code>icon</code> and <code>image</code> are built‑in '''node shapes'''.
* '''Font Awesome support:''' You can use FA icons; '''registering icon packs is v11.7+''', or include FA CSS. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart TD
  I@{ shape: icon, icon: &quot;fa:fa-user&quot;, form: &quot;circle&quot;, label: &quot;User&quot;, pos: &quot;b&quot;, h: 48 }
  L@{ shape: image, img: &quot;https://example.com/logo.png&quot;, label: &quot;Logo&quot;, pos: &quot;t&quot;, h: 48, constraint: &quot;on&quot; }
  I --&gt; L</pre>
'''What it shows:''' An icon node and an image node connected. (Icons need FA CSS or a registered pack; see docs.) ([https://mermaid.js.org/syntax/flowchart.html Mermaid])


-----

<span id="common-pitfalls-quick-list"></span>
== 12) Common pitfalls (quick list) ==

* Lowercase '''<code>end</code>''' as a node breaks flowcharts; write '''<code>End</code>''' or '''<code>END</code>'''. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* Leading '''<code>o</code> / <code>x</code>''' after a link operator can be parsed as circle/cross '''edge heads'''—add a space or capitalize. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* Special characters: quote or escape with entities (e.g., <code>&amp;quot;</code>, <code>&amp;lt;</code>, <code>&amp;#35;</code>). ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* Subgraph direction limitation: links to outside make the subgraph inherit the parent’s direction. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<pre class="mermaid">flowchart LR
  %% Bad (would become a circle head):  Dev --- oPs
  %% Good (space or capital):
  Dev --- Ops</pre>
'''What it shows:''' The spacing/capitalization workaround for <code>o</code>/<code>x</code>.


-----

<span id="uml-mapping-cheat-sheet-compact"></span>
== 13) UML mapping cheat sheet (compact) ==

{| class="wikitable"
|-
! Mermaid (Flowchart)
! UML Activity meaning
|-
| Rounded rectangle
| '''Action'''
|-
| Diamond
| '''Decision / Merge'''
|-
| Filled circle
| '''Initial node'''
|-
| Double circle (bullseye)
| '''Activity final node'''
|-
| Thick bar (<code>fork</code> shape)
| '''Fork/Join''' (bar)
|-
| Cylinder
| '''DataStoreNode''' / '''Object Node'''
|-
| Parallelogram (I/O)
| Usually '''Action''' with «input»/«output», or '''Object Node'''
|-
| Stadium / Asymmetric / Trapezoid
| '''No standard UML'''; use '''Action''' + note/stereotype
|}

<pre class="mermaid">flowchart LR
  I@{ shape: circle, label: &quot;Initial&quot; } --&gt; A(Rounded Action)
  A --&gt; D{Decision} --&gt; F@{ shape: dbl-circ, label: &quot;Final&quot; }
  A --&gt; B@{ shape: fork, label: &quot;Fork/Join&quot; }</pre>
'''What it shows:''' Typical UML‑like elements using Mermaid shapes.


-----

<span id="two-worked-examples"></span>
== 14) Two worked examples ==

<span id="order-flow"></span>
=== 1) Order flow ===

<pre class="mermaid">flowchart LR
  subgraph Fulfillment
    direction TB
    Check{In stock?}
    Ship[Ship order]
    Wait[Wait for stock]
  end

  Start([Start]) --&gt; Check
  Check --&gt;|Yes| Ship --&gt; Done(((Done)))
  Check --&gt;|No| Wait --&gt; Check</pre>
'''What it shows:''' A decision with '''Yes/No''' labels, a '''loop back''', and a '''subgraph''' grouping fulfillment tasks. (Subgraph may inherit parent direction if nodes link outside.) ([https://mermaid.js.org/syntax/flowchart.html Mermaid])

<span id="login-flow"></span>
=== 2) Login flow ===

<pre class="mermaid">flowchart TD
  Ask[/Enter username &amp; password/] --&gt; Verify[(Users DB)]
  Verify --&gt; Valid{Valid?}
  Valid --&gt;|Yes| Go[Open dashboard]
  Valid --&gt;|No| Show[\Show error/]
  Go --&gt; End(((End)))</pre>
'''What it shows:''' I/O nodes, a database (cylinder), a decision, and an end node.


-----

<span id="final-checklist"></span>
== 15) Final checklist ==

* ☒ Syntax validated: no lowercase '''<code>end</code>''' nodes; no accidental <code>o</code>/<code>x</code> edge heads. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* ☒ Every section has at least one code example and a '''What it shows''' line.
* ☒ UML meanings are clearly stated or marked '''“no standard UML equivalent.”'''
* ☒ Direction is layout only; <code>flowchart</code> and <code>graph</code> are aliases. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* ☒ Edge features shown: labels, multi‑directional arrows, dotted/thick, invisible, chain <code>&amp;</code>, and '''extra dashes''' for spacing. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* ☒ Styling: node <code>style</code>, <code>classDef</code>/<code>class</code>, <code>linkStyle</code>, and curve styles; note '''edge‑level curves with Edge IDs (v11.10+)'''. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])
* ☒ Advanced shapes: '''expanded shapes (v11.3+)''' and '''Font Awesome icon packs (v11.7+)''' included. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])


-----

'''Source of truth:''' Mermaid Flowchart documentation (v11.12.0 page at time of writing). See sections on directions, shapes (classic and expanded), edges, subgraphs (including the direction limitation), styling/classes (including curves and edge IDs), click interaction, and icons/images. ([https://mermaid.js.org/syntax/flowchart.html Mermaid])