diff options
| -rw-r--r-- | _posts/2017-12-08-mermaid-example.md | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/_posts/2017-12-08-mermaid-example.md b/_posts/2017-12-08-mermaid-example.md new file mode 100644 index 0000000..4b07680 --- /dev/null +++ b/_posts/2017-12-08-mermaid-example.md @@ -0,0 +1,75 @@ +--- +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 --> [*] +``` |