| 1 | <html> |
| 2 | <head> |
| 3 | <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> |
| 4 | <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
| 5 | <link |
| 6 | rel="stylesheet" |
| 7 | href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" |
| 8 | /> |
| 9 | <link |
| 10 | href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" |
| 11 | rel="stylesheet" |
| 12 | /> |
| 13 | <style> |
| 14 | body { |
| 15 | /* background: rgb(221, 208, 208); */ |
| 16 | /* background:#333; */ |
| 17 | font-family: 'Arial'; |
| 18 | height: 100%; |
| 19 | width: 100%; |
| 20 | margin: 0; |
| 21 | padding: 0; |
| 22 | } |
| 23 | h1 { |
| 24 | color: grey; |
| 25 | } |
| 26 | .mermaid2 { |
| 27 | display: none; |
| 28 | } |
| 29 | .height { |
| 30 | min-height: 600px; |
| 31 | height: 600px; |
| 32 | } |
| 33 | .height2 { |
| 34 | min-height: 600px; |
| 35 | height: 1300px; |
| 36 | } |
| 37 | .width { |
| 38 | width: 33%; |
| 39 | border: 1px solid blue; |
| 40 | padding: 10px; |
| 41 | } |
| 42 | </style> |
| 43 | </head> |
| 44 | <body> |
| 45 | <h1>Showcases of diagrams</h1> |
| 46 | <div class="flex flex-wrap"> |
| 47 | <pre class="mermaid width height"> |
| 48 | %%{init: {'theme': 'neutral'}}%% |
| 49 | graph TD |
| 50 | A[Christmas] -->|Get money| B(Go shopping) |
| 51 | B --> C{Let me think} |
| 52 | B --> G[/Another/] |
| 53 | C ==>|One| D[Laptop] |
| 54 | C -->|Two| E[iPhone] |
| 55 | C -->|Three| F[fa:fa-car Car] |
| 56 | subgraph section |
| 57 | C |
| 58 | D |
| 59 | E |
| 60 | F |
| 61 | G |
| 62 | end |
| 63 | </pre> |
| 64 | <pre class="mermaid width height"> |
| 65 | flowchart TD |
| 66 | A[Christmas] -->|Get money| B(Go shopping) |
| 67 | B --> C{Let me think} |
| 68 | B --> G[Another] |
| 69 | C ==>|One| D[Laptop] |
| 70 | C x--x|Two| E[iPhone] |
| 71 | C o--o|Three| F[fa:fa-car Car] |
| 72 | subgraph section |
| 73 | C |
| 74 | D |
| 75 | E |
| 76 | F |
| 77 | G |
| 78 | end |
| 79 | </pre> |
| 80 | <pre class="mermaid width height"> |
| 81 | sequenceDiagram |
| 82 | autonumber |
| 83 | par Action 1 |
| 84 | Alice->>John: Hello John, how are you? |
| 85 | and Action 2 |
| 86 | Alice->>Bob: Hello Bob, how are you? |
| 87 | end |
| 88 | Alice->>+John: Hello John, how are you? |
| 89 | Alice->>+John: John, can you hear me? |
| 90 | John-->>-Alice: Hi Alice, I can hear you! |
| 91 | Note right of John: John is perceptive |
| 92 | John-->>-Alice: I feel great! |
| 93 | loop Every minute |
| 94 | John-->Alice: Great! |
| 95 | end |
| 96 | </pre> |
| 97 | <pre class="mermaid width height"> |
| 98 | %%{init: {'theme':'neutral'}}%% |
| 99 | |
| 100 | classDiagram |
| 101 | Animal "1" <|-- Duck |
| 102 | Animal <|-- Fish |
| 103 | Animal <--o Zebra |
| 104 | Animal : +int age |
| 105 | Animal : +String gender |
| 106 | Animal: +isMammal() |
| 107 | Animal: +mate() |
| 108 | class Duck{ |
| 109 | +String beakColor |
| 110 | +swim() |
| 111 | +quack() |
| 112 | } |
| 113 | class Fish{ |
| 114 | -int sizeInFeet |
| 115 | -canEat() |
| 116 | } |
| 117 | class Zebra{ |
| 118 | +bool is_wild |
| 119 | +run() |
| 120 | } |
| 121 | </pre> |
| 122 | <pre class="mermaid width height"> |
| 123 | gantt |
| 124 | dateFormat :YYYY-MM-DD |
| 125 | title Adding GANTT diagram functionality to mermaid |
| 126 | excludes :excludes the named dates/days from being included in a charted task.. |
| 127 | section A section |
| 128 | Completed task :done, des1, 2014-01-06,2014-01-08 |
| 129 | Active task :active, des2, 2014-01-09, 3d |
| 130 | Future task : des3, after des2, 5d |
| 131 | Future task2 : des4, after des3, 5d |
| 132 | |
| 133 | section Critical tasks |
| 134 | Completed task in the critical line :crit, done, 2014-01-06,24h |
| 135 | Implement parser and jison :crit, done, after des1, 2d |
| 136 | Create tests for parser :crit, active, 3d |
| 137 | Future task in critical line :crit, 5d |
| 138 | Create tests for renderer :2d |
| 139 | Add to mermaid :1d |
| 140 | |
| 141 | section Documentation |
| 142 | Describe gantt syntax :active, a1, after des1, 3d |
| 143 | Add gantt diagram to demo page :after a1 , 20h |
| 144 | Add another diagram to demo page :doc1, after a1 , 48h |
| 145 | |
| 146 | section Last section |
| 147 | Describe gantt syntax :after doc1, 3d |
| 148 | Add gantt diagram to demo page :20h |
| 149 | Add another diagram to demo page :48h |
| 150 | </pre> |
| 151 | <pre class="mermaid width height2"> |
| 152 | stateDiagram |
| 153 | [*] --> Active |
| 154 | |
| 155 | state Active { |
| 156 | [*] --> NumLockOff |
| 157 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 158 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 159 | -- |
| 160 | [*] --> CapsLockOff |
| 161 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 162 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 163 | -- |
| 164 | [*] --> ScrollLockOff |
| 165 | ScrollLockOff --> ScrollLockOn : EvCapsLockPressed |
| 166 | ScrollLockOn --> ScrollLockOff : EvCapsLockPressed |
| 167 | } |
| 168 | state SomethingElse { |
| 169 | A --> B |
| 170 | B --> A |
| 171 | } |
| 172 | |
| 173 | Active --> SomethingElse |
| 174 | note right of SomethingElse : This is the note to the right. |
| 175 | </pre> |
| 176 | <pre class="mermaid width height2"> |
| 177 | stateDiagram-v2 |
| 178 | [*] --> Active |
| 179 | |
| 180 | state Active { |
| 181 | [*] --> NumLockOff |
| 182 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 183 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 184 | -- |
| 185 | [*] --> CapsLockOff |
| 186 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 187 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 188 | -- |
| 189 | [*] --> ScrollLockOff |
| 190 | ScrollLockOff --> ScrollLockOn : EvCapsLockPressed |
| 191 | ScrollLockOn --> ScrollLockOff : EvCapsLockPressed |
| 192 | } |
| 193 | state SomethingElse { |
| 194 | A --> B |
| 195 | B --> A |
| 196 | } |
| 197 | |
| 198 | Active --> SomethingElse2 |
| 199 | note right of SomethingElse2 : This is the note to the right. |
| 200 | </pre> |
| 201 | <pre class="mermaid width height2"> |
| 202 | erDiagram |
| 203 | CUSTOMER }|..|{ DELIVERY-ADDRESS : has |
| 204 | CUSTOMER ||--o{ ORDER : places |
| 205 | CUSTOMER ||--o{ INVOICE : "liable for" |
| 206 | DELIVERY-ADDRESS ||--o{ ORDER : receives |
| 207 | INVOICE ||--|{ ORDER : covers |
| 208 | ORDER ||--|{ ORDER-ITEM : includes |
| 209 | PRODUCT-CATEGORY ||--|{ PRODUCT : contains |
| 210 | PRODUCT ||--o{ ORDER-ITEM : "ordered in" |
| 211 | </pre> |
| 212 | <pre class="mermaid width height"> |
| 213 | journey |
| 214 | title My working day |
| 215 | section Go to work |
| 216 | Make tea: 5: Me |
| 217 | Go upstairs: 3: Me |
| 218 | Do work: 1: Me, Cat |
| 219 | section Go home |
| 220 | Go downstairs: 5: Me |
| 221 | Sit down: 5: Me |
| 222 | </pre> |
| 223 | <pre class="mermaid width height"> |
| 224 | requirementDiagram |
| 225 | |
| 226 | requirement test_req { |
| 227 | id: 1 |
| 228 | text: the test text. |
| 229 | risk: high |
| 230 | verifymethod: test |
| 231 | } |
| 232 | |
| 233 | functionalRequirement test_req2 { |
| 234 | id: 1.1 |
| 235 | text: the second test text. |
| 236 | risk: low |
| 237 | verifymethod: inspection |
| 238 | } |
| 239 | |
| 240 | performanceRequirement test_req3 { |
| 241 | id: 1.2 |
| 242 | text: the third test text. |
| 243 | risk: medium |
| 244 | verifymethod: demonstration |
| 245 | } |
| 246 | |
| 247 | element test_entity { |
| 248 | type: simulation |
| 249 | } |
| 250 | |
| 251 | element test_entity2 { |
| 252 | type: word doc |
| 253 | docRef: reqs/test_entity |
| 254 | } |
| 255 | |
| 256 | |
| 257 | test_entity - satisfies -> test_req2 |
| 258 | test_req - traces -> test_req2 |
| 259 | test_req - contains -> test_req3 |
| 260 | test_req <- copies - test_entity2 |
| 261 | </pre> |
| 262 | |
| 263 | <pre class="mermaid" class="width height"> |
| 264 | gitGraph: |
| 265 | commit |
| 266 | branch hotfix |
| 267 | checkout hotfix |
| 268 | commit |
| 269 | branch develop |
| 270 | checkout develop |
| 271 | commit id:"An id" tag:"A tag" |
| 272 | branch featureB |
| 273 | checkout featureB |
| 274 | commit type:HIGHLIGHT |
| 275 | checkout main |
| 276 | checkout hotfix |
| 277 | commit type:NORMAL |
| 278 | checkout develop |
| 279 | commit type:REVERSE |
| 280 | checkout featureB |
| 281 | commit |
| 282 | checkout main |
| 283 | merge hotfix |
| 284 | checkout featureB |
| 285 | commit |
| 286 | checkout develop |
| 287 | branch featureA |
| 288 | commit |
| 289 | checkout develop |
| 290 | merge hotfix |
| 291 | checkout featureA |
| 292 | commit |
| 293 | checkout featureB |
| 294 | commit |
| 295 | checkout develop |
| 296 | merge featureA |
| 297 | branch release |
| 298 | checkout release |
| 299 | commit |
| 300 | checkout main |
| 301 | commit |
| 302 | checkout release |
| 303 | merge main |
| 304 | checkout develop |
| 305 | merge release |
| 306 | </pre> |
| 307 | </div> |
| 308 | <script type="module"> |
| 309 | import mermaid from './mermaid.esm.mjs'; |
| 310 | mermaid.parseError = function (err, hash) { |
| 311 | // console.error('Mermaid error: ', err); |
| 312 | }; |
| 313 | mermaid.initialize({ |
| 314 | theme: 'neutral', |
| 315 | // arrowMarkerAbsolute: true, |
| 316 | // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', |
| 317 | logLevel: 0, |
| 318 | flowchart: { curve: 'cardinal', htmlLabels: false }, |
| 319 | // gantt: { axisFormat: '%m/%d/%Y' }, |
| 320 | sequence: { actorMargin: 50, showSequenceNumbers: true }, |
| 321 | // sequenceDiagram: { actorMargin: 300 } // deprecated |
| 322 | fontFamily: '"arial", sans-serif', |
| 323 | curve: 'cardinal', |
| 324 | securityLevel: 'strict', |
| 325 | }); |
| 326 | function callback() { |
| 327 | alert('It worked'); |
| 328 | } |
| 329 | </script> |
| 330 | </body> |
| 331 | </html> |
| 332 | |