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