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