Using Mermaid in MediaWiki: Difference between revisions
Created page with "On the Sales Cycle page, we briefly compare two diagramming extensions for MediaWiki: '''Mermaid''' vs '''Flex Diagrams'''. While Flex Diagrams allows you to create 5 types of diagrams - including all those available through Mermaid, the limitation that you can not combine wiki markup in the 'sandboxed' implementation of Flex Diagrams makes us prefer creating Mermaid diagrams using the Mermaid extension. The Mermaid.js library is capable of generating all these typ..." |
fix syntaxhighlight (there is no highlighter for mermaid.js) |
||
| Line 55: | Line 55: | ||
=== GANNT Chart === | === GANNT Chart === | ||
<syntaxhighlight | <syntaxhighlight> | ||
{{#mermaid:gantt | {{#mermaid:gantt | ||
title A Gantt Diagram | title A Gantt Diagram | ||
| Line 80: | Line 80: | ||
=== Flow Chart === | === Flow Chart === | ||
<syntaxhighlight | <syntaxhighlight> | ||
{{#mermaid:graph TD | {{#mermaid:graph TD | ||
A[Christmas] -->|Get money| B(Go shopping) | A[Christmas] -->|Get money| B(Go shopping) | ||
| Line 99: | Line 99: | ||
=== Sequence Diagram === | === Sequence Diagram === | ||
<syntaxhighlight | <syntaxhighlight> | ||
{{#mermaid:sequenceDiagram | {{#mermaid:sequenceDiagram | ||
Alice->>+John: Hello John, how are you? | Alice->>+John: Hello John, how are you? | ||
| Line 116: | Line 116: | ||
=== Class Diagram === | === Class Diagram === | ||
<syntaxhighlight | <syntaxhighlight> | ||
{{#mermaid:classDiagram | {{#mermaid:classDiagram | ||
Animal <|-- Duck | Animal <|-- Duck | ||