Mermaid graphics tutorial and examples: Difference between revisions

From A+ Club Lesson Planner & Study Guide
mNo edit summary
mNo edit summary
Line 67: Line 67:
   John->>Bob: How about you?
   John->>Bob: How about you?
   Bob-->>John: Jolly good!
   Bob-->>John: Jolly good!
}}
== Styling ==
=== changing colors and shapes ===
{{#mermaid:graph TB
classDef default fill:#f9f,stroke:#333,stroke-width:4px,font-size:1.0em;
sq[Square shape] --> ci((Circle shape))
classDef green fill:#9f6,stroke:#333,stroke-width:2px,font-size:1.0em;
class sq,e green
}}
}}

Revision as of 20:04, 25 January 2024

Mermaid is a Mediawiki extension that can produce graphics

Mermaid can express flowcharts, graphs and relationships.

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]