mirror of
				https://github.com/mermaid-js/mermaid.git
				synced 2025-11-03 20:34:20 +01:00 
			
		
		
		
	Merge branch 'develop' into pr/rhysd/4359
* develop: (453 commits) chore: Minor fixes chore: Build docs Use develop as base on develop branch. Update renovate json update link update announcement and blog pages Remove `--force` flag Tweak editor.bash update link chore: update browsers list Update integrations-community: add Drupal and module. Support Firefox Address review comments Change run symbol feat: Make the examples interactive in the documentation site. Add langium chore: update browsers list chore(deps): update all patch dependencies chore(deps): update all minor dependencies Update keywords and description ...
This commit is contained in:
		@@ -19,7 +19,7 @@ Mermaid will automatically insert the [aria-roledescription](#aria-roledescripti
 | 
			
		||||
 | 
			
		||||
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.)
 | 
			
		||||
 | 
			
		||||
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-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
 | 
			
		||||
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.):_
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<svg
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										86
									
								
								docs/config/math.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										86
									
								
								docs/config/math.md
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,86 @@
 | 
			
		||||
> **Warning**
 | 
			
		||||
>
 | 
			
		||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
			
		||||
>
 | 
			
		||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/math.md](../../packages/mermaid/src/docs/config/math.md).
 | 
			
		||||
 | 
			
		||||
# Math Configuration (v10.9.0+)
 | 
			
		||||
 | 
			
		||||
Mermaid supports rendering mathematical expressions through the [KaTeX](https://katex.org/) typesetter.
 | 
			
		||||
 | 
			
		||||
## Usage
 | 
			
		||||
 | 
			
		||||
To render math within a diagram, surround the mathematical expression with the `$$` delimiter.
 | 
			
		||||
 | 
			
		||||
Note that at the moment, the only supported diagrams are below:
 | 
			
		||||
 | 
			
		||||
### Flowcharts
 | 
			
		||||
 | 
			
		||||
```mermaid-example
 | 
			
		||||
 graph LR
 | 
			
		||||
      A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
 | 
			
		||||
      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
 | 
			
		||||
      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
 | 
			
		||||
      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
```mermaid
 | 
			
		||||
 graph LR
 | 
			
		||||
      A["$$x^2$$"] -->|"$$\sqrt{x+3}$$"| B("$$\frac{1}{2}$$")
 | 
			
		||||
      A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\pi r^2$$")
 | 
			
		||||
      B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
 | 
			
		||||
      C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### Sequence
 | 
			
		||||
 | 
			
		||||
```mermaid-example
 | 
			
		||||
sequenceDiagram
 | 
			
		||||
    autonumber
 | 
			
		||||
    participant 1 as $$\alpha$$
 | 
			
		||||
    participant 2 as $$\beta$$
 | 
			
		||||
    1->>2: Solve: $$\sqrt{2+2}$$
 | 
			
		||||
    2-->>1: Answer: $$2$$
 | 
			
		||||
    Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
```mermaid
 | 
			
		||||
sequenceDiagram
 | 
			
		||||
    autonumber
 | 
			
		||||
    participant 1 as $$\alpha$$
 | 
			
		||||
    participant 2 as $$\beta$$
 | 
			
		||||
    1->>2: Solve: $$\sqrt{2+2}$$
 | 
			
		||||
    2-->>1: Answer: $$2$$
 | 
			
		||||
    Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Legacy Support
 | 
			
		||||
 | 
			
		||||
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.
 | 
			
		||||
 | 
			
		||||
Example with legacy mode enabled (the latest version of KaTeX's stylesheet can be found on their [docs](https://katex.org/docs/browser.html)):
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<!DOCTYPE html>
 | 
			
		||||
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
 | 
			
		||||
<html lang="en">
 | 
			
		||||
  <head>
 | 
			
		||||
    <!-- Please ensure the stylesheet's version matches with the KaTeX version in your package-lock -->
 | 
			
		||||
    <link
 | 
			
		||||
      rel="stylesheet"
 | 
			
		||||
      href="https://cdn.jsdelivr.net/npm/katex@{version_number}/dist/katex.min.css"
 | 
			
		||||
      integrity="sha384-{hash}"
 | 
			
		||||
      crossorigin="anonymous"
 | 
			
		||||
    />
 | 
			
		||||
  </head>
 | 
			
		||||
 | 
			
		||||
  <body>
 | 
			
		||||
    <script type="module">
 | 
			
		||||
      import mermaid from './mermaid.esm.mjs';
 | 
			
		||||
      mermaid.initialize({
 | 
			
		||||
        legacyMathML: true,
 | 
			
		||||
      });
 | 
			
		||||
    </script>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
```
 | 
			
		||||
@@ -14,6 +14,9 @@
 | 
			
		||||
 | 
			
		||||
• `Optional` **suppressErrors**: `boolean`
 | 
			
		||||
 | 
			
		||||
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 | 
			
		||||
The `parseError` function will not be called.
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60)
 | 
			
		||||
[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										21
									
								
								docs/config/setup/interfaces/mermaidAPI.ParseResult.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										21
									
								
								docs/config/setup/interfaces/mermaidAPI.ParseResult.md
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,21 @@
 | 
			
		||||
> **Warning**
 | 
			
		||||
>
 | 
			
		||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 | 
			
		||||
>
 | 
			
		||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseResult.md).
 | 
			
		||||
 | 
			
		||||
# Interface: ParseResult
 | 
			
		||||
 | 
			
		||||
[mermaidAPI](../modules/mermaidAPI.md).ParseResult
 | 
			
		||||
 | 
			
		||||
## Properties
 | 
			
		||||
 | 
			
		||||
### diagramType
 | 
			
		||||
 | 
			
		||||
• **diagramType**: `string`
 | 
			
		||||
 | 
			
		||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
 | 
			
		||||
@@ -14,10 +14,6 @@
 | 
			
		||||
 | 
			
		||||
• `Optional` **bindFunctions**: (`element`: `Element`) => `void`
 | 
			
		||||
 | 
			
		||||
#### Type declaration
 | 
			
		||||
 | 
			
		||||
▸ (`element`): `void`
 | 
			
		||||
 | 
			
		||||
Bind function to be called after the svg has been inserted into the DOM.
 | 
			
		||||
This is necessary for adding event listeners to the elements in the svg.
 | 
			
		||||
 | 
			
		||||
@@ -27,6 +23,10 @@ div.innerHTML = svg;
 | 
			
		||||
bindFunctions?.(div); // To call bindFunctions only if it's present.
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
#### Type declaration
 | 
			
		||||
 | 
			
		||||
▸ (`element`): `void`
 | 
			
		||||
 | 
			
		||||
##### Parameters
 | 
			
		||||
 | 
			
		||||
| Name      | Type      |
 | 
			
		||||
@@ -39,7 +39,19 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
 | 
			
		||||
[mermaidAPI.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L94)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
### diagramType
 | 
			
		||||
 | 
			
		||||
• **diagramType**: `string`
 | 
			
		||||
 | 
			
		||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L84)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -51,4 +63,4 @@ The svg code for the rendered graph.
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)
 | 
			
		||||
[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
 | 
			
		||||
 
 | 
			
		||||
@@ -14,7 +14,7 @@
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
 | 
			
		||||
[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -9,6 +9,7 @@
 | 
			
		||||
## Interfaces
 | 
			
		||||
 | 
			
		||||
- [ParseOptions](../interfaces/mermaidAPI.ParseOptions.md)
 | 
			
		||||
- [ParseResult](../interfaces/mermaidAPI.ParseResult.md)
 | 
			
		||||
- [RenderResult](../interfaces/mermaidAPI.RenderResult.md)
 | 
			
		||||
 | 
			
		||||
## References
 | 
			
		||||
@@ -25,13 +26,13 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
 | 
			
		||||
[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
 | 
			
		||||
 | 
			
		||||
## Variables
 | 
			
		||||
 | 
			
		||||
### mermaidAPI
 | 
			
		||||
 | 
			
		||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<`boolean`> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
 | 
			
		||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
 | 
			
		||||
 | 
			
		||||
## mermaidAPI configuration defaults
 | 
			
		||||
 | 
			
		||||
@@ -97,7 +98,7 @@ mermaid.initialize(config);
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:621](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L621)
 | 
			
		||||
[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
 | 
			
		||||
 | 
			
		||||
## Functions
 | 
			
		||||
 | 
			
		||||
@@ -128,7 +129,7 @@ Return the last node appended
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 | 
			
		||||
[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -154,7 +155,7 @@ the cleaned up svgCode
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209)
 | 
			
		||||
[mermaidAPI.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -179,7 +180,7 @@ the string with all the user styles
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
 | 
			
		||||
[mermaidAPI.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -202,7 +203,7 @@ the string with all the user styles
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
 | 
			
		||||
[mermaidAPI.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -229,7 +230,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124)
 | 
			
		||||
[mermaidAPI.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L138)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -255,7 +256,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 | 
			
		||||
[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254)
 | 
			
		||||
 | 
			
		||||
---
 | 
			
		||||
 | 
			
		||||
@@ -280,4 +281,4 @@ Remove any existing elements from the given document
 | 
			
		||||
 | 
			
		||||
#### Defined in
 | 
			
		||||
 | 
			
		||||
[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313)
 | 
			
		||||
[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
 | 
			
		||||
 
 | 
			
		||||
@@ -65,7 +65,7 @@ Example of `init` directive setting the `theme` to `forest`:
 | 
			
		||||
    a --> b
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
 | 
			
		||||
> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
 | 
			
		||||
 | 
			
		||||
## Customizing Themes with `themeVariables`
 | 
			
		||||
 | 
			
		||||
@@ -250,7 +250,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | 
			
		||||
| actorBkg              | mainBkg                        | Actor Background Color      |
 | 
			
		||||
| actorBorder           | primaryBorderColor             | Actor Border Color          |
 | 
			
		||||
| actorTextColor        | primaryTextColor               | Actor Text Color            |
 | 
			
		||||
| actorLineColor        | grey                           | Actor Line Color            |
 | 
			
		||||
| actorLineColor        | actorBorder                    | Actor Line Color            |
 | 
			
		||||
| signalColor           | textColor                      | Signal Color                |
 | 
			
		||||
| signalTextColor       | textColor                      | Signal Text Color           |
 | 
			
		||||
| labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |
 | 
			
		||||
 
 | 
			
		||||
@@ -64,7 +64,7 @@ Example:
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<script type="module">
 | 
			
		||||
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
 | 
			
		||||
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
 | 
			
		||||
</script>
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
@@ -83,7 +83,7 @@ Example:
 | 
			
		||||
      B-->D(fa:fa-spinner);
 | 
			
		||||
    </pre>
 | 
			
		||||
    <script type="module">
 | 
			
		||||
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
 | 
			
		||||
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
 | 
			
		||||
    </script>
 | 
			
		||||
  </body>
 | 
			
		||||
</html>
 | 
			
		||||
@@ -331,15 +331,17 @@ module.exports = (options) ->
 | 
			
		||||
 | 
			
		||||
## Advanced usage
 | 
			
		||||
 | 
			
		||||
**Syntax validation without rendering (Work in Progress)**
 | 
			
		||||
### Syntax validation without rendering
 | 
			
		||||
 | 
			
		||||
The **mermaid.parse(txt)** function validates graph definitions without rendering a graph. **[This function is still a work in progress](https://github.com/mermaid-js/mermaid/issues/1066), find alternatives below.**
 | 
			
		||||
The `mermaid.parse(text, parseOptions)` function validates graph definitions without rendering a graph.
 | 
			
		||||
 | 
			
		||||
The function **mermaid.parse(txt)**, takes a text string as an argument and returns true if the definition follows mermaid's syntax and
 | 
			
		||||
false if it does not. The parseError function will be called when the parse function returns false.
 | 
			
		||||
The function `mermaid.parse(text, parseOptions)`, takes a text string as an argument and returns `{ diagramType: string }` if the definition follows mermaid's syntax.
 | 
			
		||||
 | 
			
		||||
When the parser encounters invalid syntax the **mermaid.parseError** function is called. It is possible to override this
 | 
			
		||||
function in order to handle the error in an application-specific way.
 | 
			
		||||
If the definition is invalid, the function returns `false` if `parseOptions.suppressErrors` is set to `true`. Otherwise, it throws an error.
 | 
			
		||||
 | 
			
		||||
The parseError function will be called when the parse function throws an error. It will not be called if `parseOptions.suppressErrors` is set to `true`.
 | 
			
		||||
 | 
			
		||||
It is possible to override this function in order to handle the error in an application-specific way.
 | 
			
		||||
 | 
			
		||||
The code-example below in meta code illustrates how this could work:
 | 
			
		||||
 | 
			
		||||
@@ -359,26 +361,10 @@ const textFieldUpdated = async function () {
 | 
			
		||||
bindEventHandler('change', 'code', textFieldUpdated);
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
**Alternative to mermaid.parse():**
 | 
			
		||||
One effective and more future-proof method of validating your graph definitions, is to paste and render them via the [Mermaid Live Editor](https://mermaid.live/). This will ensure that your code is compliant with the syntax of Mermaid's most recent version.
 | 
			
		||||
 | 
			
		||||
## Configuration
 | 
			
		||||
 | 
			
		||||
Mermaid takes a number of options which lets you tweak the rendering of the diagrams. Currently there are three ways of
 | 
			
		||||
setting the options in mermaid.
 | 
			
		||||
 | 
			
		||||
1.  Instantiation of the configuration using the initialize call
 | 
			
		||||
2.  _Using the global mermaid object_ - **Deprecated**
 | 
			
		||||
3.  _using the global mermaid_config object_ - **Deprecated**
 | 
			
		||||
4.  Instantiation of the configuration using the **mermaid.init** call- **Deprecated**
 | 
			
		||||
 | 
			
		||||
The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
 | 
			
		||||
configuration objects are described [in the mermaidAPI documentation](./setup/README.md).
 | 
			
		||||
 | 
			
		||||
## Using the `mermaidAPI.initialize`/`mermaid.initialize` call
 | 
			
		||||
 | 
			
		||||
The future proof way of setting the configuration is by using the initialization call to mermaid or mermaidAPI depending
 | 
			
		||||
on what kind of integration you use.
 | 
			
		||||
You can pass the required configuration to the `mermaid.initialize` call. This is the preferred way of configuring mermaid.
 | 
			
		||||
The list of configuration objects are described [in the mermaidAPI documentation](./setup/README.md).
 | 
			
		||||
 | 
			
		||||
```html
 | 
			
		||||
<script type="module">
 | 
			
		||||
@@ -408,31 +394,7 @@ mermaid.startOnLoad = true;
 | 
			
		||||
> **Warning**
 | 
			
		||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
 | 
			
		||||
 | 
			
		||||
## Using the mermaid_config
 | 
			
		||||
 | 
			
		||||
It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
 | 
			
		||||
approach are:
 | 
			
		||||
 | 
			
		||||
- mermaid_config.startOnLoad
 | 
			
		||||
- mermaid_config.htmlLabels
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
mermaid_config.startOnLoad = true;
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
> **Warning**
 | 
			
		||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
 | 
			
		||||
 | 
			
		||||
## Using the mermaid.init call
 | 
			
		||||
 | 
			
		||||
To set some configuration via the mermaid object. The two parameters that are supported using this approach are:
 | 
			
		||||
 | 
			
		||||
- mermaid_config.startOnLoad
 | 
			
		||||
- mermaid_config.htmlLabels
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
mermaid_config.startOnLoad = true;
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
> **Warning**
 | 
			
		||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
 | 
			
		||||
<!---
 | 
			
		||||
cspell:locale en,en-gb
 | 
			
		||||
cspell:ignore pumbaa
 | 
			
		||||
--->
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user