76 lines
1.2 KiB
Markdown
76 lines
1.2 KiB
Markdown
|
---
|
||
|
|
layout: post
|
||
|
|
title: Mermaid example
|
||
|
|
categories: example
|
||
|
|
tags: [mermaid]
|
||
|
|
---
|
||
|
|
|
||
|
|
### 1. Pie chart
|
||
|
|
|
||
|
|
```mermaid!
|
||
|
|
pie title Pets adopted by volunteers
|
||
|
|
"Dogs" : 386
|
||
|
|
"Cats" : 85
|
||
|
|
"Rats" : 35
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2. sequence diagram
|
||
|
|
|
||
|
|
@startmermaid
|
||
|
|
sequenceDiagram
|
||
|
|
Alice ->> Bob: Hello Bob, how are you?
|
||
|
|
Bob-->>John: How about you John?
|
||
|
|
Bob--x Alice: I am good thanks!
|
||
|
|
Bob-x John: I am good thanks!
|
||
|
|
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
|
||
|
|
|
||
|
|
Bob-->Alice: Checking with John...
|
||
|
|
Alice->John: Yes... John, how are you?
|
||
|
|
@endmermaid
|
||
|
|
|
||
|
|
```mermaid!
|
||
|
|
graph TD
|
||
|
|
A[Christmas] -->|Get money| B(Go shopping)
|
||
|
|
B --> C{Let me think}
|
||
|
|
C -->|One| D[Laptop]
|
||
|
|
C -->|Two| E[iPhone]
|
||
|
|
C -->|Three| F[fa:fa-car Car]
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3. Class diagram
|
||
|
|
```mermaid!
|
||
|
|
classDiagram
|
||
|
|
Animal <|-- Duck
|
||
|
|
Animal <|-- Fish
|
||
|
|
Animal <|-- Zebra
|
||
|
|
Animal : +int age
|
||
|
|
Animal : +String gender
|
||
|
|
Animal: +isMammal()
|
||
|
|
Animal: +mate()
|
||
|
|
class Duck{
|
||
|
|
+String beakColor
|
||
|
|
+swim()
|
||
|
|
+quack()
|
||
|
|
}
|
||
|
|
class Fish{
|
||
|
|
-int sizeInFeet
|
||
|
|
-canEat()
|
||
|
|
}
|
||
|
|
class Zebra{
|
||
|
|
+bool is_wild
|
||
|
|
+run()
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### 4. State diagram
|
||
|
|
```mermaid!
|
||
|
|
stateDiagram
|
||
|
|
[*] --> Still
|
||
|
|
Still --> [*]
|
||
|
|
|
||
|
|
Still --> Moving
|
||
|
|
Moving --> Still
|
||
|
|
Moving --> Crash
|
||
|
|
Crash --> [*]
|
||
|
|
```
|