View source for Using Mermaid in MediaWiki

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 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
# Sequence Diagram
# Class Diagram
# State Diagram
# Entity Relationship Diagram
# User Journey
# Gantt
# Pie Chart
# Quadrant Chart
# Requirement Diagram
# Gitgraph (Git) Diagram
# C4 Diagram 🦺⚠️
# Mindmaps
# Timeline
# ZenUML
# Sankey 🔥
# XY Chart 🔥
# Block Diagram 🔥
# Packet 🔥
# Kanban 🔥
# Architecture 🔥
# Radar 🔥

== Building Diagrams ==

Use the [https://mermaid.live/ Mermaid Live Editor] (javascript in-browser editor for Mermaid markup @ mermaid.live)

There are a ton of integrations for editing the Mermaid script language in your content platform or editor of choice. For example, there's an [https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor extension for VSCode to interact with Mermaid]. See https://mermaid.js.org/ecosystem/integrations-community.html for the full rundown.

== Docs ==
# [https://mermaid.js.org/intro/n00b-syntaxReference.html Syntax Reference]

== Mermaid Extension for MediaWiki ==
# MediaWiki extension page https://www.mediawiki.org/wiki/Extension:Mermaid

== Repo ==
# MediaWiki extension repo on GitHub https://github.com/SemanticMediaWiki/Mermaid

== Examples ==
In addition to the examples below, the Semantic MediaWiki (sandbox) website shows some [https://sandbox.semantic-mediawiki.net/wiki/Mermaid examples of Mermaid] markup plus the MediaWiki parser function:

* Mermaid - gantt chart
* Mermaid - graph
* Mermaid - graph with links
* Mermaid - graph with links and tooltips
* Mermaid - sequence diagram
* Mermaid - subgraph
* Mermaid - wide graph (CSS hack to fix horizontal scrolling)


=== GANNT Chart ===
<syntaxhighlight>
{{#mermaid:gantt
	title A Gantt Diagram
	dateFormat  YYYY-MM-DD
	section Section
	A task           :a1, 2014-01-01, 30d
	Another task     :after a1  , 20d
	section Another
	Task in sec      :2014-01-12  , 12d
	another task      : 24d
}}
</syntaxhighlight>
produces
{{#mermaid:gantt
	title A Gantt Diagram
	dateFormat  YYYY-MM-DD
	section Section
	A task           :a1, 2014-01-01, 30d
	Another task     :after a1  , 20d
	section Another
	Task in sec      :2014-01-12  , 12d
	another task      : 24d
}}

=== Flow Chart ===
<syntaxhighlight>
{{#mermaid:graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
}}
</syntaxhighlight>
produces
{{#mermaid:graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
}}

=== Sequence Diagram ===
<syntaxhighlight>
{{#mermaid:sequenceDiagram
	Alice->>+John: Hello John, how are you?
	Alice->>+John: John, can you hear me?
	John-->>-Alice: Hi Alice, I can hear you!
	John-->>-Alice: I feel great!
}}
</syntaxhighlight>
produces 
{{#mermaid:sequenceDiagram
	Alice->>+John: Hello John, how are you?
	Alice->>+John: John, can you hear me?
	John-->>-Alice: Hi Alice, I can hear you!
	John-->>-Alice: I feel great!
}}

=== Class Diagram ===
<syntaxhighlight>
{{#mermaid:classDiagram
	Animal <|-- Duck
	Animal <|-- Fish
	Animal <|-- Zebra
	Animal : +int age
	Animal : +String gender
	Animal: +isMammal()
	Animal: +mate()
	class Duck{
		+String beakColor
		+swim()
		+quack()
	}
	class Fish{
		-int sizeInFeet
		-canEat()
	}
	class Zebra{
		+bool is_wild
		+run()
	}
}}
</syntaxhighlight>
produces 
{{#mermaid:classDiagram
	Animal <|-- Duck
	Animal <|-- Fish
	Animal <|-- Zebra
	Animal : +int age
	Animal : +String gender
	Animal: +isMammal()
	Animal: +mate()
	class Duck{
		+String beakColor
		+swim()
		+quack()
	}
	class Fish{
		-int sizeInFeet
		-canEat()
	}
	class Zebra{
		+bool is_wild
		+run()
	}
}}

{{References}}


[[Category:Sales]]
[[Category:Company]]
[[Category:Diagrams]]