You do not have permission to edit this page, for the following reason:
The action you have requested is limited to users in the group: confirmed.
Free text:
{{#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() } }}
Summary:
This is a minor edit Watch this page
Cancel