Mermaid graphics tutorial and examples

Mermaid is a Mediawiki extension that can produce graphics

Mermaid can express flowcharts, graphs and relationships.

here for Mermaid website
see here for examples

here for Mermaid LiveEditor

Mermaid Syntax

Flowchart Orientation

TD = top down

LR = left to right

Nodes and shapes

--> links with arrow

Examples

Go to "Edit source" to see the code

Graph

Simple process

Complex process

GANTT chart

Sequence diagram

Styling

changing colors and shapes

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