| 1 | ## Mermaid Examples
|
| 2 |
|
| 3 | [Mermaid](https://mermaidjs.github.io) provides a concise and practical way to describe various technical diagrams and have them rendered within a web page. See [Mermaid Demos](https://mermaidjs.github.io/demos.html) for some of its capabilities.
|
| 4 |
|
| 5 | Smartdown has integrated Mermaid, making it easier to mix Mermaid diagrams with Markdown and other Smartdown playables and content.
|
| 6 |
|
| 7 | The examples below show some of the ways Mermaid may be used to help explain with diagrams.
|
| 8 |
|
| 9 | ---
|
| 10 |
|
| 11 |
|
| 12 | ```mermaid/playable
|
| 13 |
|
| 14 | %% Example of sequence diagram
|
| 15 |
|
| 16 | graph LR
|
| 17 | id1((This is the text in the circle));
|
| 18 | ```
|
| 19 |
|
| 20 | #### Graph/Flowchart Diagram
|
| 21 |
|
| 22 | ```mermaid/autoplay/playable
|
| 23 | graph TB
|
| 24 | subgraph one
|
| 25 | a1-->a2{Rhombus}
|
| 26 | end
|
| 27 | subgraph two
|
| 28 | b1-->b2[This is a really long label.]
|
| 29 | end
|
| 30 | subgraph three
|
| 31 | c1-->c2
|
| 32 | end
|
| 33 | c1-->a2
|
| 34 | ```
|
| 35 |
|
| 36 | #### Sequence Diagram
|
| 37 |
|
| 38 | ```mermaid/autoplay/playable
|
| 39 | sequenceDiagram
|
| 40 | A->> B: Query
|
| 41 | B->> C: Forward query
|
| 42 | Note right of C: Thinking...
|
| 43 | C->> B: Response
|
| 44 | B->> A: Forward response
|
| 45 | ```
|
| 46 |
|
| 47 | #### Gantt Diagram
|
| 48 |
|
| 49 | ```mermaid/autoplay/playable
|
| 50 | gantt
|
| 51 | dateFormat YYYY-MM-DD
|
| 52 | title GANTT diagram functionality
|
| 53 |
|
| 54 | section A section
|
| 55 | Completed task :done, des1, 2014-01-06,2014-01-08
|
| 56 | Active task :active, des2, 2014-01-09, 3d
|
| 57 | Future task : des3, after des2, 5d
|
| 58 | Future task2 : des4, after des3, 5d
|
| 59 |
|
| 60 | section Critical tasks
|
| 61 | Completed task in the critical line :crit, done, 2014-01-06,24h
|
| 62 | Implement parser and jison :crit, done, after des1, 2d
|
| 63 | Create tests for parser :crit, active, 3d
|
| 64 | Future task in critical line :crit, 5d
|
| 65 | Create tests for renderer :2d
|
| 66 | Add to mermaid :1d
|
| 67 |
|
| 68 | section Documentation
|
| 69 | Describe gantt syntax :active, a1, after des1, 3d
|
| 70 | Add gantt diagram to demo page :after a1 , 20h
|
| 71 | Add another diagram to demo page :doc1, after a1 , 48h
|
| 72 |
|
| 73 | section Last section
|
| 74 | Describe gantt syntax :after doc1, 3d
|
| 75 | Add gantt diagram to demo page :20h
|
| 76 | Add another diagram to demo page :48h
|
| 77 | ```
|
| 78 |
|
| 79 |
|
| 80 | ### Experimenting with dynamic Mermaid
|
| 81 |
|
| 82 | A quick experiment that shows how a Smartdown cell (called `Name`, in this example) can be used as input to derive a dynamic Mermaid diagram which uses `Name`. In this example, if `Name` is blank, then `Alice` will be used as the name.
|
| 83 |
|
| 84 | [What is your Name?](:?Name)
|
| 85 |
|
| 86 | #### Here is your diagram, [](:!Name)
|
| 87 |
|
| 88 | ```javascript/playable
|
| 89 | var actorName = env.Name;
|
| 90 | if (!actorName || actorName.length === 0) {
|
| 91 | actorName = 'Alice';
|
| 92 | }
|
| 93 |
|
| 94 | var dynamicMermaidSource =
|
| 95 | `
|
| 96 | sequenceDiagram
|
| 97 | ${actorName}->>John: Hello John, how are you?
|
| 98 | John-->>${actorName}: I'm awesome, as are you, ${actorName}!
|
| 99 | `;
|
| 100 |
|
| 101 | smartdown.setVariable('MermaidSource', dynamicMermaidSource)
|
| 102 | ```
|
| 103 |
|
| 104 | [](:!MermaidSource|mermaid)
|
| 105 | [](:!MermaidSource|code)
|
| 106 |
|
| 107 |
|
| 108 | ---
|
| 109 |
|
| 110 |
|
| 111 | [Back to Home](:@Home)
|
| 112 |
|