| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
| 6 | <title>Mermaid Quick Test Page</title>
|
| 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
|
| 8 | </head>
|
| 9 | <body>
|
| 10 | <div class="mermaid">
|
| 11 | graph TD
|
| 12 | A[Christmas] -->|Get money| B(Go shopping)
|
| 13 | B --> C{Let me think}
|
| 14 | C -->|One| D[Laptop]
|
| 15 | C -->|Two| E[iPhone]
|
| 16 | C -->|Three| F[Car]
|
| 17 | </div>
|
| 18 |
|
| 19 | <hr/>
|
| 20 |
|
| 21 | <div class="mermaid">
|
| 22 | sequenceDiagram
|
| 23 | loop every day
|
| 24 | Alice->>John: Hello John, how are you?
|
| 25 | John-->>Alice: Great!
|
| 26 | end
|
| 27 | </div>
|
| 28 |
|
| 29 | <hr/>
|
| 30 |
|
| 31 | <div class="mermaid">
|
| 32 | gantt
|
| 33 | dateFormat YYYY-MM-DD
|
| 34 | title Adding GANTT diagram to mermaid
|
| 35 |
|
| 36 | section A section
|
| 37 | Completed task :done, des1, 2014-01-06,2014-01-08
|
| 38 | Active task :active, des2, 2014-01-09, 3d
|
| 39 | Future task : des3, after des2, 5d
|
| 40 | Future task2 : des4, after des3, 5d
|
| 41 |
|
| 42 | section Critical tasks
|
| 43 | Completed task in the critical line :crit, done, 2014-01-06,24h
|
| 44 | Implement parser and jison :crit, done, after des1, 2d
|
| 45 | Create tests for parser :crit, active, 3d
|
| 46 | Future task in critical line :crit, 5d
|
| 47 | Create tests for renderer :2d
|
| 48 | Add to mermaid :1d
|
| 49 |
|
| 50 | section Documentation
|
| 51 | Describe gantt syntax :active, a1, after des1, 3d
|
| 52 | Add gantt diagram to demo page :after a1 , 20h
|
| 53 | Add another diagram to demo page :doc1, after a1 , 48h
|
| 54 |
|
| 55 | section Last section
|
| 56 | Describe gantt syntax :after doc1, 3d
|
| 57 | Add gantt diagram to demo page : 20h
|
| 58 | Add another diagram to demo page : 48h
|
| 59 | </div>
|
| 60 |
|
| 61 | <hr/>
|
| 62 |
|
| 63 | <div class="mermaid">
|
| 64 | gitGraph:
|
| 65 | options
|
| 66 | {
|
| 67 | "nodeSpacing": 150,
|
| 68 | "nodeRadius": 10
|
| 69 | }
|
| 70 | end
|
| 71 | commit
|
| 72 | branch newbranch
|
| 73 | checkout newbranch
|
| 74 | commit
|
| 75 | commit
|
| 76 | checkout master
|
| 77 | commit
|
| 78 | commit
|
| 79 | merge newbranch
|
| 80 | </div>
|
| 81 |
|
| 82 | <hr/>
|
| 83 |
|
| 84 | <div class="mermaid">
|
| 85 | classDiagram
|
| 86 | Class01 <|-- AveryLongClass : Cool
|
| 87 | Class03 *-- Class04
|
| 88 | Class05 o-- Class06
|
| 89 | Class07 .. Class08
|
| 90 | Class09 --> C2 : Where am i?
|
| 91 | Class09 --* C3
|
| 92 | Class09 --|> Class07
|
| 93 | Class07 : equals()
|
| 94 | Class07 : Object[] elementData
|
| 95 | Class01 : size()
|
| 96 | Class01 : int chimp
|
| 97 | Class01 : int gorilla
|
| 98 | Class08 <--> C2: Cool label
|
| 99 | </div>
|
| 100 | <script src="./mermaid.js"></script>
|
| 101 | <script>
|
| 102 | mermaid.initialize({startOnLoad: true, theme: 'forest'});
|
| 103 | </script>
|
| 104 | </body>
|
| 105 | </html>
|