Mermaid graphics tutorial and examples: Difference between revisions

From A+ Club Lesson Planner & Study Guide
mNo edit summary
mNo edit summary
 
(One intermediate revision 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]]
[[Category:Help]]



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]

A
B
C
D

Complex process[edit | edit source]

input files
pipeline
output 1
output 2
post-process 1
post-process 2
post-process 2
dipslay
summary

GANTT chart[edit | edit source]

2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksAdding GANTT diagram functionality to mermaid

Sequence diagram[edit | edit source]

AliceBobJohnHello John, how are you?Fight against hypochondrialoop[Healthcheck]Rational thoughts prevail...Great!How about you?Jolly good!AliceBobJohn

Styling[edit | edit source]

changing colors and shapes[edit | edit source]

Square shape
Circle shape