Mermaid graphics tutorial and examples

Revision as of 20:54, 25 January 2024 by Bromley (talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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"