Mermaid graphics tutorial and examples: Difference between revisions

From A+ Club Lesson Planner & Study Guide
mNo edit summary
mNo edit summary
 
Line 4: Line 4:
* here for [https://mermaid.js.org/#/Setup?id=configuration Mermaid website]
* 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]

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]