Mermaid graphics tutorial and examples: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
Mermaid can express flowcharts, graphs and relationships. | Mermaid can express flowcharts, graphs and relationships. | ||
* 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]] | ||
| Line 67: | Line 80: | ||
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 | |||
}} | }} | ||
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.
- here for Mermaid website
- see here for examples
- here for Mermaid LiveEditor
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