Mermaid graphics tutorial and examples: Difference between revisions

From A+ Club Lesson Planner & Study Guide
(Created page with "Mermaid is a Mediawiki extension that can produce graphics Mermaid can express flowcharts, graphs and relationships. * see [https://sandbox.semantic-mediawiki.net/wiki/Cat%C3%A9gorie:Mermaid_examples here for examples]")
 
mNo edit summary
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:


Mermaid can express flowcharts, graphs and relationships.  
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]
* 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
}}

Latest revision as of 20:54, 25 January 2024

Mermaid is a Mediawiki extension that can produce graphics

Mermaid can express flowcharts, graphs and relationships.

Mermaid Syntax[edit | edit source]

Flowchart Orientation[edit | edit source]

TD = top down

LR = left to right

Nodes and shapes[edit | edit source]

--> links with arrow

Examples[edit | edit source]

Go to "Edit source" to see the code

Graph[edit | edit source]

Simple process[edit | edit source]

Complex process[edit | edit source]

GANTT chart[edit | edit source]

Sequence diagram[edit | edit source]

Styling[edit | edit source]

changing colors and shapes[edit | edit source]