(3 intermediate revisions by one other user not shown)
Line 10:
Line 10:
{{#set:feature examples = See the example diagram at [[Sales Cycle]] }}
{{#set:feature examples = See the example diagram at [[Sales Cycle]] }}
Editing a complex diagram and integrating that into your documentation shouldn't be hard. The Mermaid library makes diagrams of all types accessible through simple markup. [https://sandbox.semantic-mediawiki.org/wiki/Cat%C3%A9gorie:Mermaid_examples See examples]
Editing a complex diagram and integrating that into your documentation shouldn't be hard. The [https://mermaid.js.org Mermaid.js] library makes diagrams of all types accessible through simple markup. Using the MediaWiki extension, brings the power of Mermaid diagrams to your wiki.
See [[Using Mermaid in MediaWiki]] for more.
Code for a GANNT Chart
[[Category:Diagrams]]
<syntaxhighlight lang="mermaid">
{{#mermaid:gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
}}
</syntaxhighlight>
produces
{{#mermaid:gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
}}
= Flow Chart =
<syntaxhighlight lang="mermaid">
{{#mermaid:graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
}}
</syntaxhighlight>
produces
{{#mermaid:graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
}}
= Sequence Diagram =
<syntaxhighlight lang="mermaid">
{{#mermaid:sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
}}
</syntaxhighlight>
produces
{{#mermaid:sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
}}
= Class Diagram =
<syntaxhighlight lang="mermaid">
{{#mermaid:classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
}}
</syntaxhighlight>
produces
{{#mermaid:classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
}}
= State Diagram =
{{#mermaid:stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
}}
= Pie Chart =
{{#mermaid:pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
}}
= Entity Relationship Diagram =
{{#mermaid:erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
}}
Latest revision as of 14:08, 16 June 2025
Mermaid
flow diagram
Image shows:
flow diagram
Summary
Title:
Mermaid
Description:
A diagramming language. Make diagrams and flowcharts for documentation, easier. With simple syntax, create sophisticated diagrams, flowcharts, GANTT Charts etc.
Editing a complex diagram and integrating that into your documentation shouldn't be hard. The Mermaid.js library makes diagrams of all types accessible through simple markup. Using the MediaWiki extension, brings the power of Mermaid diagrams to your wiki.
