Mermaid graphics tutorial and examples: Difference between revisions

From A+ Club Lesson Planner & Study Guide
VisualWikitext
(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
Line 3: Line 3:
Mermaid can express flowcharts, graphs and relationships.  
Mermaid can express flowcharts, graphs and relationships.  
* 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]
[[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!
}}

Revision as of 19:08, 25 January 2024

Mermaid is a Mediawiki extension that can produce graphics

Mermaid can express flowcharts, graphs and relationships.

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]

Retrieved from "https://school4schools.wiki/w/index.php?title=Mermaid_graphics_tutorial_and_examples&oldid=4630"