Difference between revisions of "Mermaid"

From Freephile Wiki
Jump to navigation Jump to search
VisualWikitext
(Created page with "{{Feature |image=Flow-diagram.png |imgdesc=flow diagram |title= }}")
 
 
(6 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
|imgdesc=flow diagram
 
|imgdesc=flow diagram
 
|title=
 
|title=
 +
}}
 +
{{#set:feature title = {{PAGENAME}} }}
 +
{{#set:feature description = A diagramming language. Make diagrams and flowcharts for documentation, easier.  With simple syntax, create sophisticated diagrams, flowcharts, GANTT Charts etc.}}
 +
{{#set:feature notes = Use the online editor to create your diagram }}
 +
{{#set:feature tests = }}
 +
{{#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.net/wiki/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 for a GANNT Chart
 +
<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()
 +
}
 
}}
 
}}

Latest revision as of 01:16, 4 May 2023

Mermaid Dialog-information.svg
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.
More
Notes: Use the online editor to create your diagram
Example: See the example diagram at Sales Cycle




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. The Semantic MediaWiki (sandbox) website shows some examples of Mermaid markup plus the MediaWiki parser function https://sandbox.semantic-mediawiki.net/wiki/Mermaid


  1. Live Editor
  2. Syntax Reference
  3. MediaWiki extension page https://www.mediawiki.org/wiki/Extension:Mermaid
  4. MediaWiki extension repo on GitHub https://github.com/SemanticMediaWiki/Mermaid

Code for a GANNT Chart 

{{#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
}}

produces

Flow Chart[edit | edit source]

{{#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]
}}

produces

Sequence Diagram[edit | edit source]

{{#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!
}}

produces

Class Diagram[edit | edit source]

{{#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()
	}
}}

produces

Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Mermaid&oldid=10200"