Created Mermaid Diagram (markdown)

Lauri Ojansivu 2021-05-07 01:54:28 +03:00
parent 0a5ced6c1c
commit f4bcf3b2e9

70
Mermaid-Diagram.md Normal file

@ -0,0 +1,70 @@
## Npm package
- NPM package at https://www.npmjs.com/package/@liradb2000/markdown-it-mermaid
## About examples
- Below examples and more at https://mermaid-js.github.io/mermaid/#/examples
## Howto
- Add mermaid code to Wekan card or any other input field. After some time, if chart is not visible, reload Wekan webpage.
- Mermaid code starts with `~~~mermaid`
- Mermaid code ends with `~~~`
## Example 1: Flowchart
```
~~~mermaid
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
~~~
```
## Example 2: Pie Chart
```
~~~mermaid
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
~~~
```
## Example 3: Gantt Chart
```
~~~mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
~~~
```