Mermaid: Difference between revisions

From Freephile Wiki
Create page
m Tagged
 
(7 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]] }}


Code like this
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.
<syntaxhighlight lang="mermaid">
 
{{#mermaid:gantt
See [[Using Mermaid in MediaWiki]] for more.
title A Gantt Diagram
[[Category:Diagrams]]
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
}}

Latest revision as of 14:08, 16 June 2025


Mermaid
flow diagram
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.

See Using Mermaid in MediaWiki for more.