|
|
| (4 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]] }} |
|
| |
|
| Editing a complex diagram and integrating that into your documentation shouldn't be hard. The Mermaid library makes diagrams of all types accessible through simple markup. [https://sandbox.semantic-mediawiki.org/wiki/Cat%C3%A9gorie:Mermaid_examples See examples] | | 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. |
| Code for a GANNT Chart
| | [[Category:Diagrams]] |
| <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()
| |
| }
| |
| }}
| |
| | |
| = State Diagram =
| |
| {{#mermaid:stateDiagram
| |
| [*] --> Still
| |
| Still --> [*]
| |
| | |
| Still --> Moving
| |
| Moving --> Still
| |
| Moving --> Crash
| |
| Crash --> [*]
| |
| }}
| |
| | |
| = Pie Chart =
| |
| {{#mermaid:pie title Pets adopted by volunteers
| |
| "Dogs" : 386
| |
| "Cats" : 85
| |
| "Rats" : 15
| |
| }}
| |