-
Notifications
You must be signed in to change notification settings - Fork 901
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #413 from sylhare/mermaid
Update Mermaid v10.6.1
- Loading branch information
Showing
4 changed files
with
1,043 additions
and
811 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| --- | ||
| layout: post | ||
| title: Mermaid Chart | ||
| tags: [Mermaid] | ||
| --- | ||
|
|
||
| ## Mermaid | ||
|
|
||
| Diagrams with mermaid, make sure it is enabled in the `_config.yml`. | ||
| Here is a simple example: | ||
|
|
||
| ```html | ||
| <!-- To generate a diagram --> | ||
| <div class="mermaid"> | ||
| sequenceDiagram | ||
| Alice->>John: Hello John, how are you? | ||
| John-->>Alice: Great! | ||
| </div> | ||
| ``` | ||
|
|
||
| That will be rendered into this: | ||
|
|
||
| {% include aligner.html images="mermaid-example.png" column=1 %} | ||
|
|
||
| You can also go with more complex features and diagrams from the [documentation](https://mermaid-js.github.io/mermaid/), | ||
| and try it out with the [live editor](https://mermaid.live/). | ||
|
|
||
| ### SequenceDiagram | ||
|
|
||
| <div class="mermaid"> | ||
| sequenceDiagram | ||
| participant Alice | ||
| participant Bob | ||
| Alice->>John: Hello John, how are you? | ||
| loop Healthcheck | ||
| John->>John: Fight against hypochondria | ||
| end | ||
| Note right of John: Rational thoughts prevail! | ||
| John-->>Alice: Great! | ||
| John->>Bob: How about you? | ||
| Bob-->>John: Jolly good! | ||
| </div> | ||
|
|
||
| ### Flow | ||
|
|
||
| <div class="mermaid"> | ||
| flowchart 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] | ||
| </div> | ||
|
|
||
| ### Class | ||
|
|
||
| <div class="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() | ||
| } | ||
| </div> | ||
|
|
||
| ### State | ||
|
|
||
| <div class="mermaid"> | ||
| stateDiagram-v2 | ||
| [*] --> Still | ||
| Still --> [*] | ||
| Still --> Moving | ||
| Moving --> Still | ||
| Moving --> Crash | ||
| Crash --> [*] | ||
| </div> | ||
|
|
||
| ### ER | ||
|
|
||
| <div class="mermaid"> | ||
| erDiagram | ||
| CUSTOMER }|..|{ DELIVERY-ADDRESS : has | ||
| CUSTOMER ||--o{ ORDER : places | ||
| CUSTOMER ||--o{ INVOICE : "liable for" | ||
| DELIVERY-ADDRESS ||--o{ ORDER : receives | ||
| INVOICE ||--|{ ORDER : covers | ||
| ORDER ||--|{ ORDER-ITEM : includes | ||
| PRODUCT-CATEGORY ||--|{ PRODUCT : contains | ||
| PRODUCT ||--o{ ORDER-ITEM : "ordered in" | ||
| </div> | ||
|
|
||
| ### Gantt | ||
|
|
||
| <div class="mermaid"> | ||
| gantt | ||
| title A Gantt Diagram | ||
| dateFormat YYYY-MM-DD | ||
| section Section | ||
| A task :a1, 2014-01-01, 30d | ||
| Another task :after a1 , 20d | ||
| section Another | ||
| Task in sec :2014-01-12 , 12d | ||
| another task : 24d | ||
| </div> | ||
|
|
||
| ### User Journey | ||
|
|
||
| <div class="mermaid"> | ||
| journey | ||
| title My working day | ||
| section Go to work | ||
| Make tea: 5: Me | ||
| Go upstairs: 3: Me | ||
| Do work: 1: Me, Cat | ||
| section Go home | ||
| Go downstairs: 5: Me | ||
| Sit down: 3: Me | ||
| </div> | ||
|
|
||
| ### Git | ||
|
|
||
| <div class="mermaid"> | ||
| gitGraph | ||
| commit | ||
| commit | ||
| branch develop | ||
| checkout develop | ||
| commit | ||
| commit | ||
| checkout main | ||
| merge develop | ||
| commit | ||
| commit | ||
| </div> | ||
|
|
||
| ### Pie | ||
|
|
||
| <div class="mermaid"> | ||
| pie title Pets adopted by volunteers | ||
| "Dogs" : 386 | ||
| "Cats" : 85 | ||
| "Rats" : 15 | ||
| </div> | ||
|
|
||
| ### Mindmap | ||
|
|
||
| <div class="mermaid"> | ||
| mindmap | ||
| root((mindmap)) | ||
| Origins | ||
| Long history | ||
| ::icon(fa fa-book) | ||
| Popularisation | ||
| British popular psychology author Tony Buzan | ||
| Research | ||
| On effectivness<br/>and features | ||
| On Automatic creation | ||
| Uses | ||
| Creative techniques | ||
| Strategic planning | ||
| Argument mapping | ||
| Tools | ||
| Pen and paper | ||
| Mermaid | ||
| </div> | ||
|
|
||
| ### QuadrantChart | ||
|
|
||
| <div class="mermaid"> | ||
| quadrantChart | ||
| title Reach and engagement of campaigns | ||
| x-axis Low Reach --> High Reach | ||
| y-axis Low Engagement --> High Engagement | ||
| quadrant-1 We should expand | ||
| quadrant-2 Need to promote | ||
| quadrant-3 Re-evaluate | ||
| quadrant-4 May be improved | ||
| Campaign A: [0.3, 0.6] | ||
| Campaign B: [0.45, 0.23] | ||
| Campaign C: [0.57, 0.69] | ||
| Campaign D: [0.78, 0.34] | ||
| Campaign E: [0.40, 0.34] | ||
| Campaign F: [0.35, 0.78] | ||
| </div> | ||
|
|
||
| ### XYChart | ||
|
|
||
| <div class="mermaid"> | ||
| xychart-beta | ||
| title "Sales Revenue" | ||
| x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] | ||
| y-axis "Revenue (in $)" 4000 --> 11000 | ||
| bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] | ||
| line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] | ||
| </div> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.