...
| Code Block |
|---|
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end |
+ Display
| Mermaid | ||||||
|---|---|---|---|---|---|---|
| ||||||
{"diagramDefinition":"graph TB \n c1-->a2 \n subgraph one \n a1-->a2 \n end \n subgraph two \n b1-->b2 \n end \n subgraph three \n c1-->c2\n end"} |
+ Markdown
| Code Block |
|---|
graph TD
A[Inactive device]:::danger -->|Remove battery<br>strip/paper| B[Active device]:::good
B --> C[Install/Stick at the desired place]
C --> D[Open the Super Awsome app]
D --> E[In the great tab, find the newly discovered device]
E --> F[Check if the ID matches the ID printed on the device]
F -->|If match| G[Rename the device with its location]
F -->|If no match| H[Check for another newly discovered device in the app]
G --> I["Check that the status of the device is #quot;Ok#quot;"]
I --> J[You're good to<br>go]:::good
classDef danger fill:red,color:white;
classDef good fill:green,color:white; |
+ Display
| Mermaid |
|---|
graph TD A[Inactive device]:::danger -->|Remove battery<br>strip/paper| B[Active device]:::good B --> C[Install/Stick at the desired place] C --> D[Open the Super Awsome app] D --> E[In the great tab, find the newly discovered device] E --> F[Check if the ID matches the ID printed on the device] F -->|If match| G[Rename the device with its location] F -->|If no match| H[Check for another newly discovered device in the app] G --> I["Check that the status of the device is #quot;Ok#quot;"] I --> J[You're good to<br>go]:::good classDef danger fill:red,color:white; classDef endgood fill:green,color:white; |
Sequence diagram
+ Syntax
https://mermaid-js.github.io/mermaid/#/sequenceDiagram
...
+ Markdown
| Code Block |
|---|
gantt dateFormat :YYYY-MM-DD title A Gantt Diagram :Adding GANTT diagram functionality to mermaid excludes :excludes the named dates/days from being included in a charted task.. (Accepts specific dates indateFormat YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section Section section A section Completed task :done, des1a1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d30d FutureAnother task : des3, after des2, 5d Future task2 : des4, after des3, 5d after a1 , 20d section CriticalAnother tasks Task in Completedsec 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 12 , 12d another task :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 24d |
+ Display
| Mermaid |
|---|
gantt dateFormat :YYYY-MM-DD title A Gantt Diagram :Adding GANTT diagram functionality to mermaid excludes :excludes the named dates/days from being included in a charted task.. (Accepts specific dates indateFormat YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section Section section A section Completed task :done, des1a1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d30d FutureAnother task : des3, after des2, 5d Future task2 : des4, after des3, 5d after a1 , 20d section CriticalAnother tasks Task in Completedsec task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d12 , 12d Create tests for parser :crit, active, 3d Future task in critical line another task :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 24d |
Pie chart
+ Syntax
https://mermaid-js.github.io/mermaid/#/pie
...