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..." |
No edit summary |
||
| (2 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
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. | 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 types of diagrams. | The Mermaid.js library is capable of generating all these types of diagrams. '''Unfortunately''', the current integration is for v8.14.0 released on Feb 10, 2022 so it desperately needs updating to gain the latest features and diagram types of the library. | ||
# Flowchart | # Flowchart | ||
| Line 53: | Line 53: | ||
* Mermaid - subgraph | * Mermaid - subgraph | ||
* Mermaid - wide graph (CSS hack to fix horizontal scrolling) | * Mermaid - wide graph (CSS hack to fix horizontal scrolling) | ||
=== GANNT Chart === | === GANNT Chart === | ||
<syntaxhighlight | <syntaxhighlight> | ||
{{#mermaid:gantt | {{#mermaid:gantt | ||
title A Gantt Diagram | title A Gantt Diagram | ||
| Line 80: | Line 81: | ||
=== 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 100: | ||
=== 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 117: | ||
=== Class Diagram === | === Class Diagram === | ||
<syntaxhighlight | <syntaxhighlight> | ||
{{#mermaid:classDiagram | {{#mermaid:classDiagram | ||
Animal <|-- Duck | Animal <|-- Duck | ||
| Line 169: | Line 170: | ||
[[Category:Sales]] | [[Category:Sales]] | ||
[[Category:Company]] | [[Category:Company]] | ||
[[Category:Diagrams]] | |||