Mermaid Syntax Reference

ZenUML is an alternative syntax for defining sequence diagrams in Mermaid. It is often more intuitive than standard sequence diagram syntax but requires additional configuration to work. Note that due to these configuration requirements, ZenUML may not render in environments like GitHub.

zenuml
    Participant1->Participant2: Text!

You can group states into subdiagrams using the state Name { ... } syntax. This allows for:

• Multiple state diagrams: Defining high-level transitions between complex sub-states.
• Nested state diagrams: Defining states within states, where each level can have its own direction setting.

stateDiagram-v2
    First --> Second

    state First {
        a --> b
    }
    state Second {
        c --> d
    }

Subgraphs allow you to group related nodes into a visual container.

Defining Subgraphs

Use the subgraph keyword followed by an identifier and the end keyword.

Subgraph Orientation

You can set a specific direction for nodes inside a subgraph using the direction keyword (e.g., direction LR).

Linking

You can create connections between:

• Nodes and nodes
• Nodes and subgraphs
• Subgraphs and subgraphs

flowchart LR
    subgraph a
    a1
    a2
    end

    subgraph b
    b1
    b2
    end

    a -- "Graph to graph" --> b
    b1 -- "Node to graph" --> b

In block-beta diagrams, you can control the layout using the columns keyword to set the total column count for the diagram. You can also specify how many columns an individual block spans using the name:width syntax.

To create nested structures, use the block:name:width syntax followed by an end keyword. Inside a nested block, you can define a new columns count that applies only to that sub-group.

block-beta
    columns 5
    a:3 b:2 c d e f g h
    block:myBlock:2
        columns 2
        i j k
    end

Participants in a ZenUML diagram can be defined in two ways:

1. Implicitly: Simply use the name in a message. The participant is automatically created.
2. With Annotators: Use an @ symbol followed by an annotator name to assign specific icons (e.g., @Actor, @VirtualMachine, @S3, @GoogleSecurity). This allows for visual representation of specific entities like cloud services or hardware.

Note: There are 55 available annotators, including defaults and specific icons for Amazon, Azure, and Google cloud offerings.

zenuml
    @Actor "An actor"
    @VirtualMachine "A virtual machine"
    @GoogleSecurity "Google Security"
    @S3 "S3 bucket"
    "An actor"->"A virtual machine": Uses
    "A virtual machine"->"Google Security": Logs in
    "Google Security"->"S3 bucket": Stores data

To create a radar diagram, use the radar-beta keyword. Define the axes using the axis keyword followed by a comma-separated list of labels. Define data series using the curve keyword, followed by an identifier and a set of values enclosed in curly braces {}.

radar-beta
    axis A, B, C, D, E
    curve c1{1,2,3,4,5}

Packet diagrams (using the packet-beta syntax) are used to visualize byte structures. The syntax requires that all bytes within a row are accounted for. Each row in a packet diagram must contain exactly 32 bytes (e.g., 0-31, 32-63).

If there are gaps (missing byte numbers) or overlaps (duplicate byte numbers) in your definitions, Mermaid will display an error. You define segments using the format start-end: "label".

packet-beta
    title Packet diagram title
    0-5: "First bytes"
    6-15: "More bytes"
    16-31: "Many more!"
    32-63: "A defined row"
    64-93: "Almost full row"
    94: "A"
    95: "B"

To mark specific points in time:

• Milestones: Use the milestone keyword in the task definition. Milestones can be dated or relative to other tasks.
• Today Marker: Use todayMarker to show a vertical line representing the current date. You can style it with CSS properties or turn it off using todayMarker off.

gantt
    todayMarker stroke-width:5px,stroke:#0f0,opacity:0.5
    %% or `todayMarker off`
    Dated Milestone: milestone, m1, 2023-01-01, 3d
    Relative Milestone: milestone, m2, after m1, 5d
    Task 1: a1, 2023-01-01, 3d
    Task 2: a2, after a1, 5d

Mindmap structures are defined using a syntax identical to Markdown lists. The hierarchy and branching logic are determined entirely by indentation levels. The diagram must start with the mindmap keyword.

mindmap
    Middle element
        Branch 1
        Branch 2
        Branch 3
        Branch 4
            Sub-branch 1
            Sub-branch 2
            Sub-branch 3
                Sub-sub-branch 1

To create a pie chart, start the code block with the pie keyword. You can optionally include a title to label the chart. Data is defined by providing a label (as a string) followed by a colon and a numeric value representing the slice size.

Example syntax:

pie
    title Chart Title
    "Label 1" : value1
    "Label 2" : value2

pie
    title Fruits
    "Apples" : 50
    "Oranges" : 20
    "Grapes" : 9.99
    "Passionfruits" : 12.5