|
|
| Ligne 1 : |
Ligne 1 : |
| This page holds examples for the [[mw:Extension:Mermaid|Mermaid]] extension. See also [https://mermaidjs.github.io/ mermaidjs.github.io] for further documentation.
| | == Syntax == |
| | |
| == example 1 - graph == | |
| ; Syntax
| |
| <pre> | | <pre> |
| {{#mermaid:graph TD; | | {{#mermaid:graph TD; |
| Ligne 11 : |
Ligne 8 : |
| }} | | }} |
| </pre> | | </pre> |
| ; Result
| |
| {{#mermaid:graph TD;
| |
| A-->B;
| |
| A-->C;
| |
| B-->D;
| |
| C-->D;
| |
| }}
| |
|
| |
|
| | | == Result == |
| == example 2 - graph with links == | |
| ; Syntax
| |
| <pre>
| |
| {{#mermaid:graph TD;
| |
| A-->B;
| |
| A-->C;
| |
| B-->D;
| |
| C-->D;
| |
| click A "https://sandbox.semantic-mediawiki.org/wiki/A"
| |
| click B "https://sandbox.semantic-mediawiki.org/wiki/B"
| |
| click C "https://sandbox.semantic-mediawiki.org/wiki/C"
| |
| click D "https://sandbox.semantic-mediawiki.org/wiki/D"
| |
| }}
| |
| </pre>
| |
| ; Result
| |
| {{#mermaid:graph TD; | | {{#mermaid:graph TD; |
| A-->B; | | A-->B; |
| Ligne 40 : |
Ligne 15 : |
| B-->D; | | B-->D; |
| C-->D; | | C-->D; |
| click A "https://sandbox.semantic-mediawiki.org/wiki/A"
| |
| click B "https://sandbox.semantic-mediawiki.org/wiki/B"
| |
| click C "https://sandbox.semantic-mediawiki.org/wiki/C"
| |
| click D "https://sandbox.semantic-mediawiki.org/wiki/D"
| |
| }}
| |
|
| |
| == example 3 - sequence diagram ==
| |
| ; Syntax
| |
| <pre>
| |
| {{#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 <br/>prevail...
| |
| John-->Alice: Great!
| |
| John->Bob: How about you?
| |
| Bob-->John: Jolly good!
| |
| }}
| |
| </pre>
| |
| ; Result
| |
| {{#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 <br/>prevail...
| |
| John-->Alice: Great!
| |
| John->Bob: How about you?
| |
| Bob-->John: Jolly good!
| |
| }}
| |
|
| |
| == example 4 - gantt chart ==
| |
| ; Syntax
| |
| <pre>
| |
| {{#mermaid:gantt
| |
| dateFormat YYYY-MM-DD
| |
| title Adding GANTT diagram functionality to mermaid
| |
| 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
| |
| }}
| |
| </pre>
| |
| ; Result
| |
| {{#mermaid:gantt
| |
| dateFormat YYYY-MM-DD
| |
| title Adding GANTT diagram functionality to mermaid
| |
| 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
| |
| }} | | }} |
|
| |
|
| [[Category:Mermaid examples]] | | [[Category:Mermaid examples]] |
