Open main menu
Freephile Wiki

Changes

Mermaid (view source)

Revision as of 01:16, 4 May 2023

2,014 bytes added ,  01:16, 4 May 2023
no edit summary
{{#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 [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. The Semantic MediaWiki (sandbox) website shows some examples of Mermaid markup plus the MediaWiki parser function https://sandbox.semantic-mediawiki.orgnet/wiki/Cat%C3%A9gorie:Mermaid_examples See examples]Mermaid
# [https://mermaid.live/ Live Editor]# [https://mermaid.js.org/intro/n00b-syntaxReference.html Syntax Reference]# MediaWiki extension page https://www.mediawiki.org/wiki/Extension:Mermaid# MediaWiki extension repo on GitHub https://github.com/SemanticMediaWiki/Mermaid Code like thisfor a GANNT Chart
<syntaxhighlight lang="mermaid">
{{#mermaid:gantt
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()
}
}}
Retrieved from "https://wiki.freephile.org/wiki/Special:MobileDiff/9993...10200"