Help:Mermaid: Difference between revisions

← Older edit

Help:Mermaid (view source)

Revision as of 22:55, 7 December 2024

3,042 bytes added , 7 December 2024

→‎Links

VisualWikitext

Star

CargoAdmin, Bureaucrats, Moderators (CommentStreams), fileuploaders, newuser

401

edits

@@ 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 8: / Line 95: @@
 *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