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 1: / Line 1: @@
 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 ===
+{{#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
+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!
+}}
+===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 6: / Line 93: @@
 * https://mermaid.js.org/syntax/stateDiagram.html
 * https://www.mediawiki.org/wiki/Extension_talk:Mermaid
-*
+*https://github.com/SemanticMediaWiki/Mermaid
+*https://www.semantic-mediawiki.org/wiki/Help:Using_Mermaid_together_with_Semantic_MediaWiki
+*http://readme.md/
+*http://usage.md/
+*http://sandbox.semantic-mediawiki.org/
+*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