Draw a top-down flowchart
TD and TB both lay out the flowchart from top to bottom.
Open this example in playgroundCheatsheet: MermaidJS
Find diagram syntax, copy a complete example, and open it in the playground to make it your own.
Start here
Choose a direction and connect your first two nodes.
Draw a left-to-right flowchart
LR lays out the flowchart from left to right.
Use RL for right-to-left or BT for bottom-to-top. Both graph and flowchart are valid declarations.
Open this example in playgroundNode shapes
Keep a stable node ID and change the surrounding label syntax.
Use a rounded rectangle
Parentheses give a node rounded corners. Square brackets create a plain rectangle.
Open this example in playgroundUse a circle
Double parentheses draw a circle around the label.
Open this example in playgroundShow a database
Square brackets with inner parentheses create a cylinder.
Open this example in playgroundShow a decision
Braces create a diamond. Label the outgoing arrows to explain each branch.
Open this example in playgroundMark an endpoint
Triple parentheses create a double circle.
Open this example in playgroundEdges and labels
Show direction, plain connections, and labelled relationships.
Connect with an arrow
--> draws a directed edge with an arrowhead.
Open this example in playgroundConnect without an arrow
--- draws a line without an arrowhead.
Open this example in playgroundLabel different edge styles
Use pipes for edge labels, -.-> for a dotted arrow, and ==> for a thick arrow.
Open this example in playgroundGroups and styles
Group related nodes and reuse visual styles.
Group nodes into subgraphs
A subgraph has its own ID and an optional readable label; end closes the group.
You can set direction inside a subgraph, but links to outside nodes can make it inherit the parent direction.
Open this example in playgroundStyle one node
style targets a node ID and accepts comma-separated CSS properties.
Set text color alongside fill so labels stay readable in both light and dark themes.
Open this example in playgroundReuse a style class
Define a class with classDef, then assign it to one or more node IDs.
Open this example in playgroundAssign a class inline
The ::: suffix assigns a declared class directly to a node.
Open this example in playgroundSequence messages
Declare participants, send requests, and show replies or active work.
Name participants
Aliases separate a short ID from its displayed label. actor draws a person instead of a participant box.
Open this example in playgroundChoose message line types
-> and --> have no arrowhead; ->> and -->> have an arrowhead.
Reverse direction by swapping the sender and receiver. Do not use flowchart forms such as <-- or <--> here.
Open this example in playgroundActivate and deactivate explicitly
Activation bars show when a participant is doing work. Balance each activate with a deactivate.
Open this example in playgroundUse activation shorthand
+ activates the receiver; - deactivates the sender.
Open this example in playgroundAdd notes around participants
Use Note left of, Note right of, or Note over one or two participants.
Note above is not sequence-diagram syntax.
Open this example in playgroundSequence control flow
Show alternatives, repeated requests, and parallel work.
Show alternative paths
alt and else describe branches; end closes the block. Use opt for a single optional branch.
Open this example in playgroundRepeat and number messages
loop labels a repeated sequence. autonumber numbers messages automatically.
Open this example in playgroundShow parallel work
par starts parallel branches, and introduces another branch, and end closes the block.
Open this example in playgroundClass diagrams
Describe fields, methods, and relationships between types.
Define fields and methods
Members without parentheses are attributes; members with parentheses are methods.
+ is public, - private, # protected, and ~ package/internal visibility.
Open this example in playgroundShow class relationships
The triangle points to the parent type. Diamonds sit at the owning end of a relationship.
Open this example in playgroundER and state diagrams
Model database relationships or transitions through a lifecycle.
Model database relationships
|| means exactly one; o{ means zero or more. Here each order has one user and a user can have many orders.
Use PK, FK, and UK to label primary, foreign, and unique keys. Mermaid describes the schema; it does not enforce constraints.
Open this example in playgroundDraw a state machine
[*] marks the initial or final state. Add transition labels after a colon.
Open this example in playgroundCharts and timelines
Show proportions, project dates, or a Git branch history.
Show proportions in a pie chart
Provide a quoted label and numeric value for each slice.
These are illustrative values, not measured statistics. Values need not sum to 100.
Open this example in playgroundPlan tasks with a Gantt chart
Give tasks IDs to express dependencies with after. done and active label task status.
Dates are fixed example data; active is an explicit status, not a claim about today's progress.
Open this example in playgroundShow a branch and merge
branch creates and checks out a branch. checkout switches branches; merge creates a merge commit.
This draws an illustrative history; it does not execute Git commands.
Open this example in playgroundThemes and links
Configure a complete diagram or link a node to documentation.
Set a theme with frontmatter
YAML frontmatter goes before the diagram declaration. Built-in themes include default, dark, forest, neutral, and base.
Older examples may use %%{init: ...}%% directives. For custom themeVariables, use theme: base; host support and configuration can vary.
Open this example in playgroundLink a node to a web page
click attaches a URL to a node ID.
Links depend on the host's security policy. This playground allows links; an inline securityLevel directive cannot override a host's secured setting.
Open this example in playgroundSyntax pitfalls
Avoid parser surprises with labels, reserved words, and comments.
Separate IDs from readable labels
Use simple IDs for connections and quoted labels for punctuation or readable text.
Open this example in playgroundUse comments and safe endpoint labels
%% begins a comment. Quote a literal lowercase end label so it is not confused with a block terminator.
Open this example in playground