|
|
| 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]] |
