Help:Mermaid: Difference between revisions

Latest revision as of 21:55, 7 December 2024

The Mermaid extension provides a parser function to help generate diagrams and flowcharts using the mermaid script language. See the README file for detailed instructions on how to install, configure and use this extension

Examples

graph with links

@@ Line 2: / Line 2: @@
 == Examples ==
+=== graph with links ===
+{{#mermaid:graph TD;
+ A[Secretary of Agriculture]
+ B[ Under Secretary for<br/> Farm Production<br/> and Conservation]
+ C[ Under Secretary for<br/> Food, Nutrition<br/> and Consumer Services]
+ D[ Under Secretary for<br/> Food Safety]
+ E[ Under Secretary for<br/> Marketing and<br/> Regulatory Programs]
+ F[ Under Secretary for<br/> Natural Resources<br/> and Environment]
+ G[ Under Secretary for<br/> Rural Development]
+ H[ Under Secretary for<br/> Research, Education<br/> and Economics]
+ I[ Under Secretary for<br/> Trade and Foreign<br/> Agricultural Affairs]
+A-->B;
+A-->C;
+A-->D;
+A-->E;
+A-->F;
+A-->G;
+A-->H;
+A-->I;
+ click A "https://openusaproject.com/wiki/Secretary_of_Agriculture"
+ click B "https://openusaproject.com/wiki/Under_Secretary_for_Farm_Production_and_Conservation"
+ click C "https://sandbox.semantic-mediawiki.org/wiki/C"
+ click D "https://sandbox.semantic-mediawiki.org/wiki/D"
+ style A fill:#ffffff,color:blue
+ classDef node font-size:20px,color:#000;
+ class A,B,C,D,E,F,G,H,I node
+}}
+=== Test===
+{{#mermaid:graph TD;
+flowchart TB
+    subgraph CEO
+        A[CEO]
+    end
+    subgraph Departments
+        B[Finance] --> A
+        C[Marketing] --> A
+        D[IT] --> A
+        E[HR] --> A
+        F[Operations] --> A
+    end
+}}
+===Sequence===
 {{#mermaid:sequenceDiagram
 participant Alice
@@ Line 14: / Line 57: @@
      Bob-->John: Jolly good!
 }}
+===Syntax===
+{{#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
+}}
+=== graph with links ===
+{{#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"
+}}
 == Links ==
@@ Line 26: / Line 100: @@
 *http://pro.wiki/
 *https://www.pro.wiki/help/draw-mermaid-diagrams-charts-in-mediawiki
+*https://github.com/SemanticMediaWiki/Mermaid
+*https://www.semantic-mediawiki.org/wiki/Help:Using_Mermaid_together_with_Semantic_MediaWiki
+*https://www.youtube.com/watch?v=XgETf5w5i-U
+*https://mermaid.js.org/syntax/entityRelationshipDiagram.html