Mermaid graphics tutorial and examples: Difference between revisions

← Older edit

Mermaid graphics tutorial and examples (view source)

Revision as of 20:54, 25 January 2024

2,129 bytes added , 25 January

m

no edit summary

VisualWikitext

Bromley

Bots, Bureaucrats, Interface administrators, Suppressors, Administrators

4,618

edits

@@ Line 2: / Line 2: @@
 Mermaid can express flowcharts, graphs and relationships.
+* here for [https://mermaid.js.org/#/Setup?id=configuration Mermaid website]
 * see [https://sandbox.semantic-mediawiki.net/wiki/Cat%C3%A9gorie:Mermaid_examples here for examples]
+* here for [https://mermaid.live/edit Mermaid LiveEditor]
+== Mermaid Syntax ==
+=== Flowchart Orientation ===
+TD = top down
+LR = left to right
+=== Nodes and shapes ===
+--> links with arrow
+[[Category:Help]]
+==Examples==
+Go to "Edit source" to see the code
+=== Graph ===
+==== Simple process ====
+{{#mermaid:graph TD;
+ A-->B;
+ A-->C;
+ B-->D;
+ C-->D;
+}}
+==== Complex process ====
+{{#mermaid:graph TD
+  A[input files] --> B[pipeline]
+  B --> C[output 1]
+  B --> D[output 2]
+  C --> E[post-process 1]
+  C --> F[post-process 2]
+  C --> G[post-process 2]
+  D --> G[post-process 2]
+  C --> H[display]
+  D --> H[dipslay]
+  B --> I[summary]
+  E --> I[summary]
+  F --> I[summary]
+  G --> I[summary]
+  H --> I[summary]
+}}
+=== GANTT chart ===
+{{#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
+}}
+=== Sequence diagram ===
+{{#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!
+}}
+== Styling ==
+=== changing colors and shapes ===
+{{#mermaid:graph TB
+classDef default fill:#f9f,stroke:#333,stroke-width:4px,font-size:1.0em;
+sq[Square shape] --> ci((Circle shape))
+classDef green fill:#9f6,stroke:#333,stroke-width:2px,font-size:1.0em;
+class sq,e green
+}}