@groupby/ai-dev 0.5.10 → 0.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/package.json +1 -1
  2. package/teams/fhr-neowise/commands/address-pr.md +120 -0
  3. package/teams/fhr-neowise/commands/ready-pr.md +70 -0
  4. package/teams/fhr-neowise/commands/review-pr.md +111 -0
  5. package/teams/fhr-neowise/commands/tdd-implementation.md +86 -0
  6. package/teams/fhr-neowise/commands/write-plan.md +23 -0
  7. package/teams/fhr-neowise/commands/write-pr.md +21 -0
  8. package/teams/fhr-neowise/commands/write-spec.md +25 -0
  9. package/teams/fhr-neowise/skills/agent-routing/SKILL.md +72 -0
  10. package/teams/fhr-neowise/skills/code-review/SKILL.md +83 -0
  11. package/teams/fhr-neowise/skills/code-review/review-template.md +90 -0
  12. package/teams/fhr-neowise/skills/mermaid-diagram/SKILL.md +94 -0
  13. package/teams/fhr-neowise/skills/mermaid-diagram/references/BEST_PRACTICES.md +96 -0
  14. package/teams/fhr-neowise/skills/mermaid-diagram/references/architecture.md +434 -0
  15. package/teams/fhr-neowise/skills/mermaid-diagram/references/block.md +753 -0
  16. package/teams/fhr-neowise/skills/mermaid-diagram/references/c4.md +619 -0
  17. package/teams/fhr-neowise/skills/mermaid-diagram/references/classDiagram.md +1186 -0
  18. package/teams/fhr-neowise/skills/mermaid-diagram/references/config-configuration.md +72 -0
  19. package/teams/fhr-neowise/skills/mermaid-diagram/references/config-directives.md +342 -0
  20. package/teams/fhr-neowise/skills/mermaid-diagram/references/config-layouts.md +40 -0
  21. package/teams/fhr-neowise/skills/mermaid-diagram/references/config-math.md +96 -0
  22. package/teams/fhr-neowise/skills/mermaid-diagram/references/config-theming.md +246 -0
  23. package/teams/fhr-neowise/skills/mermaid-diagram/references/config-tidy-tree.md +89 -0
  24. package/teams/fhr-neowise/skills/mermaid-diagram/references/cynefin.md +279 -0
  25. package/teams/fhr-neowise/skills/mermaid-diagram/references/entityRelationshipDiagram.md +670 -0
  26. package/teams/fhr-neowise/skills/mermaid-diagram/references/eventmodeling.md +475 -0
  27. package/teams/fhr-neowise/skills/mermaid-diagram/references/examples.md +301 -0
  28. package/teams/fhr-neowise/skills/mermaid-diagram/references/flowchart.md +2116 -0
  29. package/teams/fhr-neowise/skills/mermaid-diagram/references/gantt.md +725 -0
  30. package/teams/fhr-neowise/skills/mermaid-diagram/references/gitgraph.md +2138 -0
  31. package/teams/fhr-neowise/skills/mermaid-diagram/references/ishikawa.md +66 -0
  32. package/teams/fhr-neowise/skills/mermaid-diagram/references/kanban.md +161 -0
  33. package/teams/fhr-neowise/skills/mermaid-diagram/references/mindmap.md +335 -0
  34. package/teams/fhr-neowise/skills/mermaid-diagram/references/packet.md +153 -0
  35. package/teams/fhr-neowise/skills/mermaid-diagram/references/pie.md +93 -0
  36. package/teams/fhr-neowise/skills/mermaid-diagram/references/quadrantChart.md +267 -0
  37. package/teams/fhr-neowise/skills/mermaid-diagram/references/radar.md +269 -0
  38. package/teams/fhr-neowise/skills/mermaid-diagram/references/railroad.md +337 -0
  39. package/teams/fhr-neowise/skills/mermaid-diagram/references/requirementDiagram.md +495 -0
  40. package/teams/fhr-neowise/skills/mermaid-diagram/references/sankey.md +415 -0
  41. package/teams/fhr-neowise/skills/mermaid-diagram/references/sequenceDiagram.md +1195 -0
  42. package/teams/fhr-neowise/skills/mermaid-diagram/references/stateDiagram.md +670 -0
  43. package/teams/fhr-neowise/skills/mermaid-diagram/references/timeline.md +571 -0
  44. package/teams/fhr-neowise/skills/mermaid-diagram/references/treeView.md +321 -0
  45. package/teams/fhr-neowise/skills/mermaid-diagram/references/treemap.md +353 -0
  46. package/teams/fhr-neowise/skills/mermaid-diagram/references/userJourney.md +42 -0
  47. package/teams/fhr-neowise/skills/mermaid-diagram/references/venn.md +134 -0
  48. package/teams/fhr-neowise/skills/mermaid-diagram/references/wardley.md +732 -0
  49. package/teams/fhr-neowise/skills/mermaid-diagram/references/xyChart.md +312 -0
  50. package/teams/fhr-neowise/skills/mermaid-diagram/references/zenuml.md +474 -0
  51. package/teams/fhr-neowise/skills/mermaid-diagram/scripts/sync_docs.py +138 -0
  52. package/teams/fhr-neowise/skills/pull-request-authoring/COMPLEX.template.md +52 -0
  53. package/teams/fhr-neowise/skills/pull-request-authoring/NON-CODE.template.md +15 -0
  54. package/teams/fhr-neowise/skills/pull-request-authoring/SIMPLE.template.md +20 -0
  55. package/teams/fhr-neowise/skills/pull-request-authoring/SKILL.md +102 -0
  56. package/teams/fhr-neowise/skills/spec-investigation/SKILL.md +139 -0
  57. package/teams/fhr-neowise/skills/spec-investigation/TEMPLATE.spec.md +74 -0
  58. package/teams/fhr-neowise/skills/tdd-workflow/SKILL.md +137 -0
  59. package/teams/fhr-neowise/skills/write-plan/SKILL.md +285 -0
  60. package/teams/fhr-neowise/skills/write-plan/assets/TEMPLATE.checklist.json +79 -0
  61. package/teams/fhr-neowise/skills/write-plan/assets/TEMPLATE.plan.md +158 -0
@@ -0,0 +1,72 @@
1
+ > **Warning**
2
+ >
3
+ > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4
+ >
5
+ > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md).
6
+
7
+ # Configuration
8
+
9
+ When mermaid starts, configuration is extracted to determine a configuration to be used for a diagram. There are 3 sources for configuration:
10
+
11
+ - The default configuration
12
+ - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
13
+ - Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
14
+ - Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
15
+
16
+ **The render config** is configuration that is used when rendering by applying these configurations.
17
+
18
+ ## Frontmatter config
19
+
20
+ The entire mermaid configuration (except the secure configs) can be overridden by the diagram author in the frontmatter of the diagram. The frontmatter is a YAML block at the top of the diagram.
21
+
22
+ ```mermaid-example
23
+ ---
24
+ title: Hello Title
25
+ config:
26
+ theme: base
27
+ themeVariables:
28
+ primaryColor: "#00ff00"
29
+ ---
30
+ flowchart
31
+ Hello --> World
32
+
33
+ ```
34
+
35
+ ```mermaid
36
+ ---
37
+ title: Hello Title
38
+ config:
39
+ theme: base
40
+ themeVariables:
41
+ primaryColor: "#00ff00"
42
+ ---
43
+ flowchart
44
+ Hello --> World
45
+
46
+ ```
47
+
48
+ ## Theme configuration
49
+
50
+ ## Starting mermaid
51
+
52
+ ```mermaid-example
53
+ sequenceDiagram
54
+ Site->>mermaid: initialize
55
+ Site->>mermaid: content loaded
56
+ mermaid->>mermaidAPI: init
57
+ ```
58
+
59
+ ```mermaid
60
+ sequenceDiagram
61
+ Site->>mermaid: initialize
62
+ Site->>mermaid: content loaded
63
+ mermaid->>mermaidAPI: init
64
+ ```
65
+
66
+ ## Initialize
67
+
68
+ The initialize call is applied **only once**. It is called by the site integrator in order to override the default configuration at a site level.
69
+
70
+ ## configApi.reset
71
+
72
+ This method resets the configuration for a diagram to the overall site configuration, which is the configuration provided by the site integrator. Before each rendering of a diagram, reset is called at the very beginning.
@@ -0,0 +1,342 @@
1
+ > **Warning**
2
+ >
3
+ > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4
+ >
5
+ > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md).
6
+
7
+ # Directives
8
+
9
+ > **Warning**
10
+ > Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
11
+
12
+ ## Directives
13
+
14
+ Directives give a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
15
+
16
+ The significance of having directives is that you have them available while writing the diagram, and can modify the default global and diagram-specific configurations. So, directives are applied on top of the default configuration. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
17
+
18
+ While directives allow you to change most of the default configuration settings, there are some that are not available, for security reasons. Also, you have the _option to define the set of configurations_ that you wish to allow diagram authors to override with directives.
19
+
20
+ ## Types of Directives options
21
+
22
+ Mermaid basically supports two types of configuration options to be overridden by directives.
23
+
24
+ 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
25
+ - theme
26
+ - fontFamily
27
+ - logLevel
28
+ - securityLevel
29
+ - startOnLoad
30
+ - secure
31
+
32
+ 2. _Diagram-specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
33
+ For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alters whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
34
+
35
+ **NOTE:** Not all configuration options are listed here. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
36
+
37
+ > **Note**
38
+ > We plan to publish a complete list of top-level configurations & diagram-specific configurations with their possible values in the docs soon.
39
+
40
+ ## Declaring directives
41
+
42
+ Now that we have defined the types of configurations that are available, we can learn how to declare directives.
43
+ A directive always starts and ends with `%%` signs with directive text in between, like `%% {directive_text} %%`.
44
+
45
+ Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being _init_. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
46
+
47
+ The following code snippet shows the structure of a directive:
48
+
49
+ ```
50
+ %%{
51
+ init: {
52
+ "theme": "dark",
53
+ "fontFamily": "monospace",
54
+ "logLevel": "info",
55
+ "htmlLabels": true,
56
+ "flowchart": {
57
+ "curve": "linear"
58
+ },
59
+ "sequence": {
60
+ "mirrorActors": true
61
+ }
62
+ }
63
+ }%%
64
+ ```
65
+
66
+ You can also define the directives in a single line, like this:
67
+
68
+ ```
69
+ %%{init: { **insert configuration options here** } }%%
70
+ ```
71
+
72
+ For example, the following code snippet:
73
+
74
+ ```
75
+ %%{init: { "sequence": { "mirrorActors":false }}}%%
76
+ ```
77
+
78
+ **Notes:**
79
+ The JSON object that is passed as {**argument**} must be valid key value pairs and encased in quotation marks or it will be ignored.
80
+ Valid Key Value pairs can be found in config.
81
+
82
+ Example with a simple graph:
83
+
84
+ ```mermaid-example
85
+ %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
86
+ graph LR
87
+ A-->B
88
+ ```
89
+
90
+ ```mermaid
91
+ %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
92
+ graph LR
93
+ A-->B
94
+ ```
95
+
96
+ Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
97
+
98
+ Note: You can use 'init' or 'initialize' as both are acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed.
99
+
100
+ ```mermaid-example
101
+ %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
102
+ %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
103
+ ...
104
+ ```
105
+
106
+ ```mermaid
107
+ %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
108
+ %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
109
+ ...
110
+ ```
111
+
112
+ For example, parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
113
+
114
+ ```json
115
+ {
116
+ "logLevel": "fatal",
117
+ "theme": "dark",
118
+ "startOnLoad": true
119
+ }
120
+ ```
121
+
122
+ This will then be sent to `mermaid.initialize(...)` for rendering.
123
+
124
+ ## Directive Examples
125
+
126
+ Now that the concept of directives has been explained, let us see some more examples of directive usage:
127
+
128
+ ### Changing theme via directive
129
+
130
+ The following code snippet changes `theme` to `forest`:
131
+
132
+ `%%{init: { "theme": "forest" } }%%`
133
+
134
+ Possible theme values are: `default`, `base`, `dark`, `forest` and `neutral`.
135
+ Default Value is `default`.
136
+
137
+ Example:
138
+
139
+ ```mermaid-example
140
+ %%{init: { "theme": "forest" } }%%
141
+ graph TD
142
+ A(Forest) --> B[/Another/]
143
+ A --> C[End]
144
+ subgraph section
145
+ B
146
+ C
147
+ end
148
+
149
+ ```
150
+
151
+ ```mermaid
152
+ %%{init: { "theme": "forest" } }%%
153
+ graph TD
154
+ A(Forest) --> B[/Another/]
155
+ A --> C[End]
156
+ subgraph section
157
+ B
158
+ C
159
+ end
160
+
161
+ ```
162
+
163
+ ### Changing fontFamily via directive
164
+
165
+ The following code snippet changes fontFamily to Trebuchet MS, Verdana, Arial, Sans-Serif:
166
+
167
+ `%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%`
168
+
169
+ Example:
170
+
171
+ ```mermaid-example
172
+ %%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
173
+ graph TD
174
+ A(Forest) --> B[/Another/]
175
+ A --> C[End]
176
+ subgraph section
177
+ B
178
+ C
179
+ end
180
+
181
+ ```
182
+
183
+ ```mermaid
184
+ %%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
185
+ graph TD
186
+ A(Forest) --> B[/Another/]
187
+ A --> C[End]
188
+ subgraph section
189
+ B
190
+ C
191
+ end
192
+
193
+ ```
194
+
195
+ ### Changing logLevel via directive
196
+
197
+ The following code snippet changes `logLevel` to `2`:
198
+
199
+ `%%{init: { "logLevel": 2 } }%%`
200
+
201
+ Possible `logLevel` values are:
202
+
203
+ - `1` for _debug_,
204
+ - `2` for _info_
205
+ - `3` for _warn_
206
+ - `4` for _error_
207
+ - `5` for _only fatal errors_
208
+
209
+ Default Value is `5`.
210
+
211
+ Example:
212
+
213
+ ```mermaid-example
214
+ %%{init: { "logLevel": 2 } }%%
215
+ graph TD
216
+ A(Forest) --> B[/Another/]
217
+ A --> C[End]
218
+ subgraph section
219
+ B
220
+ C
221
+ end
222
+ ```
223
+
224
+ ```mermaid
225
+ %%{init: { "logLevel": 2 } }%%
226
+ graph TD
227
+ A(Forest) --> B[/Another/]
228
+ A --> C[End]
229
+ subgraph section
230
+ B
231
+ C
232
+ end
233
+ ```
234
+
235
+ ### Changing flowchart config via directive
236
+
237
+ Some common flowchart configurations are:
238
+
239
+ - ~~_htmlLabels_~~: Deprecated, [prefer setting this at the root level](/config/schema-docs/config#htmllabels).
240
+ - _curve_: linear/curve
241
+ - _diagramPadding_: number
242
+ - _useMaxWidth_: number
243
+
244
+ For a complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
245
+ _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
246
+
247
+ The following code snippet changes flowchart config:
248
+
249
+ ```
250
+ %%{init: { "htmlLabels": true, "flowchart": { "curve": "linear" } } }%%
251
+ ```
252
+
253
+ Here we are overriding only the flowchart config, and not the general config, setting `htmlLabels` to `true` and `curve` to `linear`.
254
+
255
+ > **Warning**
256
+ > **Deprecated:** `flowchart.htmlLabels` has been deprecated from (v11.12.3+). Use the global `htmlLabels` configuration instead. For example, instead of `"flowchart": { "htmlLabels": true }`, use `"htmlLabels": true` at the top level.
257
+
258
+ ```mermaid-example
259
+ %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
260
+ graph TD
261
+ A(Forest) --> B[/Another/]
262
+ A --> C[End]
263
+ subgraph section
264
+ B
265
+ C
266
+ end
267
+ ```
268
+
269
+ ```mermaid
270
+ %%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
271
+ graph TD
272
+ A(Forest) --> B[/Another/]
273
+ A --> C[End]
274
+ subgraph section
275
+ B
276
+ C
277
+ end
278
+ ```
279
+
280
+ ### Changing Sequence diagram config via directive
281
+
282
+ Some common sequence diagram configurations are:
283
+
284
+ - _width_: number
285
+ - _height_: number
286
+ - _messageAlign_: left, center, right
287
+ - _mirrorActors_: boolean
288
+ - _useMaxWidth_: boolean
289
+ - _rightAngles_: boolean
290
+ - _showSequenceNumbers_: boolean
291
+ - _wrap_: boolean
292
+
293
+ For a complete list of sequence diagram configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
294
+ _Soon we plan to publish a complete list of all diagram-specific configurations updated in the docs._
295
+
296
+ So, `wrap` by default has a value of `false` for sequence diagrams.
297
+
298
+ Let us see an example:
299
+
300
+ ```mermaid-example
301
+ sequenceDiagram
302
+
303
+ Alice->Bob: Hello Bob, how are you?
304
+ Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
305
+ Alice->Bob: Good.
306
+ Bob->Alice: Cool
307
+ ```
308
+
309
+ ```mermaid
310
+ sequenceDiagram
311
+
312
+ Alice->Bob: Hello Bob, how are you?
313
+ Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
314
+ Alice->Bob: Good.
315
+ Bob->Alice: Cool
316
+ ```
317
+
318
+ Now let us enable wrap for sequence diagrams.
319
+
320
+ The following code snippet changes sequence diagram config for `wrap` to `true`:
321
+
322
+ `%%{init: { "sequence": { "wrap": true} } }%%`
323
+
324
+ By applying that snippet to the diagram above, `wrap` will be enabled:
325
+
326
+ ```mermaid-example
327
+ %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
328
+ sequenceDiagram
329
+ Alice->Bob: Hello Bob, how are you?
330
+ Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
331
+ Alice->Bob: Good.
332
+ Bob->Alice: Cool
333
+ ```
334
+
335
+ ```mermaid
336
+ %%{init: { "sequence": { "wrap": true, "width":300 } } }%%
337
+ sequenceDiagram
338
+ Alice->Bob: Hello Bob, how are you?
339
+ Bob->Alice: Fine, how did your mother like the book I suggested? And did you catch the new book about alien invasion?
340
+ Alice->Bob: Good.
341
+ Bob->Alice: Cool
342
+ ```
@@ -0,0 +1,40 @@
1
+ > **Warning**
2
+ >
3
+ > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4
+ >
5
+ > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/layouts.md](../../packages/mermaid/src/docs/config/layouts.md).
6
+
7
+ # Layouts
8
+
9
+ This page lists the available layout algorithms supported in Mermaid diagrams.
10
+
11
+ ## Supported Layouts
12
+
13
+ - **elk**: [ELK (Eclipse Layout Kernel)](https://www.eclipse.org/elk/)
14
+ - **tidy-tree**: Tidy tree layout for hierarchical diagrams [Tidy Tree Configuration](/config/tidy-tree)
15
+ - **cose-bilkent**: Cose Bilkent layout for force-directed graphs
16
+ - **dagre**: Dagre layout for layered graphs
17
+
18
+ ## How to Use
19
+
20
+ You can specify the layout in your diagram's YAML config or initialization options. For example:
21
+
22
+ ```mermaid-example
23
+ ---
24
+ config:
25
+ layout: elk
26
+ ---
27
+ graph TD;
28
+ A-->B;
29
+ B-->C;
30
+ ```
31
+
32
+ ```mermaid
33
+ ---
34
+ config:
35
+ layout: elk
36
+ ---
37
+ graph TD;
38
+ A-->B;
39
+ B-->C;
40
+ ```
@@ -0,0 +1,96 @@
1
+ > **Warning**
2
+ >
3
+ > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4
+ >
5
+ > ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).
6
+
7
+ # Math Configuration (v10.9.0+)
8
+
9
+ Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
10
+
11
+ ## Usage
12
+
13
+ To render math within a diagram, surround the mathematical expression with the `$$` delimiter.
14
+
15
+ Note that at the moment, the only supported diagrams are below:
16
+
17
+ ### Flowcharts
18
+
19
+ ```mermaid-example
20
+ graph LR
21
+ A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
22
+ A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
23
+ B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
24
+ C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
25
+ ```
26
+
27
+ ```mermaid
28
+ graph LR
29
+ A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
30
+ A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
31
+ B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
32
+ C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
33
+ ```
34
+
35
+ ### Sequence
36
+
37
+ ```mermaid-example
38
+ sequenceDiagram
39
+ autonumber
40
+ participant 1 as $$\alpha$$
41
+ participant 2 as $$\beta$$
42
+ 1->>2: Solve: $$\sqrt{2+2}$$
43
+ 2-->>1: Answer: $$2$$
44
+ Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
45
+ ```
46
+
47
+ ```mermaid
48
+ sequenceDiagram
49
+ autonumber
50
+ participant 1 as $$\alpha$$
51
+ participant 2 as $$\beta$$
52
+ 1->>2: Solve: $$\sqrt{2+2}$$
53
+ 2-->>1: Answer: $$2$$
54
+ Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
55
+ ```
56
+
57
+ ## Legacy Support
58
+
59
+ By default, MathML is used for rendering mathematical expressions. If you have users on [unsupported browsers](https://caniuse.com/?search=mathml), `legacyMathML` can be set in the config to fall back to CSS rendering. Note that **you must provide KaTeX's stylesheets on your own** as they do not come bundled with Mermaid.
60
+
61
+ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
62
+
63
+ ```html
64
+ <!doctype html>
65
+ <!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
66
+ <html lang="en">
67
+ <head>
68
+ <!-- Please ensure the stylesheet's version matches with the KaTeX version in your package-lock -->
69
+ <link
70
+ rel="stylesheet"
71
+ href="https://cdn.jsdelivr.net/npm/katex@{version_number}/dist/katex.min.css"
72
+ integrity="sha384-{hash}"
73
+ crossorigin="anonymous"
74
+ />
75
+ </head>
76
+
77
+ <body>
78
+ <script type="module">
79
+ import mermaid from './mermaid.esm.mjs';
80
+ mermaid.initialize({
81
+ legacyMathML: true,
82
+ });
83
+ </script>
84
+ </body>
85
+ </html>
86
+ ```
87
+
88
+ ## Handling Rendering Differences
89
+
90
+ Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.
91
+
92
+ This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.
93
+
94
+ If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).
95
+
96
+ ![Image showing differences between Browsers](img/mathMLDifferences.png)