Mermaid diagrams
You can create diagrams using Mermaid with standard fenced code blocks. Diagrams are rendered client-side in the browser.
flowchart LR
A[Write Mermaid] --> B[Render diagram]
Use a fenced code block with mermaid as the language:
```mermaid
flowchart LR
A --> B
```
All Mermaid diagram types are supported, including:
- Flowcharts
- Sequence diagrams
- State diagrams
- Class diagrams
- Entity relationship (ER) diagrams
- And more
```mermaid
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```
flowchart LR
A[Start] --> B{Decision}
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
```mermaid
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Hello Bob, how are you?
B-->>A: Great!
```
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: Hello Bob, how are you?
B-->>A: Great!
```mermaid
stateDiagram-v2
[*] --> Idle
Idle --> Processing: start
Processing --> Complete: done
Complete --> [*]
```
stateDiagram-v2
[*] --> Idle
Idle --> Processing: start
Processing --> Complete: done
Complete --> [*]
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +isMammal() bool
Duck : +String beakColor
Duck : +quack()
Fish : +int sizeInFeet
Fish : +canEat()
```
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal : +int age
Animal : +isMammal() bool
Duck : +String beakColor
Duck : +quack()
Fish : +int sizeInFeet
Fish : +canEat()
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
```
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
```mermaid
graph TB
A["Painless Operators"]
B["General"]
C["Numeric"]
D["Boolean"]
E["Reference"]
F["Array"]
B1["Control expression flow and<br/>value assignment"]
C1["Mathematical operations and<br/>bit manipulation"]
D1["Boolean logic and<br/>conditional evaluation"]
E1["Object interaction and<br/>safe data access"]
F1["Array manipulation and<br/>element access"]
B2["Precedence ( )<br/>Function Call ( )<br/>Cast ( )<br/>Conditional ? :<br/>Elvis ?:<br/>Assignment =<br/>Compound Assignment $="]
C2["Post/Pre Increment ++<br/>Post/Pre Decrement --<br/>Unary +/-<br/>Bitwise Not ~<br/>Multiplication *<br/>Division /<br/>Remainder %<br/>Addition +<br/>Subtraction -<br/>Shift <<, >>, >>><br/>Bitwise And &<br/>Bitwise Xor ^<br/>Bitwise Or |"]
D2["Boolean Not !<br/>Comparison >, >=, <, <=<br/>Instanceof instanceof<br/>Equality ==, !=<br/>Identity ===, !==<br/>Boolean Xor ^<br/>Boolean And &&<br/>Boolean Or ||"]
E2["Method Call . ( )<br/>Field Access .<br/>Null Safe ?.<br/>New Instance new ( )<br/>String Concatenation +<br/>List/Map Init [ ], [ : ]<br/>List/Map Access [ ]"]
F2["Array Init [ ] { }<br/>Array Access [ ]<br/>Array Length .length<br/>New Array new [ ]"]
A --> B & C & D & E & F
B --> B1
C --> C1
D --> D1
E --> E1
F --> F1
B1 --> B2
C1 --> C2
D1 --> D2
E1 --> E2
F1 --> F2
classDef rootNode fill:#0B64DD,stroke:#101C3F,stroke-width:2px,color:#fff
classDef categoryBox fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#343741
classDef descBox fill:#48EFCF,stroke:#343741,stroke-width:2px,color:#343741
classDef exampleBox fill:#f5f7fa,stroke:#343741,stroke-width:2px,color:#343741
class A rootNode
class B,C,D,E,F categoryBox
class B1,C1,D1,E1,F1 descBox
class B2,C2,D2,E2,F2 exampleBox
```
graph TB
A["Painless Operators"]
B["General"]
C["Numeric"]
D["Boolean"]
E["Reference"]
F["Array"]
B1["Control expression flow and<br/>value assignment"]
C1["Mathematical operations and<br/>bit manipulation"]
D1["Boolean logic and<br/>conditional evaluation"]
E1["Object interaction and<br/>safe data access"]
F1["Array manipulation and<br/>element access"]
B2["Precedence ( )<br/>Function Call ( )<br/>Cast ( )<br/>Conditional ? :<br/>Elvis ?:<br/>Assignment =<br/>Compound Assignment $="]
C2["Post/Pre Increment ++<br/>Post/Pre Decrement --<br/>Unary +/-<br/>Bitwise Not ~<br/>Multiplication *<br/>Division /<br/>Remainder %<br/>Addition +<br/>Subtraction -<br/>Shift <<, >>, >>><br/>Bitwise And &<br/>Bitwise Xor ^<br/>Bitwise Or |"]
D2["Boolean Not !<br/>Comparison >, >=, <, <=<br/>Instanceof instanceof<br/>Equality ==, !=<br/>Identity ===, !==<br/>Boolean Xor ^<br/>Boolean And &&<br/>Boolean Or ||"]
E2["Method Call . ( )<br/>Field Access .<br/>Null Safe ?.<br/>New Instance new ( )<br/>String Concatenation +<br/>List/Map Init [ ], [ : ]<br/>List/Map Access [ ]"]
F2["Array Init [ ] { }<br/>Array Access [ ]<br/>Array Length .length<br/>New Array new [ ]"]
A --> B & C & D & E & F
B --> B1
C --> C1
D --> D1
E --> E1
F --> F1
B1 --> B2
C1 --> C2
D1 --> D2
E1 --> E2
F1 --> F2
classDef rootNode fill:#0B64DD,stroke:#101C3F,stroke-width:2px,color:#fff
classDef categoryBox fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#343741
classDef descBox fill:#48EFCF,stroke:#343741,stroke-width:2px,color:#343741
classDef exampleBox fill:#f5f7fa,stroke:#343741,stroke-width:2px,color:#343741
class A rootNode
class B,C,D,E,F categoryBox
class B1,C1,D1,E1,F1 descBox
class B2,C2,D2,E2,F2 exampleBox
Mermaid diagrams include interactive controls that appear when you hover over the diagram:
- Zoom in/out: Click the
+and-buttons to zoom in or out. You can also holdCtrl(orCmdon macOS) and use the mouse wheel to zoom. - Reset: Click the reset button to return to the default view.
- Fullscreen: Click the expand button to view the diagram in a fullscreen modal.
- Pan: Click and drag the diagram to pan around when zoomed in.
These controls are particularly useful for large or complex diagrams.
- Diagrams require JavaScript to render. Users with JavaScript disabled will see the raw Mermaid code.
- For the full list of diagram types and syntax, see the Mermaid documentation.