Mermaid graphics tutorial and examples

From A+ Club Lesson Planner & Study Guide

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]