| 6dd74de | | | 1 | > **Warning** |
| 6dd74de | | | 2 | > |
| 6dd74de | | | 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 6dd74de | | | 4 | > |
| 6dd74de | | | 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/accessibility.md](../../packages/mermaid/src/docs/config/accessibility.md). |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | # Accessibility Options |
| 6dd74de | | | 8 | |
| 6dd74de | | | 9 | ## Accessibility |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community. |
| 6dd74de | | | 12 | |
| 6dd74de | | | 13 | Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines). |
| 6dd74de | | | 14 | [Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/) |
| 6dd74de | | | 15 | |
| 6dd74de | | | 16 | Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description) |
| 6dd74de | | | 17 | |
| 6dd74de | | | 18 | ### aria-roledescription |
| 6dd74de | | | 19 | |
| 6dd74de | | | 20 | The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.) |
| 6dd74de | | | 21 | |
| 6dd74de | | | 22 | For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledescription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ |
| 6dd74de | | | 23 | |
| 6dd74de | | | 24 | ```html |
| 6dd74de | | | 25 | <svg |
| 6dd74de | | | 26 | aria-roledescription="stateDiagram" |
| 6dd74de | | | 27 | class="statediagram" |
| 6dd74de | | | 28 | xmlns="http://www.w3.org/2000/svg" |
| 6dd74de | | | 29 | width="100%" |
| 6dd74de | | | 30 | id="mermaid-1668720491568" |
| 6dd74de | | | 31 | ></svg> |
| 6dd74de | | | 32 | ``` |
| 6dd74de | | | 33 | |
| 6dd74de | | | 34 | ### Accessible Title and Description |
| 6dd74de | | | 35 | |
| 6dd74de | | | 36 | Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain. |
| 6dd74de | | | 37 | |
| 6dd74de | | | 38 | The accessible title and description will add `<title>` and `<desc>` elements within the SVG element and the [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) and [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) attributes in the SVG tag. |
| 6dd74de | | | 39 | |
| 6dd74de | | | 40 | Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = `chart-title-mermaid-1668725057758`) |
| 6dd74de | | | 41 | and described by the accessible description (id = `chart-desc-mermaid-1668725057758` ); |
| 6dd74de | | | 42 | and the accessible title element (text = "This is the accessible title") |
| 6dd74de | | | 43 | and the accessible description element (text = "This is an accessible description"). |
| 6dd74de | | | 44 | |
| 6dd74de | | | 45 | _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_ |
| 6dd74de | | | 46 | |
| 6dd74de | | | 47 | ```html |
| 6dd74de | | | 48 | <svg |
| 6dd74de | | | 49 | aria-labelledby="chart-title-mermaid-1668725057758" |
| 6dd74de | | | 50 | aria-describedby="chart-desc-mermaid-1668725057758" |
| 6dd74de | | | 51 | xmlns="http://www.w3.org/2000/svg" |
| 6dd74de | | | 52 | width="100%" |
| 6dd74de | | | 53 | id="mermaid-1668725057758" |
| 6dd74de | | | 54 | > |
| 6dd74de | | | 55 | <title id="chart-title-mermaid-1668725057758">This is the accessible title</title> |
| 6dd74de | | | 56 | <desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc> |
| 6dd74de | | | 57 | </svg> |
| 6dd74de | | | 58 | ``` |
| 6dd74de | | | 59 | |
| 6dd74de | | | 60 | Details for the syntax follow. |
| 6dd74de | | | 61 | |
| 6dd74de | | | 62 | #### accessible title |
| 6dd74de | | | 63 | |
| 6dd74de | | | 64 | The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title. |
| 6dd74de | | | 65 | The string value ends at the end of the line. (It can only be a single line.) |
| 6dd74de | | | 66 | |
| 6dd74de | | | 67 | Ex: `accTitle: This is a single line title` |
| 6dd74de | | | 68 | |
| 6dd74de | | | 69 | See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. |
| 6dd74de | | | 70 | |
| 6dd74de | | | 71 | #### accessible description |
| 6dd74de | | | 72 | |
| 6dd74de | | | 73 | An accessible description can be 1 line long (a single line) or many lines long. |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | The **single line accessible description** is specified with the **accDescr** _keyword_, followed by a colon (`:`), followed by the string value for the description. |
| 6dd74de | | | 76 | |
| 6dd74de | | | 77 | Ex: `accDescr: This is a single line description.` |
| 6dd74de | | | 78 | |
| 6dd74de | | | 79 | A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`). |
| 6dd74de | | | 80 | |
| 6dd74de | | | 81 | Ex: |
| 6dd74de | | | 82 | |
| 6dd74de | | | 83 | ```markdown |
| 6dd74de | | | 84 | accDescr { |
| 6dd74de | | | 85 | This is a multiple line accessible description. |
| 6dd74de | | | 86 | It does not have a colon and is surrounded by curly brackets. |
| 6dd74de | | | 87 | } |
| 6dd74de | | | 88 | ``` |
| 6dd74de | | | 89 | |
| 6dd74de | | | 90 | See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated. |
| 6dd74de | | | 91 | |
| 6dd74de | | | 92 | #### accTitle and accDescr Usage Examples |
| 6dd74de | | | 93 | |
| 6dd74de | | | 94 | - Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions" |
| 6dd74de | | | 95 | |
| 6dd74de | | | 96 | ```mermaid-example |
| 6dd74de | | | 97 | graph LR |
| 6dd74de | | | 98 | accTitle: Big Decisions |
| 6dd74de | | | 99 | accDescr: Bob's Burgers process for making big decisions |
| 6dd74de | | | 100 | A[Identify Big Decision] --> B{Make Big Decision} |
| 6dd74de | | | 101 | B --> D[Be done] |
| 6dd74de | | | 102 | ``` |
| 6dd74de | | | 103 | |
| 6dd74de | | | 104 | ```mermaid |
| 6dd74de | | | 105 | graph LR |
| 6dd74de | | | 106 | accTitle: Big Decisions |
| 6dd74de | | | 107 | accDescr: Bob's Burgers process for making big decisions |
| 6dd74de | | | 108 | A[Identify Big Decision] --> B{Make Big Decision} |
| 6dd74de | | | 109 | B --> D[Be done] |
| 6dd74de | | | 110 | ``` |
| 6dd74de | | | 111 | |
| 6dd74de | | | 112 | Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ |
| 6dd74de | | | 113 | |
| 6dd74de | | | 114 | ```html |
| 6dd74de | | | 115 | <svg |
| 6dd74de | | | 116 | aria-labelledby="chart-title-mermaid_382ee221" |
| 6dd74de | | | 117 | aria-describedby="chart-desc-mermaid_382ee221" |
| 6dd74de | | | 118 | aria-roledescription="flowchart-v2" |
| 6dd74de | | | 119 | xmlns="http://www.w3.org/2000/svg" |
| 6dd74de | | | 120 | width="100%" |
| 6dd74de | | | 121 | id="mermaid_382ee221" |
| 6dd74de | | | 122 | > |
| 6dd74de | | | 123 | <title id="chart-title-mermaid_382ee221">Big decisions</title> |
| 6dd74de | | | 124 | <desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc> |
| 6dd74de | | | 125 | </svg> |
| 6dd74de | | | 126 | ``` |
| 6dd74de | | | 127 | |
| 6dd74de | | | 128 | - Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used |
| 6dd74de | | | 129 | for making very, very big decisions. |
| 6dd74de | | | 130 | This is actually a very simple flow: identify the big decision and then make the big decision." |
| 6dd74de | | | 131 | |
| 6dd74de | | | 132 | ```mermaid-example |
| 6dd74de | | | 133 | graph LR |
| 6dd74de | | | 134 | accTitle: Bob's Burger's Making Big Decisions |
| 6dd74de | | | 135 | accDescr { |
| 6dd74de | | | 136 | The official Bob's Burgers corporate processes that are used |
| 6dd74de | | | 137 | for making very, very big decisions. |
| 6dd74de | | | 138 | This is actually a very simple flow: identify the big decision and then make the big decision. |
| 6dd74de | | | 139 | } |
| 6dd74de | | | 140 | A[Identify Big Decision] --> B{Make Big Decision} |
| 6dd74de | | | 141 | B --> D[Be done] |
| 6dd74de | | | 142 | ``` |
| 6dd74de | | | 143 | |
| 6dd74de | | | 144 | ```mermaid |
| 6dd74de | | | 145 | graph LR |
| 6dd74de | | | 146 | accTitle: Bob's Burger's Making Big Decisions |
| 6dd74de | | | 147 | accDescr { |
| 6dd74de | | | 148 | The official Bob's Burgers corporate processes that are used |
| 6dd74de | | | 149 | for making very, very big decisions. |
| 6dd74de | | | 150 | This is actually a very simple flow: identify the big decision and then make the big decision. |
| 6dd74de | | | 151 | } |
| 6dd74de | | | 152 | A[Identify Big Decision] --> B{Make Big Decision} |
| 6dd74de | | | 153 | B --> D[Be done] |
| 6dd74de | | | 154 | ``` |
| 6dd74de | | | 155 | |
| 6dd74de | | | 156 | Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_ |
| 6dd74de | | | 157 | |
| 6dd74de | | | 158 | ```html |
| 6dd74de | | | 159 | <svg |
| 6dd74de | | | 160 | aria-labelledby="chart-title-mermaid_382ee221" |
| 6dd74de | | | 161 | aria-describedby="chart-desc-mermaid_382ee221" |
| 6dd74de | | | 162 | aria-roledescription="flowchart-v2" |
| 6dd74de | | | 163 | xmlns="http://www.w3.org/2000/svg" |
| 6dd74de | | | 164 | width="100%" |
| 6dd74de | | | 165 | id="mermaid_382ee221" |
| 6dd74de | | | 166 | > |
| 6dd74de | | | 167 | <title id="chart-title-mermaid_382ee221">Big decisions</title> |
| 6dd74de | | | 168 | <desc id="chart-desc-mermaid_382ee221"> |
| 6dd74de | | | 169 | The official Bob's Burgers corporate processes that are used for making very, very big |
| 6dd74de | | | 170 | decisions. This is actually a very simple flow: identify the big decision and then make the big |
| 6dd74de | | | 171 | decision. |
| 6dd74de | | | 172 | </desc> |
| 6dd74de | | | 173 | </svg> |
| 6dd74de | | | 174 | ``` |
| 6dd74de | | | 175 | |
| 6dd74de | | | 176 | #### Sample Code Snippets for other diagram types |
| 6dd74de | | | 177 | |
| 6dd74de | | | 178 | ##### Class Diagram |
| 6dd74de | | | 179 | |
| 6dd74de | | | 180 | ```mermaid-example |
| 6dd74de | | | 181 | classDiagram |
| 6dd74de | | | 182 | accTitle: My Class Diagram |
| 6dd74de | | | 183 | accDescr: My Class Diagram Description |
| 6dd74de | | | 184 | |
| 6dd74de | | | 185 | Vehicle <|-- Car |
| 6dd74de | | | 186 | ``` |
| 6dd74de | | | 187 | |
| 6dd74de | | | 188 | ```mermaid |
| 6dd74de | | | 189 | classDiagram |
| 6dd74de | | | 190 | accTitle: My Class Diagram |
| 6dd74de | | | 191 | accDescr: My Class Diagram Description |
| 6dd74de | | | 192 | |
| 6dd74de | | | 193 | Vehicle <|-- Car |
| 6dd74de | | | 194 | ``` |
| 6dd74de | | | 195 | |
| 6dd74de | | | 196 | ##### Entity Relationship Diagram |
| 6dd74de | | | 197 | |
| 6dd74de | | | 198 | ```mermaid-example |
| 6dd74de | | | 199 | erDiagram |
| 6dd74de | | | 200 | accTitle: My Entity Relationship Diagram |
| 6dd74de | | | 201 | accDescr: My Entity Relationship Diagram Description |
| 6dd74de | | | 202 | |
| 6dd74de | | | 203 | CUSTOMER ||--o{ ORDER : places |
| 6dd74de | | | 204 | ORDER ||--|{ LINE-ITEM : contains |
| 6dd74de | | | 205 | CUSTOMER }|..|{ DELIVERY-ADDRESS : uses |
| 6dd74de | | | 206 | |
| 6dd74de | | | 207 | ``` |
| 6dd74de | | | 208 | |
| 6dd74de | | | 209 | ```mermaid |
| 6dd74de | | | 210 | erDiagram |
| 6dd74de | | | 211 | accTitle: My Entity Relationship Diagram |
| 6dd74de | | | 212 | accDescr: My Entity Relationship Diagram Description |
| 6dd74de | | | 213 | |
| 6dd74de | | | 214 | CUSTOMER ||--o{ ORDER : places |
| 6dd74de | | | 215 | ORDER ||--|{ LINE-ITEM : contains |
| 6dd74de | | | 216 | CUSTOMER }|..|{ DELIVERY-ADDRESS : uses |
| 6dd74de | | | 217 | |
| 6dd74de | | | 218 | ``` |
| 6dd74de | | | 219 | |
| 6dd74de | | | 220 | ##### Gantt Chart |
| 6dd74de | | | 221 | |
| 6dd74de | | | 222 | ```mermaid-example |
| 6dd74de | | | 223 | gantt |
| 6dd74de | | | 224 | accTitle: My Gantt Chart Accessibility Title |
| 6dd74de | | | 225 | accDescr: My Gantt Chart Accessibility Description |
| 6dd74de | | | 226 | |
| 6dd74de | | | 227 | title A Gantt Diagram |
| 6dd74de | | | 228 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 229 | section Section |
| 6dd74de | | | 230 | A task :a1, 2014-01-01, 30d |
| 6dd74de | | | 231 | Another task :after a1 , 20d |
| 6dd74de | | | 232 | section Another |
| 6dd74de | | | 233 | Task in sec :2014-01-12 , 12d |
| 6dd74de | | | 234 | another task : 24d |
| 6dd74de | | | 235 | |
| 6dd74de | | | 236 | ``` |
| 6dd74de | | | 237 | |
| 6dd74de | | | 238 | ```mermaid |
| 6dd74de | | | 239 | gantt |
| 6dd74de | | | 240 | accTitle: My Gantt Chart Accessibility Title |
| 6dd74de | | | 241 | accDescr: My Gantt Chart Accessibility Description |
| 6dd74de | | | 242 | |
| 6dd74de | | | 243 | title A Gantt Diagram |
| 6dd74de | | | 244 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 245 | section Section |
| 6dd74de | | | 246 | A task :a1, 2014-01-01, 30d |
| 6dd74de | | | 247 | Another task :after a1 , 20d |
| 6dd74de | | | 248 | section Another |
| 6dd74de | | | 249 | Task in sec :2014-01-12 , 12d |
| 6dd74de | | | 250 | another task : 24d |
| 6dd74de | | | 251 | |
| 6dd74de | | | 252 | ``` |
| 6dd74de | | | 253 | |
| 6dd74de | | | 254 | ##### GitGraph |
| 6dd74de | | | 255 | |
| 6dd74de | | | 256 | ```mermaid-example |
| 6dd74de | | | 257 | gitGraph |
| 6dd74de | | | 258 | accTitle: My GitGraph Accessibility Title |
| 6dd74de | | | 259 | accDescr: My GitGraph Accessibility Description |
| 6dd74de | | | 260 | |
| 6dd74de | | | 261 | commit |
| 6dd74de | | | 262 | commit |
| 6dd74de | | | 263 | branch develop |
| 6dd74de | | | 264 | checkout develop |
| 6dd74de | | | 265 | commit |
| 6dd74de | | | 266 | commit |
| 6dd74de | | | 267 | checkout main |
| 6dd74de | | | 268 | merge develop |
| 6dd74de | | | 269 | commit |
| 6dd74de | | | 270 | commit |
| 6dd74de | | | 271 | |
| 6dd74de | | | 272 | ``` |
| 6dd74de | | | 273 | |
| 6dd74de | | | 274 | ```mermaid |
| 6dd74de | | | 275 | gitGraph |
| 6dd74de | | | 276 | accTitle: My GitGraph Accessibility Title |
| 6dd74de | | | 277 | accDescr: My GitGraph Accessibility Description |
| 6dd74de | | | 278 | |
| 6dd74de | | | 279 | commit |
| 6dd74de | | | 280 | commit |
| 6dd74de | | | 281 | branch develop |
| 6dd74de | | | 282 | checkout develop |
| 6dd74de | | | 283 | commit |
| 6dd74de | | | 284 | commit |
| 6dd74de | | | 285 | checkout main |
| 6dd74de | | | 286 | merge develop |
| 6dd74de | | | 287 | commit |
| 6dd74de | | | 288 | commit |
| 6dd74de | | | 289 | |
| 6dd74de | | | 290 | ``` |
| 6dd74de | | | 291 | |
| 6dd74de | | | 292 | ##### Pie Chart |
| 6dd74de | | | 293 | |
| 6dd74de | | | 294 | ```mermaid-example |
| 6dd74de | | | 295 | pie |
| 6dd74de | | | 296 | accTitle: My Pie Chart Accessibility Title |
| 6dd74de | | | 297 | accDescr: My Pie Chart Accessibility Description |
| 6dd74de | | | 298 | |
| 6dd74de | | | 299 | title Key elements in Product X |
| 6dd74de | | | 300 | "Calcium" : 42.96 |
| 6dd74de | | | 301 | "Potassium" : 50.05 |
| 6dd74de | | | 302 | "Magnesium" : 10.01 |
| 6dd74de | | | 303 | "Iron" : 5 |
| 6dd74de | | | 304 | |
| 6dd74de | | | 305 | ``` |
| 6dd74de | | | 306 | |
| 6dd74de | | | 307 | ```mermaid |
| 6dd74de | | | 308 | pie |
| 6dd74de | | | 309 | accTitle: My Pie Chart Accessibility Title |
| 6dd74de | | | 310 | accDescr: My Pie Chart Accessibility Description |
| 6dd74de | | | 311 | |
| 6dd74de | | | 312 | title Key elements in Product X |
| 6dd74de | | | 313 | "Calcium" : 42.96 |
| 6dd74de | | | 314 | "Potassium" : 50.05 |
| 6dd74de | | | 315 | "Magnesium" : 10.01 |
| 6dd74de | | | 316 | "Iron" : 5 |
| 6dd74de | | | 317 | |
| 6dd74de | | | 318 | ``` |
| 6dd74de | | | 319 | |
| 6dd74de | | | 320 | ##### Requirement Diagram |
| 6dd74de | | | 321 | |
| 6dd74de | | | 322 | ```mermaid-example |
| 6dd74de | | | 323 | requirementDiagram |
| 6dd74de | | | 324 | accTitle: My Requirement Diagram |
| 6dd74de | | | 325 | accDescr: My Requirement Diagram Description |
| 6dd74de | | | 326 | |
| 6dd74de | | | 327 | requirement test_req { |
| 6dd74de | | | 328 | id: 1 |
| 6dd74de | | | 329 | text: the test text. |
| 6dd74de | | | 330 | risk: high |
| 6dd74de | | | 331 | verifymethod: test |
| 6dd74de | | | 332 | } |
| 6dd74de | | | 333 | |
| 6dd74de | | | 334 | element test_entity { |
| 6dd74de | | | 335 | type: simulation |
| 6dd74de | | | 336 | } |
| 6dd74de | | | 337 | |
| 6dd74de | | | 338 | test_entity - satisfies -> test_req |
| 6dd74de | | | 339 | |
| 6dd74de | | | 340 | ``` |
| 6dd74de | | | 341 | |
| 6dd74de | | | 342 | ```mermaid |
| 6dd74de | | | 343 | requirementDiagram |
| 6dd74de | | | 344 | accTitle: My Requirement Diagram |
| 6dd74de | | | 345 | accDescr: My Requirement Diagram Description |
| 6dd74de | | | 346 | |
| 6dd74de | | | 347 | requirement test_req { |
| 6dd74de | | | 348 | id: 1 |
| 6dd74de | | | 349 | text: the test text. |
| 6dd74de | | | 350 | risk: high |
| 6dd74de | | | 351 | verifymethod: test |
| 6dd74de | | | 352 | } |
| 6dd74de | | | 353 | |
| 6dd74de | | | 354 | element test_entity { |
| 6dd74de | | | 355 | type: simulation |
| 6dd74de | | | 356 | } |
| 6dd74de | | | 357 | |
| 6dd74de | | | 358 | test_entity - satisfies -> test_req |
| 6dd74de | | | 359 | |
| 6dd74de | | | 360 | ``` |
| 6dd74de | | | 361 | |
| 6dd74de | | | 362 | ##### Sequence Diagram |
| 6dd74de | | | 363 | |
| 6dd74de | | | 364 | ```mermaid-example |
| 6dd74de | | | 365 | sequenceDiagram |
| 6dd74de | | | 366 | accTitle: My Sequence Diagram |
| 6dd74de | | | 367 | accDescr: My Sequence Diagram Description |
| 6dd74de | | | 368 | |
| 6dd74de | | | 369 | Alice->>John: Hello John, how are you? |
| 6dd74de | | | 370 | John-->>Alice: Great! |
| 6dd74de | | | 371 | Alice-)John: See you later! |
| 6dd74de | | | 372 | ``` |
| 6dd74de | | | 373 | |
| 6dd74de | | | 374 | ```mermaid |
| 6dd74de | | | 375 | sequenceDiagram |
| 6dd74de | | | 376 | accTitle: My Sequence Diagram |
| 6dd74de | | | 377 | accDescr: My Sequence Diagram Description |
| 6dd74de | | | 378 | |
| 6dd74de | | | 379 | Alice->>John: Hello John, how are you? |
| 6dd74de | | | 380 | John-->>Alice: Great! |
| 6dd74de | | | 381 | Alice-)John: See you later! |
| 6dd74de | | | 382 | ``` |
| 6dd74de | | | 383 | |
| 6dd74de | | | 384 | ##### State Diagram |
| 6dd74de | | | 385 | |
| 6dd74de | | | 386 | ```mermaid-example |
| 6dd74de | | | 387 | stateDiagram |
| 6dd74de | | | 388 | accTitle: My State Diagram |
| 6dd74de | | | 389 | accDescr: My State Diagram Description |
| 6dd74de | | | 390 | |
| 6dd74de | | | 391 | s1 --> s2 |
| 6dd74de | | | 392 | |
| 6dd74de | | | 393 | ``` |
| 6dd74de | | | 394 | |
| 6dd74de | | | 395 | ```mermaid |
| 6dd74de | | | 396 | stateDiagram |
| 6dd74de | | | 397 | accTitle: My State Diagram |
| 6dd74de | | | 398 | accDescr: My State Diagram Description |
| 6dd74de | | | 399 | |
| 6dd74de | | | 400 | s1 --> s2 |
| 6dd74de | | | 401 | |
| 6dd74de | | | 402 | ``` |
| 6dd74de | | | 403 | |
| 6dd74de | | | 404 | ##### User Journey Diagram |
| 6dd74de | | | 405 | |
| 6dd74de | | | 406 | ```mermaid-example |
| 6dd74de | | | 407 | journey |
| 6dd74de | | | 408 | accTitle: My User Journey Diagram |
| 6dd74de | | | 409 | accDescr: My User Journey Diagram Description |
| 6dd74de | | | 410 | |
| 6dd74de | | | 411 | title My working day |
| 6dd74de | | | 412 | section Go to work |
| 6dd74de | | | 413 | Make tea: 5: Me |
| 6dd74de | | | 414 | Go upstairs: 3: Me |
| 6dd74de | | | 415 | Do work: 1: Me, Cat |
| 6dd74de | | | 416 | section Go home |
| 6dd74de | | | 417 | Go downstairs: 5: Me |
| 6dd74de | | | 418 | Sit down: 5: Me |
| 6dd74de | | | 419 | |
| 6dd74de | | | 420 | ``` |
| 6dd74de | | | 421 | |
| 6dd74de | | | 422 | ```mermaid |
| 6dd74de | | | 423 | journey |
| 6dd74de | | | 424 | accTitle: My User Journey Diagram |
| 6dd74de | | | 425 | accDescr: My User Journey Diagram Description |
| 6dd74de | | | 426 | |
| 6dd74de | | | 427 | title My working day |
| 6dd74de | | | 428 | section Go to work |
| 6dd74de | | | 429 | Make tea: 5: Me |
| 6dd74de | | | 430 | Go upstairs: 3: Me |
| 6dd74de | | | 431 | Do work: 1: Me, Cat |
| 6dd74de | | | 432 | section Go home |
| 6dd74de | | | 433 | Go downstairs: 5: Me |
| 6dd74de | | | 434 | Sit down: 5: Me |
| 6dd74de | | | 435 | |
| 6dd74de | | | 436 | ``` |