marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-17 03:04:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into saurabh/refactor-fontawesome-icon-usage

Browse Source
This commit is contained in:
Sidharth Vinod
2025-04-14 20:15:48 -07:00
committed by GitHub
parent a31adc63a9 4467fd4363
commit 24f23efdad
269 changed files with 14331 additions and 8408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/community/contributing.md
View File

@@ -239,6 +239,22 @@ Code is the heart of every software project. We strive to make it better. Who if
The core of Mermaid is located under `packages/mermaid/src`.
### Building Mermaid Locally
**Host**
```bash
pnpm run build
```
**Docker**
```bash
./run build
```
This will build the Mermaid library and the documentation site.
### Running Mermaid Locally
**Host**

4
docs/community/intro.md
View File

@@ -43,7 +43,7 @@ Where to start:
- You could work on a new feature! [These](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Development%22+label%3A%22Type%3A+Enhancement%22+label%3A%22Status%3A+Approved%22+) are some ideas!
- You could confirm the bugs in [these issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Triage%22++label%3A%22Type%3A+Bug+%2F+Error%22).
[You can join our Discord server if you want closer contact!](https://discord.gg/AgrbSrBer3)
[You can join our Discord server if you want closer contact!](https://discord.gg/sKeNQX4Wtj)
## A Question Or a Suggestion?
@@ -55,6 +55,6 @@ If you have faced a vulnerability [report it to us](./security.md).
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
[You can join our Discord server if you want closer contact!](https://discord.gg/AgrbSrBer3)
[You can join our Discord server if you want closer contact!](https://discord.gg/sKeNQX4Wtj)
![Image of superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)

10
docs/config/setup/README.md
View File

@@ -4,10 +4,14 @@
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/README.md](../../../packages/mermaid/src/docs/config/setup/README.md).
**mermaid**
---
# mermaid
## Modules
- [config](modules/config.md)
- [defaultConfig](modules/defaultConfig.md)
- [mermaid](modules/mermaid.md)
- [config](config/README.md)
- [defaultConfig](defaultConfig/README.md)
- [mermaid](mermaid/README.md)

171
docs/config/setup/classes/mermaid.UnknownDiagramError.md
View File

@@ -1,171 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md](../../../../packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md).
# Class: UnknownDiagramError
[mermaid](../modules/mermaid.md).UnknownDiagramError
## Hierarchy
- `Error`
↳ **`UnknownDiagramError`**
## Constructors
### constructor
• **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
#### Parameters
| Name | Type |
| :-------- | :------- |
| `message` | `string` |
#### Returns
[`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
#### Overrides
Error.constructor
#### Defined in
[packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
## Properties
### cause
• `Optional` **cause**: `unknown`
#### Inherited from
Error.cause
#### Defined in
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es2022.error.d.ts:24
---
### message
• **message**: `string`
#### Inherited from
Error.message
#### Defined in
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1077
---
### name
• **name**: `string`
#### Inherited from
Error.name
#### Defined in
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1076
---
### stack
• `Optional` **stack**: `string`
#### Inherited from
Error.stack
#### Defined in
node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1078
---
### prepareStackTrace
▪ `Static` `Optional` **prepareStackTrace**: (`err`: `Error`, `stackTraces`: `CallSite`\[]) => `any`
Optional override for formatting stack traces
**`See`**
<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
#### Type declaration
▸ (`err`, `stackTraces`): `any`
##### Parameters
| Name | Type |
| :------------ | :------------ |
| `err` | `Error` |
| `stackTraces` | `CallSite`\[] |
##### Returns
`any`
#### Inherited from
Error.prepareStackTrace
#### Defined in
node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:98
---
### stackTraceLimit
▪ `Static` **stackTraceLimit**: `number`
#### Inherited from
Error.stackTraceLimit
#### Defined in
node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:100
## Methods
### captureStackTrace
▸ **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`
Create .stack property on a target object
#### Parameters
| Name | Type |
| :---------------- | :--------- |
| `targetObject` | `object` |
| `constructorOpt?` | `Function` |
#### Returns
`void`
#### Inherited from
Error.captureStackTrace
#### Defined in
node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:91

28
docs/config/setup/config/README.md Normal file
View File

@@ -0,0 +1,28 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/README.md](../../../../packages/mermaid/src/docs/config/setup/config/README.md).
[**mermaid**](../README.md)
---
# config
## Variables
- [defaultConfig](variables/defaultConfig.md)
## Functions
- [addDirective](functions/addDirective.md)
- [getConfig](functions/getConfig.md)
- [getSiteConfig](functions/getSiteConfig.md)
- [reset](functions/reset.md)
- [sanitize](functions/sanitize.md)
- [saveConfigFromInitialize](functions/saveConfigFromInitialize.md)
- [setConfig](functions/setConfig.md)
- [setSiteConfig](functions/setSiteConfig.md)
- [updateCurrentConfig](functions/updateCurrentConfig.md)
- [updateSiteConfig](functions/updateSiteConfig.md)

29
docs/config/setup/config/functions/addDirective.md Normal file
View File

@@ -0,0 +1,29 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/addDirective.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/addDirective.md).
[**mermaid**](../../README.md)
---
# Function: addDirective()
> **addDirective**(`directive`): `void`
Defined in: [packages/mermaid/src/config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
Pushes in a directive to the configuration
## Parameters
### directive
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The directive to push in
## Returns
`void`

29
docs/config/setup/config/functions/getConfig.md Normal file
View File

@@ -0,0 +1,29 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getConfig.md).
[**mermaid**](../../README.md)
---
# Function: getConfig()
> **getConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
## getConfig
| Function | Description | Type | Return Values |
| --------- | ------------------------- | ----------- | ------------------------------ |
| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
**Notes**: Avoid calling this function repeatedly. Instead, store the result in a variable and use it, and pass it down to function calls.
## Returns
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The currentConfig

29
docs/config/setup/config/functions/getSiteConfig.md Normal file
View File

@@ -0,0 +1,29 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/getSiteConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/getSiteConfig.md).
[**mermaid**](../../README.md)
---
# Function: getSiteConfig()
> **getSiteConfig**(): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
## getSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
**Notes**: Returns **any** values in siteConfig.
## Returns
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The siteConfig

42
docs/config/setup/config/functions/reset.md Normal file
View File

@@ -0,0 +1,42 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/reset.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/reset.md).
[**mermaid**](../../README.md)
---
# Function: reset()
> **reset**(`config`): `void`
Defined in: [packages/mermaid/src/config.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L221)
## reset
| Function | Description | Type | Required | Values |
| -------- | ---------------------------- | ----------- | -------- | ------ |
| reset | Resets currentConfig to conf | Put Request | Required | None |
## conf
| Parameter | Description | Type | Required | Values |
| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
## Parameters
### config
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md) = `siteConfig`
base set of values, which currentConfig could be **reset** to.
Defaults to the current siteConfig (e.g returned by [getSiteConfig](getSiteConfig.md)).
## Returns
`void`

36
docs/config/setup/config/functions/sanitize.md Normal file
View File

@@ -0,0 +1,36 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/sanitize.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/sanitize.md).
[**mermaid**](../../README.md)
---
# Function: sanitize()
> **sanitize**(`options`): `void`
Defined in: [packages/mermaid/src/config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
## sanitize
| Function | Description | Type | Values |
| -------- | -------------------------------------- | ----------- | ------ |
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
options in-place
## Parameters
### options
`any`
The potential setConfig parameter
## Returns
`void`

25
docs/config/setup/config/functions/saveConfigFromInitialize.md Normal file
View File

@@ -0,0 +1,25 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/saveConfigFromInitialize.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/saveConfigFromInitialize.md).
[**mermaid**](../../README.md)
---
# Function: saveConfigFromInitialize()
> **saveConfigFromInitialize**(`conf`): `void`
Defined in: [packages/mermaid/src/config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
## Parameters
### conf
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
## Returns
`void`

39
docs/config/setup/config/functions/setConfig.md Normal file
View File

@@ -0,0 +1,39 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/setConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/setConfig.md).
[**mermaid**](../../README.md)
---
# Function: setConfig()
> **setConfig**(`conf`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
## setConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
corresponding siteConfig value.
## Parameters
### conf
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The potential currentConfig
## Returns
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The currentConfig merged with the sanitized conf

40
docs/config/setup/config/functions/setSiteConfig.md Normal file
View File

@@ -0,0 +1,40 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/setSiteConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/setSiteConfig.md).
[**mermaid**](../../README.md)
---
# Function: setSiteConfig()
> **setSiteConfig**(`conf`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
## setSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
function _Default value: At default, will mirror Global Config_
## Parameters
### conf
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The base currentConfig to use as siteConfig
## Returns
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
The new siteConfig

29
docs/config/setup/config/functions/updateCurrentConfig.md Normal file
View File

@@ -0,0 +1,29 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/updateCurrentConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/updateCurrentConfig.md).
[**mermaid**](../../README.md)
---
# Function: updateCurrentConfig()
> **updateCurrentConfig**(`siteCfg`, `_directives`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
## Parameters
### siteCfg
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
### \_directives
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)\[]
## Returns
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)

25
docs/config/setup/config/functions/updateSiteConfig.md Normal file
View File

@@ -0,0 +1,25 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/functions/updateSiteConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/functions/updateSiteConfig.md).
[**mermaid**](../../README.md)
---
# Function: updateSiteConfig()
> **updateSiteConfig**(`conf`): [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
## Parameters
### conf
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
## Returns
[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)

15
docs/config/setup/config/variables/defaultConfig.md Normal file
View File

@@ -0,0 +1,15 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/config/variables/defaultConfig.md](../../../../../packages/mermaid/src/docs/config/setup/config/variables/defaultConfig.md).
[**mermaid**](../../README.md)
---
# Variable: defaultConfig
> `const` **defaultConfig**: [`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)
Defined in: [packages/mermaid/src/config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)

16
docs/config/setup/defaultConfig/README.md Normal file
View File

@@ -0,0 +1,16 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/defaultConfig/README.md](../../../../packages/mermaid/src/docs/config/setup/defaultConfig/README.md).
[**mermaid**](../README.md)
---
# defaultConfig
## Variables
- [configKeys](variables/configKeys.md)
- [default](variables/default.md)

15
docs/config/setup/defaultConfig/variables/configKeys.md Normal file
View File

@@ -0,0 +1,15 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/defaultConfig/variables/configKeys.md](../../../../../packages/mermaid/src/docs/config/setup/defaultConfig/variables/configKeys.md).
[**mermaid**](../../README.md)
---
# Variable: configKeys
> `const` **configKeys**: `Set`<`string`>
Defined in: [packages/mermaid/src/defaultConfig.ts:274](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L274)

21
docs/config/setup/defaultConfig/variables/default.md Normal file
View 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/defaultConfig/variables/default.md](../../../../../packages/mermaid/src/docs/config/setup/defaultConfig/variables/default.md).
[**mermaid**](../../README.md)
---
# Variable: default
> `const` **default**: `RequiredDeep`<[`MermaidConfig`](../../mermaid/interfaces/MermaidConfig.md)>
Defined in: [packages/mermaid/src/defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
Default mermaid configuration options.
Please see the Mermaid config JSON Schema for the default JSON values.
Non-JSON JS default values are listed in this file, e.g. functions, or
`undefined` (explicitly set so that `configKeys` finds them).

49
docs/config/setup/interfaces/mermaid.DetailedError.md
View File

@@ -1,49 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md).
# Interface: DetailedError
[mermaid](../modules/mermaid.md).DetailedError
## Properties
### error
• `Optional` **error**: `any`
#### Defined in
[packages/mermaid/src/utils.ts:785](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L785)
---
### hash
• **hash**: `any`
#### Defined in
[packages/mermaid/src/utils.ts:783](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L783)
---
### message
• `Optional` **message**: `string`
#### Defined in
[packages/mermaid/src/utils.ts:786](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L786)
---
### str
• **str**: `string`
#### Defined in
[packages/mermaid/src/utils.ts:781](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L781)

39
docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md
View File

@@ -1,39 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md).
# Interface: ExternalDiagramDefinition
[mermaid](../modules/mermaid.md).ExternalDiagramDefinition
## Properties
### detector
• **detector**: `DiagramDetector`
#### Defined in
[packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
---
### id
• **id**: `string`
#### Defined in
[packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
---
### loader
• **loader**: `DiagramLoader`
#### Defined in
[packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

43
docs/config/setup/interfaces/mermaid.LayoutData.md
View File

@@ -1,43 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutData.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutData.md).
# Interface: LayoutData
[mermaid](../modules/mermaid.md).LayoutData
## Indexable
▪ \[key: `string`]: `any`
## Properties
### config
• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
#### Defined in
[packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
---
### edges
• **edges**: `Edge`\[]
#### Defined in
[packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
---
### nodes
• **nodes**: `Node`\[]
#### Defined in
[packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

39
docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
View File

@@ -1,39 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md).
# Interface: LayoutLoaderDefinition
[mermaid](../modules/mermaid.md).LayoutLoaderDefinition
## Properties
### algorithm
• `Optional` **algorithm**: `string`
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
---
### loader
• **loader**: `LayoutLoader`
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
---
### name
• **name**: `string`
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

388
docs/config/setup/interfaces/mermaid.Mermaid.md
View File

@@ -1,388 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md).
# Interface: Mermaid
[mermaid](../modules/mermaid.md).Mermaid
## Properties
### contentLoaded
• **contentLoaded**: () => `void`
#### Type declaration
▸ (): `void`
\##contentLoaded Callback function that is called when page is loaded. This functions fetches
configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
page.
##### Returns
`void`
#### Defined in
[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
---
### detectType
• **detectType**: (`text`: `string`, `config?`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`
#### Type declaration
▸ (`text`, `config?`): `string`
Detects the type of the graph text.
Takes into consideration the possible existence of an `%%init` directive
##### Parameters
| Name | Type | Description |
| :-------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `text` | `string` | The text defining the graph. For example: `mermaid %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% graph LR a-->b b-->c c-->d d-->e e-->f f-->g g-->h ` |
| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) | The mermaid config. |
##### Returns
`string`
A graph definition key
#### Defined in
[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
---
### init
• **init**: (`config?`: [`MermaidConfig`](mermaid.MermaidConfig.md), `nodes?`: `string` | `HTMLElement` | `NodeListOf`<`HTMLElement`>, `callback?`: (`id`: `string`) => `unknown`) => `Promise`<`void`>
**`Deprecated`**
Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run) instead.
#### Type declaration
▸ (`config?`, `nodes?`, `callback?`): `Promise`<`void`>
##### Parameters
| Name | Type |
| :---------- | :------------------------------------------------------- |
| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) |
| `nodes?` | `string` \| `HTMLElement` \| `NodeListOf`<`HTMLElement`> |
| `callback?` | (`id`: `string`) => `unknown` |
##### Returns
`Promise`<`void`>
#### Defined in
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
---
### initialize
• **initialize**: (`config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void`
#### Type declaration
▸ (`config`): `void`
Used to set configurations for mermaid.
This function should be called before the run function.
##### Parameters
| Name | Type | Description |
| :------- | :------------------------------------------ | :-------------------------------- |
| `config` | [`MermaidConfig`](mermaid.MermaidConfig.md) | Configuration object for mermaid. |
##### Returns
`void`
#### Defined in
[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
---
### mermaidAPI
• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
**`Deprecated`**
Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
#### Defined in
[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
---
### parse
• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
#### Type declaration
▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
Parse the text and validate the syntax.
##### Parameters
| Name | Type | Description |
| :------------- | :----------------------------------------------------------------------- | :------------------------------ |
| `text` | `string` | The mermaid diagram definition. |
| `parseOptions` | [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` } | Options for parsing. |
##### Returns
`Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
**`See`**
[ParseOptions](mermaid.ParseOptions.md)
**`Throws`**
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
▸ (`text`, `parseOptions?`): `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
##### Parameters
| Name | Type |
| :-------------- | :---------------------------------------- |
| `text` | `string` |
| `parseOptions?` | [`ParseOptions`](mermaid.ParseOptions.md) |
##### Returns
`Promise`<[`ParseResult`](mermaid.ParseResult.md)>
#### Defined in
[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
---
### parseError
• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
#### Defined in
[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
---
### registerExternalDiagrams
• **registerExternalDiagrams**: (`diagrams`: [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[], `opts`: { `lazyLoad?`: `boolean` = true }) => `Promise`<`void`>
#### Type declaration
▸ (`diagrams`, `opts?`): `Promise`<`void`>
Used to register external diagram types.
##### Parameters
| Name | Type | Default value | Description |
| :--------------- | :--------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------- |
| `diagrams` | [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[] | `undefined` | Array of [ExternalDiagramDefinition](mermaid.ExternalDiagramDefinition.md). |
| `opts` | `Object` | `{}` | If opts.lazyLoad is false, the diagrams will be loaded immediately. |
| `opts.lazyLoad?` | `boolean` | `true` | - |
##### Returns
`Promise`<`void`>
#### Defined in
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
---
### registerIconPacks
• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void`
#### Type declaration
▸ (`iconLoaders`): `void`
##### Parameters
| Name | Type |
| :------------ | :-------------- |
| `iconLoaders` | `IconLoader`\[] |
##### Returns
`void`
#### Defined in
[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
---
### registerLayoutLoaders
• **registerLayoutLoaders**: (`loaders`: [`LayoutLoaderDefinition`](mermaid.LayoutLoaderDefinition.md)\[]) => `void`
#### Type declaration
▸ (`loaders`): `void`
##### Parameters
| Name | Type |
| :-------- | :--------------------------------------------------------------- |
| `loaders` | [`LayoutLoaderDefinition`](mermaid.LayoutLoaderDefinition.md)\[] |
##### Returns
`void`
#### Defined in
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
---
### render
• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
#### Type declaration
▸ (`id`, `text`, `svgContainingElement?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
##### Parameters
| Name | Type |
| :---------------------- | :-------- |
| `id` | `string` |
| `text` | `string` |
| `svgContainingElement?` | `Element` |
##### Returns
`Promise`<[`RenderResult`](mermaid.RenderResult.md)>
#### Defined in
[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
---
### run
• **run**: (`options`: [`RunOptions`](mermaid.RunOptions.md)) => `Promise`<`void`>
#### Type declaration
▸ (`options?`): `Promise`<`void`>
## run
Function that goes through the document to find the chart definitions in there and render them.
The function tags the processed attributes with the attribute data-processed and ignores found
elements with the attribute already set. This way the init function can be triggered several
times.
```mermaid-example
graph LR;
a(Find elements)-->b{Processed}
b-->|Yes|c(Leave element)
b-->|No |d(Transform)
```
```mermaid
graph LR;
a(Find elements)-->b{Processed}
b-->|Yes|c(Leave element)
b-->|No |d(Transform)
```
Renders the mermaid diagrams
##### Parameters
| Name | Type | Description |
| :-------- | :------------------------------------ | :----------------------- |
| `options` | [`RunOptions`](mermaid.RunOptions.md) | Optional runtime configs |
##### Returns
`Promise`<`void`>
#### Defined in
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
---
### setParseErrorHandler
• **setParseErrorHandler**: (`parseErrorHandler`: (`err`: `any`, `hash`: `any`) => `void`) => `void`
#### Type declaration
▸ (`parseErrorHandler`): `void`
## setParseErrorHandler Alternative to directly setting parseError using:
```js
mermaid.parseError = function (err, hash) {
forExampleDisplayErrorInGui(err); // do something with the error
};
```
This is provided for environments where the mermaid object can't directly have a new member added
to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
##### Parameters
| Name | Type | Description |
| :------------------ | :-------------------------------------- | :------------------------- |
| `parseErrorHandler` | (`err`: `any`, `hash`: `any`) => `void` | New parseError() callback. |
##### Returns
`void`
#### Defined in
[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
---
### startOnLoad
• **startOnLoad**: `boolean`
#### Defined in
[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

541
docs/config/setup/interfaces/mermaid.MermaidConfig.md
View File

@@ -1,541 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md).
# Interface: MermaidConfig
[mermaid](../modules/mermaid.md).MermaidConfig
## Properties
### altFontFamily
• `Optional` **altFontFamily**: `string`
#### Defined in
[packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
---
### architecture
• `Optional` **architecture**: `ArchitectureDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
---
### arrowMarkerAbsolute
• `Optional` **arrowMarkerAbsolute**: `boolean`
Controls whether or arrow markers in html code are absolute paths or anchors.
This matters if you are using base tag settings.
#### Defined in
[packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
---
### block
• `Optional` **block**: `BlockDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
---
### c4
• `Optional` **c4**: `C4DiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
---
### class
• `Optional` **class**: `ClassDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
---
### darkMode
• `Optional` **darkMode**: `boolean`
#### Defined in
[packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
---
### deterministicIDSeed
• `Optional` **deterministicIDSeed**: `string`
This option is the optional seed for deterministic ids.
If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
You can set this attribute to base the seed on a static string.
#### Defined in
[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
---
### deterministicIds
• `Optional` **deterministicIds**: `boolean`
This option controls if the generated ids of nodes in the SVG are
generated randomly or based on a seed.
If set to `false`, the IDs are generated based on the current date and
thus are not deterministic. This is the default behavior.
This matters if your files are checked into source control e.g. git and
should not change unless content is changed.
#### Defined in
[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
---
### dompurifyConfig
• `Optional` **dompurifyConfig**: `Config`
#### Defined in
[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
---
### elk
• `Optional` **elk**: `Object`
#### Type declaration
| Name | Type | Description |
| :----------------------- | :-------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `cycleBreakingStrategy?` | `"GREEDY"` \| `"DEPTH_FIRST"` \| `"INTERACTIVE"` \| `"MODEL_ORDER"` \| `"GREEDY_MODEL_ORDER"` | This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops. |
| `mergeEdges?` | `boolean` | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"` | Elk specific option affecting how nodes are placed. |
#### Defined in
[packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
---
### er
• `Optional` **er**: `ErDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
---
### flowchart
• `Optional` **flowchart**: `FlowchartDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
---
### fontFamily
• `Optional` **fontFamily**: `string`
Specifies the font to be used in the rendered diagrams.
Can be any possible CSS `font-family`.
See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
#### Defined in
[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
---
### fontSize
• `Optional` **fontSize**: `number`
#### Defined in
[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
---
### forceLegacyMathML
• `Optional` **forceLegacyMathML**: `boolean`
This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
If set to true, ignores legacyMathML.
#### Defined in
[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
---
### gantt
• `Optional` **gantt**: `GanttDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
---
### gitGraph
• `Optional` **gitGraph**: `GitGraphDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
---
### handDrawnSeed
• `Optional` **handDrawnSeed**: `number`
Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
#### Defined in
[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
---
### htmlLabels
• `Optional` **htmlLabels**: `boolean`
#### Defined in
[packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
---
### journey
• `Optional` **journey**: `JourneyDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
---
### kanban
• `Optional` **kanban**: `KanbanDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
---
### layout
• `Optional` **layout**: `string`
Defines which layout algorithm to use for rendering the diagram.
#### Defined in
[packages/mermaid/src/config.type.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L81)
---
### legacyMathML
• `Optional` **legacyMathML**: `boolean`
This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
without their own MathML implementation. If this option is disabled and MathML is not supported, the math
equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
fall back to legacy rendering for KaTeX.
#### Defined in
[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
---
### logLevel
• `Optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
This option decides the amount of logging to be used by mermaid.
#### Defined in
[packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
---
### look
• `Optional` **look**: `"classic"` | `"handDrawn"`
Defines which main look to use for the diagram.
#### Defined in
[packages/mermaid/src/config.type.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L71)
---
### markdownAutoWrap
• `Optional` **markdownAutoWrap**: `boolean`
#### Defined in
[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
---
### maxEdges
• `Optional` **maxEdges**: `number`
Defines the maximum number of edges that can be drawn in a graph.
#### Defined in
[packages/mermaid/src/config.type.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)
---
### maxTextSize
• `Optional` **maxTextSize**: `number`
The maximum allowed size of the users text diagram
#### Defined in
[packages/mermaid/src/config.type.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)
---
### mindmap
• `Optional` **mindmap**: `MindmapDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
---
### packet
• `Optional` **packet**: `PacketDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
---
### pie
• `Optional` **pie**: `PieDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
---
### quadrantChart
• `Optional` **quadrantChart**: `QuadrantChartConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
---
### requirement
• `Optional` **requirement**: `RequirementDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
---
### sankey
• `Optional` **sankey**: `SankeyDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
---
### secure
• `Optional` **secure**: `string`\[]
This option controls which `currentConfig` keys are considered secure and
can only be changed via call to `mermaid.initialize`.
This prevents malicious graph directives from overriding a site's default security.
#### Defined in
[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
---
### securityLevel
• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
Level of trust for parsed diagram
#### Defined in
[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
---
### sequence
• `Optional` **sequence**: `SequenceDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
---
### startOnLoad
• `Optional` **startOnLoad**: `boolean`
Dictates whether mermaid starts on Page load
#### Defined in
[packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
---
### state
• `Optional` **state**: `StateDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
---
### suppressErrorRendering
• `Optional` **suppressErrorRendering**: `boolean`
Suppresses inserting 'Syntax error' diagram in the DOM.
This is useful when you want to control how to handle syntax errors in your application.
#### Defined in
[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
---
### theme
• `Optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"null"`
Theme, the CSS style sheet.
You may also use `themeCSS` to override this value.
#### Defined in
[packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
---
### themeCSS
• `Optional` **themeCSS**: `string`
#### Defined in
[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
---
### themeVariables
• `Optional` **themeVariables**: `any`
#### Defined in
[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
---
### timeline
• `Optional` **timeline**: `TimelineDiagramConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
---
### wrap
• `Optional` **wrap**: `boolean`
#### Defined in
[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
---
### xyChart
• `Optional` **xyChart**: `XYChartConfig`
#### Defined in
[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

22
docs/config/setup/interfaces/mermaid.ParseOptions.md
View File

@@ -1,22 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md).
# Interface: ParseOptions
[mermaid](../modules/mermaid.md).ParseOptions
## Properties
### suppressErrors
• `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
[packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)

33
docs/config/setup/interfaces/mermaid.ParseResult.md
View File

@@ -1,33 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseResult.md).
# Interface: ParseResult
[mermaid](../modules/mermaid.md).ParseResult
## Properties
### config
• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
The config passed as YAML frontmatter or directives
#### Defined in
[packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
---
### diagramType
• **diagramType**: `string`
The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in
[packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)

19
docs/config/setup/interfaces/mermaid.RenderOptions.md
View File

@@ -1,19 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
# Interface: RenderOptions
[mermaid](../modules/mermaid.md).RenderOptions
## Properties
### algorithm
• `Optional` **algorithm**: `string`
#### Defined in
[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

66
docs/config/setup/interfaces/mermaid.RenderResult.md
View File

@@ -1,66 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md).
# Interface: RenderResult
[mermaid](../modules/mermaid.md).RenderResult
## Properties
### bindFunctions
• `Optional` **bindFunctions**: (`element`: `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.
```js
const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
div.innerHTML = svg;
bindFunctions?.(div); // To call bindFunctions only if it's present.
```
#### Type declaration
▸ (`element`): `void`
##### Parameters
| Name | Type |
| :-------- | :-------- |
| `element` | `Element` |
##### Returns
`void`
#### Defined in
[packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
---
### diagramType
• **diagramType**: `string`
The diagram type, e.g. 'flowchart', 'sequence', etc.
#### Defined in
[packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
---
### svg
• **svg**: `string`
The svg code for the rendered graph.
#### Defined in
[packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)

71
docs/config/setup/interfaces/mermaid.RunOptions.md
View File

@@ -1,71 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md).
# Interface: RunOptions
[mermaid](../modules/mermaid.md).RunOptions
## Properties
### nodes
• `Optional` **nodes**: `ArrayLike`<`HTMLElement`>
The nodes to render. If this is set, `querySelector` will be ignored.
#### Defined in
[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
---
### postRenderCallback
• `Optional` **postRenderCallback**: (`id`: `string`) => `unknown`
A callback to call after each diagram is rendered.
#### Type declaration
▸ (`id`): `unknown`
##### Parameters
| Name | Type |
| :--- | :------- |
| `id` | `string` |
##### Returns
`unknown`
#### Defined in
[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
---
### querySelector
• `Optional` **querySelector**: `string`
The query selector to use when finding elements to render. Default: `".mermaid"`.
#### Defined in
[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
---
### suppressErrors
• `Optional` **suppressErrors**: `boolean`
If `true`, errors will be logged to the console, but not thrown. Default: `false`
#### Defined in
[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57)

40
docs/config/setup/mermaid/README.md Normal file
View File

@@ -0,0 +1,40 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/README.md](../../../../packages/mermaid/src/docs/config/setup/mermaid/README.md).
[**mermaid**](../README.md)
---
# mermaid
## Classes
- [UnknownDiagramError](classes/UnknownDiagramError.md)
## Interfaces
- [DetailedError](interfaces/DetailedError.md)
- [ExternalDiagramDefinition](interfaces/ExternalDiagramDefinition.md)
- [LayoutData](interfaces/LayoutData.md)
- [LayoutLoaderDefinition](interfaces/LayoutLoaderDefinition.md)
- [Mermaid](interfaces/Mermaid.md)
- [MermaidConfig](interfaces/MermaidConfig.md)
- [ParseOptions](interfaces/ParseOptions.md)
- [ParseResult](interfaces/ParseResult.md)
- [RenderOptions](interfaces/RenderOptions.md)
- [RenderResult](interfaces/RenderResult.md)
- [RunOptions](interfaces/RunOptions.md)
## Type Aliases
- [InternalHelpers](type-aliases/InternalHelpers.md)
- [ParseErrorFunction](type-aliases/ParseErrorFunction.md)
- [SVG](type-aliases/SVG.md)
- [SVGGroup](type-aliases/SVGGroup.md)
## Variables
- [default](variables/default.md)

159
docs/config/setup/mermaid/classes/UnknownDiagramError.md Normal file
View File

@@ -0,0 +1,159 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/classes/UnknownDiagramError.md).
[**mermaid**](../../README.md)
---
# Class: UnknownDiagramError
Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
## Extends
- `Error`
## Constructors
### new UnknownDiagramError()
> **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](UnknownDiagramError.md)
Defined in: [packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
#### Parameters
##### message
`string`
#### Returns
[`UnknownDiagramError`](UnknownDiagramError.md)
#### Overrides
`Error.constructor`
## Properties
### cause?
> `optional` **cause**: `unknown`
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
#### Inherited from
`Error.cause`
---
### message
> **message**: `string`
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
#### Inherited from
`Error.message`
---
### name
> **name**: `string`
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
#### Inherited from
`Error.name`
---
### stack?
> `optional` **stack**: `string`
Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
#### Inherited from
`Error.stack`
---
### prepareStackTrace()?
> `static` `optional` **prepareStackTrace**: (`err`, `stackTraces`) => `any`
Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:143
Optional override for formatting stack traces
#### Parameters
##### err
`Error`
##### stackTraces
`CallSite`\[]
#### Returns
`any`
#### See
<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
#### Inherited from
`Error.prepareStackTrace`
---
### stackTraceLimit
> `static` **stackTraceLimit**: `number`
Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
#### Inherited from
`Error.stackTraceLimit`
## Methods
### captureStackTrace()
> `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void`
Defined in: node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:136
Create .stack property on a target object
#### Parameters
##### targetObject
`object`
##### constructorOpt?
`Function`
#### Returns
`void`
#### Inherited from
`Error.captureStackTrace`

45
docs/config/setup/mermaid/interfaces/DetailedError.md Normal file
View File

@@ -0,0 +1,45 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/DetailedError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/DetailedError.md).
[**mermaid**](../../README.md)
---
# Interface: DetailedError
Defined in: [packages/mermaid/src/utils.ts:783](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L783)
## Properties
### error?
> `optional` **error**: `any`
Defined in: [packages/mermaid/src/utils.ts:788](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L788)
---
### hash
> **hash**: `any`
Defined in: [packages/mermaid/src/utils.ts:786](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L786)
---
### message?
> `optional` **message**: `string`
Defined in: [packages/mermaid/src/utils.ts:789](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L789)
---
### str
> **str**: `string`
Defined in: [packages/mermaid/src/utils.ts:784](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L784)

37
docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md Normal file
View File

@@ -0,0 +1,37 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/ExternalDiagramDefinition.md).
[**mermaid**](../../README.md)
---
# Interface: ExternalDiagramDefinition
Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
## Properties
### detector
> **detector**: `DiagramDetector`
Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
---
### id
> **id**: `string`
Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
---
### loader
> **loader**: `DiagramLoader`
Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

41
docs/config/setup/mermaid/interfaces/LayoutData.md Normal file
View File

@@ -0,0 +1,41 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/LayoutData.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/LayoutData.md).
[**mermaid**](../../README.md)
---
# Interface: LayoutData
Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
## Indexable
\[`key`: `string`]: `any`
## Properties
### config
> **config**: [`MermaidConfig`](MermaidConfig.md)
Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
---
### edges
> **edges**: `Edge`\[]
Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
---
### nodes
> **nodes**: `Node`\[]
Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

37
docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md Normal file
View File

@@ -0,0 +1,37 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md).
[**mermaid**](../../README.md)
---
# Interface: LayoutLoaderDefinition
Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L21)
## Properties
### algorithm?
> `optional` **algorithm**: `string`
Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
---
### loader
> **loader**: `LayoutLoader`
Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
---
### name
> **name**: `string`
Defined in: [packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

427
docs/config/setup/mermaid/interfaces/Mermaid.md Normal file
View File

@@ -0,0 +1,427 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/Mermaid.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/Mermaid.md).
[**mermaid**](../../README.md)
---
# Interface: Mermaid
Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
## Properties
### contentLoaded()
> **contentLoaded**: () => `void`
Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
\##contentLoaded Callback function that is called when page is loaded. This functions fetches
configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
page.
#### Returns
`void`
---
### detectType()
> **detectType**: (`text`, `config`?) => `string`
Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
Detects the type of the graph text.
Takes into consideration the possible existence of an `%%init` directive
#### Parameters
##### text
`string`
The text defining the graph. For example:
```mermaid-example
%%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
graph LR
a-->b
b-->c
c-->d
d-->e
e-->f
f-->g
g-->h
```
```mermaid
%%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%%
graph LR
a-->b
b-->c
c-->d
d-->e
e-->f
f-->g
g-->h
```
##### config?
[`MermaidConfig`](MermaidConfig.md)
The mermaid config.
#### Returns
`string`
A graph definition key
---
### ~~init()~~
> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
## init
#### Parameters
##### config?
[`MermaidConfig`](MermaidConfig.md)
**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
##### nodes?
**Default**: `.mermaid`. One of the following:
- A DOM Node
- An array of DOM nodes (as would come from a jQuery selector)
- A W3C selector, a la `.mermaid`
`string` | `HTMLElement` | `NodeListOf`<`HTMLElement`>
##### callback?
(`id`) => `unknown`
Called once for each rendered diagram's id.
#### Returns
`Promise`<`void`>
#### Deprecated
Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
Renders the mermaid diagrams
#### Deprecated
Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
---
### initialize()
> **initialize**: (`config`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
Used to set configurations for mermaid.
This function should be called before the run function.
#### Parameters
##### config
[`MermaidConfig`](MermaidConfig.md)
Configuration object for mermaid.
#### Returns
`void`
---
### ~~mermaidAPI~~
> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
**`Internal`**
#### Deprecated
Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
---
### parse()
> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
Parse the text and validate the syntax.
#### Parameters
##### text
`string`
The mermaid diagram definition.
##### parseOptions
[`ParseOptions`](ParseOptions.md) & `object`
Options for parsing.
#### Returns
`Promise`<`false` | [`ParseResult`](ParseResult.md)>
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
#### See
[ParseOptions](ParseOptions.md)
#### Throws
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
Parse the text and validate the syntax.
#### Parameters
##### text
`string`
The mermaid diagram definition.
##### parseOptions?
[`ParseOptions`](ParseOptions.md)
Options for parsing.
#### Returns
`Promise`<[`ParseResult`](ParseResult.md)>
An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
#### See
[ParseOptions](ParseOptions.md)
#### Throws
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
---
### parseError?
> `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
---
### registerExternalDiagrams()
> **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
Used to register external diagram types.
#### Parameters
##### diagrams
[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md)\[]
Array of [ExternalDiagramDefinition](ExternalDiagramDefinition.md).
##### opts
If opts.lazyLoad is false, the diagrams will be loaded immediately.
###### lazyLoad?
`boolean` = `true`
#### Returns
`Promise`<`void`>
---
### registerIconPacks()
> **registerIconPacks**: (`iconLoaders`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
#### Parameters
##### iconLoaders
`IconLoader`\[]
#### Returns
`void`
---
### registerLayoutLoaders()
> **registerLayoutLoaders**: (`loaders`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
#### Parameters
##### loaders
[`LayoutLoaderDefinition`](LayoutLoaderDefinition.md)\[]
#### Returns
`void`
---
### render()
> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
#### Parameters
##### id
`string`
##### text
`string`
##### svgContainingElement?
`Element`
#### Returns
`Promise`<[`RenderResult`](RenderResult.md)>
#### Deprecated
- use the `mermaid.render` function instead of `mermaid.mermaidAPI.render`
Deprecated for external use.
---
### run()
> **run**: (`options`) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
## run
Function that goes through the document to find the chart definitions in there and render them.
The function tags the processed attributes with the attribute data-processed and ignores found
elements with the attribute already set. This way the init function can be triggered several
times.
```mermaid-example
graph LR;
a(Find elements)-->b{Processed}
b-->|Yes|c(Leave element)
b-->|No |d(Transform)
```
```mermaid
graph LR;
a(Find elements)-->b{Processed}
b-->|Yes|c(Leave element)
b-->|No |d(Transform)
```
Renders the mermaid diagrams
#### Parameters
##### options
[`RunOptions`](RunOptions.md) = `...`
Optional runtime configs
#### Returns
`Promise`<`void`>
---
### setParseErrorHandler()
> **setParseErrorHandler**: (`parseErrorHandler`) => `void`
Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
## setParseErrorHandler Alternative to directly setting parseError using:
```js
mermaid.parseError = function (err, hash) {
forExampleDisplayErrorInGui(err); // do something with the error
};
```
This is provided for environments where the mermaid object can't directly have a new member added
to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
#### Parameters
##### parseErrorHandler
(`err`, `hash`) => `void`
New parseError() callback.
#### Returns
`void`
---
### startOnLoad
> **startOnLoad**: `boolean`
Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

469
docs/config/setup/mermaid/interfaces/MermaidConfig.md Normal file
View File

@@ -0,0 +1,469 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/MermaidConfig.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/MermaidConfig.md).
[**mermaid**](../../README.md)
---
# Interface: MermaidConfig
Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L58)
## Properties
### altFontFamily?
> `optional` **altFontFamily**: `string`
Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
---
### architecture?
> `optional` **architecture**: `ArchitectureDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
---
### arrowMarkerAbsolute?
> `optional` **arrowMarkerAbsolute**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
Controls whether or arrow markers in html code are absolute paths or anchors.
This matters if you are using base tag settings.
---
### block?
> `optional` **block**: `BlockDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
---
### c4?
> `optional` **c4**: `C4DiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
---
### class?
> `optional` **class**: `ClassDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
---
### darkMode?
> `optional` **darkMode**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
---
### deterministicIds?
> `optional` **deterministicIds**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
This option controls if the generated ids of nodes in the SVG are
generated randomly or based on a seed.
If set to `false`, the IDs are generated based on the current date and
thus are not deterministic. This is the default behavior.
This matters if your files are checked into source control e.g. git and
should not change unless content is changed.
---
### deterministicIDSeed?
> `optional` **deterministicIDSeed**: `string`
Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
This option is the optional seed for deterministic ids.
If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
You can set this attribute to base the seed on a static string.
---
### dompurifyConfig?
> `optional` **dompurifyConfig**: `Config`
Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
---
### elk?
> `optional` **elk**: `object`
Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
#### cycleBreakingStrategy?
> `optional` **cycleBreakingStrategy**: `"GREEDY"` | `"DEPTH_FIRST"` | `"INTERACTIVE"` | `"MODEL_ORDER"` | `"GREEDY_MODEL_ORDER"`
This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.
#### mergeEdges?
> `optional` **mergeEdges**: `boolean`
Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
#### nodePlacementStrategy?
> `optional` **nodePlacementStrategy**: `"SIMPLE"` | `"NETWORK_SIMPLEX"` | `"LINEAR_SEGMENTS"` | `"BRANDES_KOEPF"`
Elk specific option affecting how nodes are placed.
---
### er?
> `optional` **er**: `ErDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
---
### flowchart?
> `optional` **flowchart**: `FlowchartDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
---
### fontFamily?
> `optional` **fontFamily**: `string`
Defined in: [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
Specifies the font to be used in the rendered diagrams.
Can be any possible CSS `font-family`.
See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
---
### fontSize?
> `optional` **fontSize**: `number`
Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
---
### forceLegacyMathML?
> `optional` **forceLegacyMathML**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
If set to true, ignores legacyMathML.
---
### gantt?
> `optional` **gantt**: `GanttDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
---
### gitGraph?
> `optional` **gitGraph**: `GitGraphDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
---
### handDrawnSeed?
> `optional` **handDrawnSeed**: `number`
Defined in: [packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
---
### htmlLabels?
> `optional` **htmlLabels**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
---
### journey?
> `optional` **journey**: `JourneyDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
---
### kanban?
> `optional` **kanban**: `KanbanDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
---
### layout?
> `optional` **layout**: `string`
Defined in: [packages/mermaid/src/config.type.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L81)
Defines which layout algorithm to use for rendering the diagram.
---
### legacyMathML?
> `optional` **legacyMathML**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
without their own MathML implementation. If this option is disabled and MathML is not supported, the math
equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
fall back to legacy rendering for KaTeX.
---
### logLevel?
> `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
This option decides the amount of logging to be used by mermaid.
---
### look?
> `optional` **look**: `"classic"` | `"handDrawn"`
Defined in: [packages/mermaid/src/config.type.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L71)
Defines which main look to use for the diagram.
---
### markdownAutoWrap?
> `optional` **markdownAutoWrap**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
---
### maxEdges?
> `optional` **maxEdges**: `number`
Defined in: [packages/mermaid/src/config.type.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)
Defines the maximum number of edges that can be drawn in a graph.
---
### maxTextSize?
> `optional` **maxTextSize**: `number`
Defined in: [packages/mermaid/src/config.type.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)
The maximum allowed size of the users text diagram
---
### mindmap?
> `optional` **mindmap**: `MindmapDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
---
### packet?
> `optional` **packet**: `PacketDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
---
### pie?
> `optional` **pie**: `PieDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
---
### quadrantChart?
> `optional` **quadrantChart**: `QuadrantChartConfig`
Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
---
### radar?
> `optional` **radar**: `RadarDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
---
### requirement?
> `optional` **requirement**: `RequirementDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
---
### sankey?
> `optional` **sankey**: `SankeyDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
---
### secure?
> `optional` **secure**: `string`\[]
Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
This option controls which `currentConfig` keys are considered secure and
can only be changed via call to `mermaid.initialize`.
This prevents malicious graph directives from overriding a site's default security.
---
### securityLevel?
> `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
Level of trust for parsed diagram
---
### sequence?
> `optional` **sequence**: `SequenceDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
---
### startOnLoad?
> `optional` **startOnLoad**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
Dictates whether mermaid starts on Page load
---
### state?
> `optional` **state**: `StateDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
---
### suppressErrorRendering?
> `optional` **suppressErrorRendering**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
Suppresses inserting 'Syntax error' diagram in the DOM.
This is useful when you want to control how to handle syntax errors in your application.
---
### theme?
> `optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"null"`
Defined in: [packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
Theme, the CSS style sheet.
You may also use `themeCSS` to override this value.
---
### themeCSS?
> `optional` **themeCSS**: `string`
Defined in: [packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
---
### themeVariables?
> `optional` **themeVariables**: `any`
Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
---
### timeline?
> `optional` **timeline**: `TimelineDiagramConfig`
Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
---
### wrap?
> `optional` **wrap**: `boolean`
Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
---
### xyChart?
> `optional` **xyChart**: `XYChartConfig`
Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

24
docs/config/setup/mermaid/interfaces/ParseOptions.md Normal file
View File

@@ -0,0 +1,24 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/ParseOptions.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/ParseOptions.md).
[**mermaid**](../../README.md)
---
# Interface: ParseOptions
Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
## Properties
### suppressErrors?
> `optional` **suppressErrors**: `boolean`
Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
The `parseError` function will not be called.

33
docs/config/setup/mermaid/interfaces/ParseResult.md Normal file
View File

@@ -0,0 +1,33 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/ParseResult.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/ParseResult.md).
[**mermaid**](../../README.md)
---
# Interface: ParseResult
Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
## Properties
### config
> **config**: [`MermaidConfig`](MermaidConfig.md)
Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
The config passed as YAML frontmatter or directives
---
### diagramType
> **diagramType**: `string`
Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
The diagram type, e.g. 'flowchart', 'sequence', etc.

21
docs/config/setup/mermaid/interfaces/RenderOptions.md Normal file
View 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/mermaid/interfaces/RenderOptions.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/RenderOptions.md).
[**mermaid**](../../README.md)
---
# Interface: RenderOptions
Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
## Properties
### algorithm?
> `optional` **algorithm**: `string`
Defined in: [packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

60
docs/config/setup/mermaid/interfaces/RenderResult.md Normal file
View File

@@ -0,0 +1,60 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/RenderResult.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/RenderResult.md).
[**mermaid**](../../README.md)
---
# Interface: RenderResult
Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
## Properties
### bindFunctions()?
> `optional` **bindFunctions**: (`element`) => `void`
Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
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.
```js
const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
div.innerHTML = svg;
bindFunctions?.(div); // To call bindFunctions only if it's present.
```
#### Parameters
##### element
`Element`
#### Returns
`void`
---
### diagramType
> **diagramType**: `string`
Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
The diagram type, e.g. 'flowchart', 'sequence', etc.
---
### svg
> **svg**: `string`
Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
The svg code for the rendered graph.

63
docs/config/setup/mermaid/interfaces/RunOptions.md Normal file
View File

@@ -0,0 +1,63 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/RunOptions.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/RunOptions.md).
[**mermaid**](../../README.md)
---
# Interface: RunOptions
Defined in: [packages/mermaid/src/mermaid.ts:41](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L41)
## Properties
### nodes?
> `optional` **nodes**: `ArrayLike`<`HTMLElement`>
Defined in: [packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
The nodes to render. If this is set, `querySelector` will be ignored.
---
### postRenderCallback()?
> `optional` **postRenderCallback**: (`id`) => `unknown`
Defined in: [packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
A callback to call after each diagram is rendered.
#### Parameters
##### id
`string`
#### Returns
`unknown`
---
### querySelector?
> `optional` **querySelector**: `string`
Defined in: [packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
The query selector to use when finding elements to render. Default: `".mermaid"`.
---
### suppressErrors?
> `optional` **suppressErrors**: `boolean`
Defined in: [packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57)
If `true`, errors will be logged to the console, but not thrown. Default: `false`

15
docs/config/setup/mermaid/type-aliases/InternalHelpers.md Normal file
View File

@@ -0,0 +1,15 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/type-aliases/InternalHelpers.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/type-aliases/InternalHelpers.md).
[**mermaid**](../../README.md)
---
# Type Alias: InternalHelpers
> **InternalHelpers**: _typeof_ `internalHelpers`
Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)

29
docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md Normal file
View File

@@ -0,0 +1,29 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md).
[**mermaid**](../../README.md)
---
# Type Alias: ParseErrorFunction()
> **ParseErrorFunction**: (`err`, `hash`?) => `void`
Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
## Parameters
### err
`string` | [`DetailedError`](../interfaces/DetailedError.md) | `unknown`
### hash?
`any`
## Returns
`void`

15
docs/config/setup/mermaid/type-aliases/SVG.md Normal file
View File

@@ -0,0 +1,15 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/type-aliases/SVG.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/type-aliases/SVG.md).
[**mermaid**](../../README.md)
---
# Type Alias: SVG
> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

15
docs/config/setup/mermaid/type-aliases/SVGGroup.md Normal file
View File

@@ -0,0 +1,15 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/type-aliases/SVGGroup.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/type-aliases/SVGGroup.md).
[**mermaid**](../../README.md)
---
# Type Alias: SVGGroup
> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)

15
docs/config/setup/mermaid/variables/default.md Normal file
View File

@@ -0,0 +1,15 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/variables/default.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/variables/default.md).
[**mermaid**](../../README.md)
---
# Variable: default
> `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

276
docs/config/setup/modules/config.md
View File

@@ -1,276 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/config.md](../../../../packages/mermaid/src/docs/config/setup/modules/config.md).
# Module: config
## Variables
### defaultConfig
• `Const` **defaultConfig**: [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
#### Defined in
[packages/mermaid/src/config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
## Functions
### addDirective
▸ **addDirective**(`directive`): `void`
Pushes in a directive to the configuration
#### Parameters
| Name | Type | Description |
| :---------- | :-------------------------------------------------------- | :----------------------- |
| `directive` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The directive to push in |
#### Returns
`void`
#### Defined in
[packages/mermaid/src/config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
---
### getConfig
▸ **getConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
## getConfig
| Function | Description | Type | Return Values |
| --------- | ------------------------- | ----------- | ------------------------------ |
| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
**Notes**: Avoid calling this function repeatedly. Instead, store the result in a variable and use it, and pass it down to function calls.
#### Returns
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
The currentConfig
#### Defined in
[packages/mermaid/src/config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
---
### getSiteConfig
▸ **getSiteConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
## getSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
**Notes**: Returns **any** values in siteConfig.
#### Returns
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
The siteConfig
#### Defined in
[packages/mermaid/src/config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
---
### reset
▸ **reset**(`config?`): `void`
## reset
| Function | Description | Type | Required | Values |
| -------- | ---------------------------- | ----------- | -------- | ------ |
| reset | Resets currentConfig to conf | Put Request | Required | None |
## conf
| Parameter | Description | Type | Required | Values |
| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
#### Parameters
| Name | Type | Default value | Description |
| :------- | :-------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `config` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | `siteConfig` | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
#### Returns
`void`
#### Defined in
[packages/mermaid/src/config.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L221)
---
### sanitize
▸ **sanitize**(`options`): `void`
## sanitize
| Function | Description | Type | Values |
| -------- | -------------------------------------- | ----------- | ------ |
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
options in-place
#### Parameters
| Name | Type | Description |
| :-------- | :---- | :-------------------------------- |
| `options` | `any` | The potential setConfig parameter |
#### Returns
`void`
#### Defined in
[packages/mermaid/src/config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
---
### saveConfigFromInitialize
▸ **saveConfigFromInitialize**(`conf`): `void`
#### Parameters
| Name | Type |
| :----- | :-------------------------------------------------------- |
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
#### Returns
`void`
#### Defined in
[packages/mermaid/src/config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
---
### setConfig
▸ **setConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
## setConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
corresponding siteConfig value.
#### Parameters
| Name | Type | Description |
| :----- | :-------------------------------------------------------- | :-------------------------- |
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The potential currentConfig |
#### Returns
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
The currentConfig merged with the sanitized conf
#### Defined in
[packages/mermaid/src/config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
---
### setSiteConfig
▸ **setSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
## setSiteConfig
| Function | Description | Type | Values |
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
function _Default value: At default, will mirror Global Config_
#### Parameters
| Name | Type | Description |
| :----- | :-------------------------------------------------------- | :------------------------------------------ |
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The base currentConfig to use as siteConfig |
#### Returns
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
The new siteConfig
#### Defined in
[packages/mermaid/src/config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
---
### updateCurrentConfig
▸ **updateCurrentConfig**(`siteCfg`, `_directives`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
#### Parameters
| Name | Type |
| :------------ | :----------------------------------------------------------- |
| `siteCfg` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
| `_directives` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)\[] |
#### Returns
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
#### Defined in
[packages/mermaid/src/config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
---
### updateSiteConfig
▸ **updateSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
#### Parameters
| Name | Type |
| :----- | :-------------------------------------------------------- |
| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
#### Returns
[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
#### Defined in
[packages/mermaid/src/config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)

33
docs/config/setup/modules/defaultConfig.md
View File

@@ -1,33 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/defaultConfig.md](../../../../packages/mermaid/src/docs/config/setup/modules/defaultConfig.md).
# Module: defaultConfig
## Variables
### configKeys
• `Const` **configKeys**: `Set`<`string`>
#### Defined in
[packages/mermaid/src/defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)
---
### default
• `Const` **default**: `RequiredDeep`<[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)>
Default mermaid configuration options.
Please see the Mermaid config JSON Schema for the default JSON values.
Non-JSON JS default values are listed in this file, e.g. functions, or
`undefined` (explicitly set so that `configKeys` finds them).
#### Defined in
[packages/mermaid/src/defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)

90
docs/config/setup/modules/mermaid.md
View File

@@ -1,90 +0,0 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaid.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaid.md).
# Module: mermaid
## Classes
- [UnknownDiagramError](../classes/mermaid.UnknownDiagramError.md)
## Interfaces
- [DetailedError](../interfaces/mermaid.DetailedError.md)
- [ExternalDiagramDefinition](../interfaces/mermaid.ExternalDiagramDefinition.md)
- [LayoutData](../interfaces/mermaid.LayoutData.md)
- [LayoutLoaderDefinition](../interfaces/mermaid.LayoutLoaderDefinition.md)
- [Mermaid](../interfaces/mermaid.Mermaid.md)
- [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
- [ParseOptions](../interfaces/mermaid.ParseOptions.md)
- [ParseResult](../interfaces/mermaid.ParseResult.md)
- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
- [RenderResult](../interfaces/mermaid.RenderResult.md)
- [RunOptions](../interfaces/mermaid.RunOptions.md)
## Type Aliases
### InternalHelpers
Ƭ **InternalHelpers**: typeof `internalHelpers`
#### Defined in
[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
---
### ParseErrorFunction
Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
#### Type declaration
▸ (`err`, `hash?`): `void`
##### Parameters
| Name | Type |
| :------ | :--------------------------------------------------------------------------------- |
| `err` | `string` \| [`DetailedError`](../interfaces/mermaid.DetailedError.md) \| `unknown` |
| `hash?` | `any` |
##### Returns
`void`
#### Defined in
[packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
---
### SVG
Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
#### Defined in
[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
---
### SVGGroup
Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
#### Defined in
[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
## Variables
### default
• `Const` **default**: [`Mermaid`](../interfaces/mermaid.Mermaid.md)
#### Defined in
[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

4
docs/ecosystem/integrations-community.md
View File

@@ -40,6 +40,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
- [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
- [Mermaid plus for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-for-confluence?hosting=cloud&tab=overview)
- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
- [Doctave](https://www.doctave.com/) ✅
@@ -70,6 +71,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
- [Notion](https://notion.so) ✅
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
- [Redmine](https://redmine.org)
- [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
- [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
@@ -266,7 +268,5 @@ Communication tools and platforms
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
<!--- cspell:ignore Blazorade HueHive --->

2
docs/ecosystem/integrations-create.md
View File

@@ -24,7 +24,7 @@ Currently pending [IANA](https://www.iana.org/) recognition.
### Mermaid Discord workspace
We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/AgrbSrBer3) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/sKeNQX4Wtj) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel.
### Add to Mermaid Ecosystem

4
docs/ecosystem/mermaid-chart.md
View File

@@ -48,7 +48,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
## Plans
- **Free** - A free plan that includes five diagrams.
- **Free** - A free plan that includes three diagrams.
- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
@@ -56,7 +56,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
Mermaid Chart is currently offering a 7-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
## Mermaid JS contributions

2
docs/intro/index.md
View File

@@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins
[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
[![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
[![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
</div>

26
docs/news/blog.md
View File

@@ -6,18 +6,36 @@
# Blog
## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
1/17/2025 • 5 mins
Discover how the latest update to the Mermaid Visual Editor transforms class diagramming. With new intuitive tools for creating and editing diagrams, dynamic relationship management, and customizable layouts, this feature-packed enhancement streamlines your diagramming experience like never before.
## [7 ER Diagram Examples For Database Modeling from Mermaid AI](https://docs.mermaidchart.com/blog/posts/7-er-diagram-examples-for-database-modeling-from-mermaid-ai)
1/16/2025 • 6 mins
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to Kickstart and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://docs.mermaidchart.com/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
12/6/2024 • 2 mins
The Mermaid Whiteboard combines Mermaid syntax with a drag-and-drop interface, making it easier for teams to create, edit, and refine diagrams together. Whether you prefer working with code, visuals, Mermaid AI or all three, this tool adapts to your needs while keeping everything tied to Mermaid’s syntax. Key Features 1. Dual-Mode Editing Switch seamlessly between \[…]
## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
October 31, 2024 · 2 mins
Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
October 24, 2024 · 4 mins
An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
24 September 2024 · 5 mins

410
docs/syntax/entityRelationshipDiagram.md
View File

@@ -92,7 +92,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
Where:
- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens.
- `first-entity` is the name of an entity. Names support any unicode characters and can include spaces if surrounded by double quotes (e.g. "name with space").
- `relationship` describes the way that both entities inter-relate. See below.
- `second-entity` is the name of the other entity.
- `relationship-label` describes the relationship from the perspective of the first entity.
@@ -107,6 +107,34 @@ This statement can be read as _a property contains one or more rooms, and a room
Only the `first-entity` part of a statement is mandatory. This makes it possible to show an entity with no relationships, which can be useful during iterative construction of diagrams. If any other parts of a statement are specified, then all parts are mandatory.
#### Unicode text
Entity names, relationships, and attributes all support unicode text.
```mermaid-example
erDiagram
"This ❤ Unicode"
```
```mermaid
erDiagram
"This ❤ Unicode"
```
#### Markdown formatting
Markdown formatting and text is also supported.
```mermaid-example
erDiagram
"This **is** _Markdown_"
```
```mermaid
erDiagram
"This **is** _Markdown_"
```
### Relationship Syntax
The `relationship` part of each statement can be broken down into three sub-components:
@@ -145,6 +173,11 @@ Cardinality is a property that describes how many elements of another entity can
Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
| Value | Alias for |
| :---: | :---------------: |
| -- | _identifying_ |
| .. | _non-identifying_ |
**Aliases**
| Value | Alias for |
@@ -155,13 +188,25 @@ Relationships may be classified as either _identifying_ or _non-identifying_ and
```mermaid-example
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is
PERSON }o..o{ NAMED-DRIVER : is
```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
PERSON ||--o{ NAMED-DRIVER : is
PERSON }o..o{ NAMED-DRIVER : is
```
```mermaid-example
erDiagram
CAR 1 to zero or more NAMED-DRIVER : allows
PERSON many(0) optionally to 0+ NAMED-DRIVER : is
```
```mermaid
erDiagram
CAR 1 to zero or more NAMED-DRIVER : allows
PERSON many(0) optionally to 0+ NAMED-DRIVER : is
```
### Attributes
@@ -202,9 +247,9 @@ erDiagram
The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
### Entity Name Aliases (v10.5.0+)
### Entity Name Aliases
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name. Alias names follow all of the same rules as entity names.
```mermaid-example
erDiagram
@@ -232,7 +277,7 @@ erDiagram
#### Attribute Keys and Comments
Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key (markdown formatting and unicode is not supported for keys). To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
```mermaid-example
erDiagram
@@ -282,35 +327,344 @@ erDiagram
MANUFACTURER only one to zero or more CAR : makes
```
### Other Things
### Direction
- If you want the relationship label to be more than one word, you must use double quotes around the phrase
- If you don't want a label at all on a relationship, you must use an empty double-quoted string
- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
The direction statement declares the direction of the diagram.
## Styling
This declares that the diagram is oriented from top to bottom (`TB`). This can be reversed to be oriented from bottom to top (`BT`).
### Config options
```mermaid-example
erDiagram
direction TB
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
For simple color customization:
```mermaid
erDiagram
direction TB
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
| Name | Used as |
| :------- | :------------------------------------------------------------------- |
| `fill` | Background color of an entity or attribute |
| `stroke` | Border color of an entity or attribute, line color of a relationship |
This declares that the diagram is oriented from left to right (`LR`). This can be reversed to be oriented from right to left (`RL`).
### Classes used
```mermaid-example
erDiagram
direction LR
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
The following CSS class selectors are available for richer styling:
```mermaid
erDiagram
direction LR
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string name
string custNumber
string sector
}
ORDER ||--|{ LINE-ITEM : contains
ORDER {
int orderNumber
string deliveryAddress
}
LINE-ITEM {
string productCode
int quantity
float pricePerUnit
}
```
| Selector | Description |
| :------------------------- | :---------------------------------------------------- |
| `.er.attributeBoxEven` | The box containing attributes on even-numbered rows |
| `.er.attributeBoxOdd` | The box containing attributes on odd-numbered rows |
| `.er.entityBox` | The box representing an entity |
| `.er.entityLabel` | The label for an entity |
| `.er.relationshipLabel` | The label for a relationship |
| `.er.relationshipLabelBox` | The box surrounding a relationship label |
| `.er.relationshipLine` | The line representing a relationship between entities |
Possible diagram orientations are:
- TB - Top to bottom
- BT - Bottom to top
- RL - Right to left
- LR - Left to right
### Styling a node
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```mermaid-example
erDiagram
id1||--||id2 : label
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
erDiagram
id1||--||id2 : label
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
It is also possible to attach styles to a list of nodes in one statement:
```
style nodeId1,nodeId2 styleList
```
#### Classes
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
should have a different look.
A class definition looks like the example below:
```
classDef className fill:#f9f,stroke:#333,stroke-width:4px
```
It is also possible to define multiple classes in one statement:
```
classDef firstClassName,secondClassName font-size:12pt
```
Attachment of a class to a node is done as per below:
```
class nodeId1 className
```
It is also possible to attach a class to a list of nodes in one statement:
```
class nodeId1,nodeId2 className
```
Multiple classes can be attached at the same time as well:
```
class nodeId1,nodeId2 className1,className2
```
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
```mermaid-example
erDiagram
direction TB
CAR:::someclass {
string registrationNumber
string make
string model
}
PERSON:::someclass {
string firstName
string lastName
int age
}
HOUSE:::someclass
classDef someclass fill:#f96
```
```mermaid
erDiagram
direction TB
CAR:::someclass {
string registrationNumber
string make
string model
}
PERSON:::someclass {
string firstName
string lastName
int age
}
HOUSE:::someclass
classDef someclass fill:#f96
```
This form can be used when declaring relationships between entities:
```mermaid-example
erDiagram
CAR {
string registrationNumber
string make
string model
}
PERSON {
string firstName
string lastName
int age
}
PERSON:::foo ||--|| CAR : owns
PERSON o{--|| HOUSE:::bar : has
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
```
```mermaid
erDiagram
CAR {
string registrationNumber
string make
string model
}
PERSON {
string firstName
string lastName
int age
}
PERSON:::foo ||--|| CAR : owns
PERSON o{--|| HOUSE:::bar : has
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
```
Similar to the class statement, the shorthand syntax can also apply multiple classes at once:
```
nodeId:::className1,className2
```
### Default class
If a class is named default it will be assigned to all classes without specific class definitions.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
> **Note:** Custom styles from style or other class statements take priority and will overwrite the default styles. (e.g. The `default` class gives nodes a background color of pink but the `blue` class will give that node a background color of blue if applied.)
```mermaid-example
erDiagram
CAR {
string registrationNumber
string make
string model
}
PERSON {
string firstName
string lastName
int age
}
PERSON:::foo ||--|| CAR : owns
PERSON o{--|| HOUSE:::bar : has
classDef default fill:#f9f,stroke-width:4px
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
```
```mermaid
erDiagram
CAR {
string registrationNumber
string make
string model
}
PERSON {
string firstName
string lastName
int age
}
PERSON:::foo ||--|| CAR : owns
PERSON o{--|| HOUSE:::bar : has
classDef default fill:#f9f,stroke-width:4px
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
```
## Configuration
### Layout
The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
```yaml
---
config:
layout: elk
---
```
Your Mermaid code should be similar to the following:
```mermaid-example
---
title: Order example
config:
layout: elk
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
---
title: Order example
config:
layout: elk
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
> **Note**
> Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
<!--- cspell:locale en,en-gb --->

12
docs/syntax/flowchart.md
View File

@@ -1193,12 +1193,12 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
```mermaid-example
flowchart LR
A e1@–> B
A e1@--> B
```
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
```
In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
@@ -1229,13 +1229,13 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
```mermaid-example
flowchart LR
A e1@–> B
A e1@--> B
e1@{ animation: fast }
```
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
e1@{ animation: fast }
```
@@ -1247,14 +1247,14 @@ You can also animate edges by assigning a class to them and then defining animat
```mermaid-example
flowchart LR
A e1@–> B
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```
```mermaid
flowchart LR
A e1@–> B
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
```

253
docs/syntax/radar.md Normal file
View File

@@ -0,0 +1,253 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/radar.md](../../packages/mermaid/src/docs/syntax/radar.md).
# Radar Diagram (v11.6.0+)
## Introduction
A radar diagram is a simple way to plot low-dimensional data in a circular format.
It is also known as a **radar chart**, **spider chart**, **star chart**, **cobweb chart**, **polar chart**, or **Kiviat diagram**.
## Usage
This diagram type is particularly useful for developers, data scientists, and engineers who require a clear and concise way to represent data in a circular format.
It is commonly used to graphically summarize and compare the performance of multiple entities across multiple dimensions.
## Syntax
```md
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
```
## Examples
```mermaid-example
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Science"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
```
```mermaid
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Science"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
```
```mermaid-example
radar-beta
title Restaurant Comparison
axis food["Food Quality"], service["Service"], price["Price"]
axis ambiance["Ambiance"],
curve a["Restaurant A"]{4, 3, 2, 4}
curve b["Restaurant B"]{3, 4, 3, 3}
curve c["Restaurant C"]{2, 3, 4, 2}
curve d["Restaurant D"]{2, 2, 4, 3}
graticule polygon
max 5
```
```mermaid
radar-beta
title Restaurant Comparison
axis food["Food Quality"], service["Service"], price["Price"]
axis ambiance["Ambiance"],
curve a["Restaurant A"]{4, 3, 2, 4}
curve b["Restaurant B"]{3, 4, 3, 3}
curve c["Restaurant C"]{2, 3, 4, 2}
curve d["Restaurant D"]{2, 2, 4, 3}
graticule polygon
max 5
```
## Details of Syntax
### Title
`title`: The title is an optional field that allows to render a title at the top of the radar diagram.
```
radar-beta
title Title of the Radar Diagram
...
```
### Axis
`axis`: The axis keyword is used to define the axes of the radar diagram.
Each axis is represented by an ID and an optional label.
Multiple axes can be defined in a single line.
```
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
```
### Curve
`curve`: The curve keyword is used to define the data points for a curve in the radar diagram.
Each curve is represented by an ID, an optional label, and a list of values.
Values can be defined by a list of numbers or a list of key-value pairs. If key-value pairs are used, the key represents the axis ID and the value represents the data point. Else, the data points are assumed to be in the order of the axes defined.
Multiple curves can be defined in a single line.
```
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
```
### Options
- `showLegend`: The showLegend keyword is used to show or hide the legend in the radar diagram. The legend is shown by default.
- `max`: The maximum value for the radar diagram. This is used to scale the radar diagram. If not provided, the maximum value is calculated from the data points.
- `min`: The minimum value for the radar diagram. This is used to scale the radar diagram. If not provided, the minimum value is `0`.
- `graticule`: The graticule keyword is used to define the type of graticule to be rendered in the radar diagram. The graticule can be `circle` or `polygon`. If not provided, the default graticule is `circle`.
- `ticks`: The ticks keyword is used to define the number of ticks on the graticule. It is the number of concentric circles or polygons drawn to indicate the scale of the radar diagram. If not provided, the default number of ticks is `5`.
```
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
```
## Configuration
Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagram-config.html) guide for details.
| Parameter | Description | Default Value |
| --------------- | ---------------------------------------- | ------------- |
| width | Width of the radar diagram | `600` |
| height | Height of the radar diagram | `600` |
| marginTop | Top margin of the radar diagram | `50` |
| marginBottom | Bottom margin of the radar diagram | `50` |
| marginLeft | Left margin of the radar diagram | `50` |
| marginRight | Right margin of the radar diagram | `50` |
| axisScaleFactor | Scale factor for the axis | `1` |
| axisLabelFactor | Factor to adjust the axis label position | `1.05` |
| curveTension | Tension for the rounded curves | `0.17` |
## Theme Variables
### Global Theme Variables
> **Note**
> The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
> %%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
| Property | Description |
| ---------- | ------------------------------ |
| fontSize | Font size of the title |
| titleColor | Color of the title |
| cScale${i} | Color scale for the i-th curve |
### Radar Style Options
> **Note**
> Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
> %%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
| Property | Description | Default Value |
| -------------------- | ---------------------------- | ------------- |
| axisColor | Color of the axis lines | `black` |
| axisStrokeWidth | Width of the axis lines | `1` |
| axisLabelFontSize | Font size of the axis labels | `12px` |
| curveOpacity | Opacity of the curves | `0.7` |
| curveStrokeWidth | Width of the curves | `2` |
| graticuleColor | Color of the graticule | `black` |
| graticuleOpacity | Opacity of the graticule | `0.5` |
| graticuleStrokeWidth | Width of the graticule | `1` |
| legendBoxSize | Size of the legend box | `10` |
| legendFontSize | Font size of the legend | `14px` |
## Example on config and theme
```mermaid-example
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
```
```mermaid
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
```
<!--- cspell:ignore Kiviat --->

242
docs/syntax/requirementDiagram.md
View File

@@ -84,6 +84,37 @@ element user_defined_name {
}
```
### Markdown Formatting
In places where user defined text is possible (like names, requirement text, element docref, etc.), you can:
- Surround the text in quotes: `"example text"`
- Use markdown formatting inside quotes: `"**bold text** and *italics*"`
Example:
```mermaid-example
requirementDiagram
requirement "__test_req__" {
id: 1
text: "*italicized text* **bold text**"
risk: high
verifymethod: test
}
```
```mermaid
requirementDiagram
requirement "__test_req__" {
id: 1
text: "*italicized text* **bold text**"
risk: high
verifymethod: test
}
```
### Relationship
Relationships are comprised of a source node, destination node, and relationship type.
@@ -250,4 +281,215 @@ This example uses all features of the diagram.
test_req <- copies - test_entity2
```
## Direction
The diagram can be rendered in different directions using the `direction` statement. Valid values are:
- `TB` - Top to Bottom (default)
- `BT` - Bottom to Top
- `LR` - Left to Right
- `RL` - Right to Left
Example:
```mermaid-example
requirementDiagram
direction LR
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
```mermaid
requirementDiagram
direction LR
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
## Styling
Requirements and elements can be styled using direct styling or classes. As a rule of thumb, when applying styles or classes, it accepts a list of requirement or element names and a list of class names allowing multiple assignments at a time (The only exception is the shorthand syntax `:::` which can assign multiple classes but only to one requirement or element at a time).
### Direct Styling
Use the `style` keyword to apply CSS styles directly:
```mermaid-example
requirementDiagram
requirement test_req {
id: 1
text: styling example
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
style test_req fill:#ffa,stroke:#000, color: green
style test_entity fill:#f9f,stroke:#333, color: blue
```
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: styling example
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
style test_req fill:#ffa,stroke:#000, color: green
style test_entity fill:#f9f,stroke:#333, color: blue
```
### Class Definitions
Define reusable styles using `classDef`:
```mermaid-example
requirementDiagram
requirement test_req {
id: 1
text: "class styling example"
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
classDef important fill:#f96,stroke:#333,stroke-width:4px
classDef test fill:#ffa,stroke:#000
```
```mermaid
requirementDiagram
requirement test_req {
id: 1
text: "class styling example"
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
classDef important fill:#f96,stroke:#333,stroke-width:4px
classDef test fill:#ffa,stroke:#000
```
### Default class
If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
```
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
```
### Applying Classes
Classes can be applied in two ways:
1. Using the `class` keyword:
```
class test_req,test_entity important
```
2. Using the shorthand syntax with `:::` either during the definition or afterwards:
```
requirement test_req:::important {
id: 1
text: class styling example
risk: low
verifymethod: test
}
```
```
element test_elem {
}
test_elem:::myClass
```
### Combined Example
```mermaid-example
requirementDiagram
requirement test_req:::important {
id: 1
text: "class styling example"
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
classDef important font-weight:bold
class test_entity important
style test_entity fill:#f9f,stroke:#333
```
```mermaid
requirementDiagram
requirement test_req:::important {
id: 1
text: "class styling example"
risk: low
verifymethod: test
}
element test_entity {
type: simulation
}
classDef important font-weight:bold
class test_entity important
style test_entity fill:#f9f,stroke:#333
```
<!--- cspell:ignore reqs --->