Compare commits

..

27 Commits

Author SHA1 Message Date
Ashish Jain
7b2083926d Merge pull request #6412 from mermaid-js/changeset-release/master
Version Packages
2025-03-25 12:42:47 +01:00
github-actions[bot]
bb9210c55e Version Packages 2025-03-25 11:37:21 +00:00
Ashish Jain
16d9b63457 Add missing changeset for requirement diagram fix 2025-03-25 12:35:21 +01:00
Ashish Jain
bf3370fa5b Merge pull request #6409 from mermaid-js/release/11.6.0
Release/11.6.0
2025-03-25 11:51:37 +01:00
Ashish Jain
9f9091e5e4 Update mermaid version palceholder 2025-03-25 11:20:09 +01:00
Ashish Jain
d1b1a67d99 Merge pull request #6410 from aloisklink/test/fix-cypress-on-nodejs-v20.19.0
test(e2e): fix Cypress config for Node.JS v20.19.0
2025-03-25 09:55:42 +00:00
Alois Klink
ac625bdc7f test(e2e): fix Cypress config for Node.JS v20.19.0
Node.JS v20.19.0 breaks `import '@cypress/code-coverage/task'` in the
`cypress.config.ts` for some reason (this is probably due to the new
`experimental-require-module` feature that is enabled by default in
Node.JS v20.19.0).

As a work-around, we can change this to
`@cypress/code-coverage/task.js`.

See: https://github.com/cypress-io/code-coverage/pull/940
See: https://nodejs.org/en/blog/release/v20.19.0
2025-03-25 18:28:13 +09:00
Ashish Jain
40b85c3bbf Merge pull request #6408 from mermaid-js/fix/6193-curve-interpolation
fix: restore curve type configuration functionality for flowcharts
2025-03-24 22:34:09 +01:00
Ashish Jain
f8e329f890 Merge branch 'develop' into fix/6193-curve-interpolation 2025-03-24 21:21:11 +01:00
Ashish Jain
9b9cec9809 Merge pull request #6386 from bollwyvl/patch-5
Move requirements containment arrow to edge start
2025-03-24 02:13:53 +01:00
Ashish Jain
ad653138e1 fix: restore curve type configuration functionality for flowcharts (#6193) 2025-03-24 00:25:03 +01:00
Ashish Jain
f5f3b08f12 Merge pull request #6381 from thomascizeron/feat/2280_radarDiagram
feat: Add radar diagram
2025-03-21 12:37:37 +01:00
Nicholas Bollweg
85ce310884 rework contains geometry to avoid clipping 2025-03-17 16:36:46 -05:00
Nicholas Bollweg
fac570cb8c try arrowhead 2025-03-17 15:43:57 -05:00
Nicholas Bollweg
a7bcd7dee5 #6380: move requirements containment arrow to start 2025-03-17 15:32:52 -05:00
Thomas Di Cizerone
bb5a7a585e ⚗️ Add radar renderer tests 2025-03-16 22:04:30 +01:00
Thomas Di Cizerone
5d1b27132a 🩹 Fix: text-color ➙ color 2025-03-16 19:00:25 +01:00
autofix-ci[bot]
288abd01e0 [autofix.ci] apply automated fixes 2025-03-16 17:46:44 +00:00
Thomas Di Cizerone
95d73bc3f0 🆙 Run pnpm changeset 2025-03-16 18:41:43 +01:00
Thomas Di Cizerone
0f5125b5e3 🖼️ Add Radar Demo with custom opacity 2025-03-16 18:34:00 +01:00
Thomas Di Cizerone
12c120368d 📚 Add documentation 2025-03-16 18:20:03 +01:00
Thomas Di Cizerone
a7f2c0bc34 🖼️ Add Radar Demo 2025-03-16 18:20:03 +01:00
Thomas Di Cizerone
5e97b2f764 ⚗️ Add Cypress test 2025-03-16 18:19:54 +01:00
Thomas Di Cizerone
d53c66dde5 🎨 Add themes for radar 2025-03-16 18:15:30 +01:00
Thomas Di Cizerone
1fb91d14c9 📊 Add radar chart 2025-03-16 18:13:50 +01:00
Thomas Di Cizerone
d80cc38bb2 🖋️ Add grammar for Radar chart 2025-03-16 18:00:50 +01:00
Ashish Jain
d6022408a9 Merge pull request #6375 from mermaid-js/master
Merge back v11.5.0 back to develop
2025-03-13 11:37:53 +01:00
99 changed files with 4491 additions and 2118 deletions

View File

@@ -27,6 +27,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
'block',
'packet',
'architecture',
'radar',
] as const;
/**

View File

@@ -1,8 +1,8 @@
import eyesPlugin from '@applitools/eyes-cypress';
import { registerArgosTask } from '@argos-ci/cypress/task';
import coverage from '@cypress/code-coverage/task';
import coverage from '@cypress/code-coverage/task.js';
import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
import cypressSplit from 'cypress-split';
export default eyesPlugin(

View File

@@ -0,0 +1,79 @@
import { imgSnapshotTest } from '../../helpers/util';
describe('radar structure', () => {
it('should render a simple radar diagram', () => {
imgSnapshotTest(
`radar-beta
title Best Radar Ever
axis A, B, C
curve c1{1, 2, 3}
`
);
});
it('should render a radar diagram with multiple curves', () => {
imgSnapshotTest(
`radar-beta
title Best Radar Ever
axis A, B, C
curve c1{1, 2, 3}
curve c2{2, 3, 1}
`
);
});
it('should render a complex radar diagram', () => {
imgSnapshotTest(
`radar-beta
title My favorite ninjas
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto Uzumaki"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3 {3, 2, 1, 5, 4}
showLegend true
ticks 3
max 8
min 0
graticule polygon
`
);
cy.get('svg').should((svg) => {
expect(svg).to.have.length(1);
});
});
it('should render radar diagram with config override', () => {
imgSnapshotTest(
`radar-beta
title Best Radar Ever
axis A,B,C
curve mycurve{1,2,3}`,
{ radar: { marginTop: 100, axisScaleFactor: 0.5 } }
);
});
it('should parse radar diagram with theme override', () => {
imgSnapshotTest(
`radar-beta
axis A,B,C
curve mycurve{1,2,3}`,
{ theme: 'base', themeVariables: { fontSize: 80, cScale0: '#FF0000' } }
);
});
it('should handle radar diagram with radar style override', () => {
imgSnapshotTest(
`radar-beta
axis A,B,C
curve mycurve{1,2,3}`,
{ theme: 'base', themeVariables: { radar: { axisColor: '#FF0000' } } }
);
});
});

View File

@@ -91,6 +91,9 @@
<li>
<h2><a href="./architecture.html">Architecture</a></h2>
</li>
<li>
<h2><a href="./radar.html">Radar</a></h2>
</li>
</ul>
</body>
</html>

157
demos/radar.html Normal file
View File

@@ -0,0 +1,157 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Radar diagram demo</h1>
<div class="diagrams">
<pre class="mermaid">
radar-beta
title My favorite ninjas
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
showLegend true
ticks 3
max 8
min 0
graticule circle
</pre
>
<pre class="mermaid">
---
config:
radar:
axisScaleFactor: 0.25
axisLabelFactor: 0.95
---
radar-beta
title DevOps Radar
axis f["Feature Velocity"], s["Stability"]
axis r["Resilience"], e["Efficiency"]
axis c["Cost"], d["DevSecOps"]
curve app1["App1"]{
f 5, s 4.5, r 3.8, d 4.2, e 4.5, c 3.5
}
curve app2["App2"]{4, 3, 4, 3, 3, 4}, app3["App3"]{3, 2, 4, 3, 2, 3}
curve app4["App4"]{2, 1, 3.2, 2.5, 1, 2}
showLegend true
ticks 3
max 5
graticule polygon
</pre
>
<pre class="mermaid">
%%{init: {'theme': 'forest'} }%%
radar-beta
title Forest theme
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
</pre
>
<pre class="mermaid" style="background-color: black">
%%{init: {'theme': 'dark'} }%%
radar-beta
title Dark theme
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
</pre
>
<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'cScale0': '#ff0000', 'cScale1': '#00ff00', 'cScale2': '#0000ff'}} }%%
radar-beta
title Custom colors
axis Agility, Speed, Strength
axis Stam["Stamina"] , Intel["Intelligence"]
curve Ninja1["Naruto"]{
Agility 2, Speed 2,
Strength 3, Stam 5,
Intel 0
}
curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
curve Ninja3["Ninja"] {3, 2, 1, 5, 4}
</pre
>
<pre class="mermaid">
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
title Custom colors, axisScaleFactor, curveTension, opacity
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}
</pre>
</div>
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
logLevel: 3,
securityLevel: 'loose',
});
</script>
<style>
.diagrams {
display: flex;
flex-wrap: wrap;
}
pre {
width: 45vw;
padding: 2em;
}
</style>
</body>
</html>

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**

View File

@@ -4,12 +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
## Table of contents
## Modules
### 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)

View File

@@ -1,190 +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`**
## Table of contents
### Constructors
- [constructor](mermaid.UnknownDiagramError.md#constructor)
### Properties
- [cause](mermaid.UnknownDiagramError.md#cause)
- [message](mermaid.UnknownDiagramError.md#message)
- [name](mermaid.UnknownDiagramError.md#name)
- [stack](mermaid.UnknownDiagramError.md#stack)
- [prepareStackTrace](mermaid.UnknownDiagramError.md#preparestacktrace)
- [stackTraceLimit](mermaid.UnknownDiagramError.md#stacktracelimit)
### Methods
- [captureStackTrace](mermaid.UnknownDiagramError.md#capturestacktrace)
## 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\@22.13.5/node_modules/@types/node/globals.d.ts:143
---
### stackTraceLimit
`Static` **stackTraceLimit**: `number`
#### Inherited from
Error.stackTraceLimit
#### Defined in
node_modules/.pnpm/@types+node\@22.13.5/node_modules/@types/node/globals.d.ts:145
## 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\@22.13.5/node_modules/@types/node/globals.d.ts:136

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)

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`

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

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

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`

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`

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`

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

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

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)

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)

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)

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)

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)

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).

View File

@@ -1,58 +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
## Table of contents
### Properties
- [error](mermaid.DetailedError.md#error)
- [hash](mermaid.DetailedError.md#hash)
- [message](mermaid.DetailedError.md#message)
- [str](mermaid.DetailedError.md#str)
## 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)

View File

@@ -1,47 +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
## Table of contents
### Properties
- [detector](mermaid.ExternalDiagramDefinition.md#detector)
- [id](mermaid.ExternalDiagramDefinition.md#id)
- [loader](mermaid.ExternalDiagramDefinition.md#loader)
## 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)

View File

@@ -1,51 +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`
## Table of contents
### Properties
- [config](mermaid.LayoutData.md#config)
- [edges](mermaid.LayoutData.md#edges)
- [nodes](mermaid.LayoutData.md#nodes)
## 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)

View File

@@ -1,47 +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
## Table of contents
### Properties
- [algorithm](mermaid.LayoutLoaderDefinition.md#algorithm)
- [loader](mermaid.LayoutLoaderDefinition.md#loader)
- [name](mermaid.LayoutLoaderDefinition.md#name)
## 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)

View File

@@ -1,407 +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
## Table of contents
### Properties
- [contentLoaded](mermaid.Mermaid.md#contentloaded)
- [detectType](mermaid.Mermaid.md#detecttype)
- [init](mermaid.Mermaid.md#init)
- [initialize](mermaid.Mermaid.md#initialize)
- [mermaidAPI](mermaid.Mermaid.md#mermaidapi)
- [parse](mermaid.Mermaid.md#parse)
- [parseError](mermaid.Mermaid.md#parseerror)
- [registerExternalDiagrams](mermaid.Mermaid.md#registerexternaldiagrams)
- [registerIconPacks](mermaid.Mermaid.md#registericonpacks)
- [registerLayoutLoaders](mermaid.Mermaid.md#registerlayoutloaders)
- [render](mermaid.Mermaid.md#render)
- [run](mermaid.Mermaid.md#run)
- [setParseErrorHandler](mermaid.Mermaid.md#setparseerrorhandler)
- [startOnLoad](mermaid.Mermaid.md#startonload)
## 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)

View File

@@ -1,593 +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
## Table of contents
### Properties
- [altFontFamily](mermaid.MermaidConfig.md#altfontfamily)
- [architecture](mermaid.MermaidConfig.md#architecture)
- [arrowMarkerAbsolute](mermaid.MermaidConfig.md#arrowmarkerabsolute)
- [block](mermaid.MermaidConfig.md#block)
- [c4](mermaid.MermaidConfig.md#c4)
- [class](mermaid.MermaidConfig.md#class)
- [darkMode](mermaid.MermaidConfig.md#darkmode)
- [deterministicIDSeed](mermaid.MermaidConfig.md#deterministicidseed)
- [deterministicIds](mermaid.MermaidConfig.md#deterministicids)
- [dompurifyConfig](mermaid.MermaidConfig.md#dompurifyconfig)
- [elk](mermaid.MermaidConfig.md#elk)
- [er](mermaid.MermaidConfig.md#er)
- [flowchart](mermaid.MermaidConfig.md#flowchart)
- [fontFamily](mermaid.MermaidConfig.md#fontfamily)
- [fontSize](mermaid.MermaidConfig.md#fontsize)
- [forceLegacyMathML](mermaid.MermaidConfig.md#forcelegacymathml)
- [gantt](mermaid.MermaidConfig.md#gantt)
- [gitGraph](mermaid.MermaidConfig.md#gitgraph)
- [handDrawnSeed](mermaid.MermaidConfig.md#handdrawnseed)
- [htmlLabels](mermaid.MermaidConfig.md#htmllabels)
- [journey](mermaid.MermaidConfig.md#journey)
- [kanban](mermaid.MermaidConfig.md#kanban)
- [layout](mermaid.MermaidConfig.md#layout)
- [legacyMathML](mermaid.MermaidConfig.md#legacymathml)
- [logLevel](mermaid.MermaidConfig.md#loglevel)
- [look](mermaid.MermaidConfig.md#look)
- [markdownAutoWrap](mermaid.MermaidConfig.md#markdownautowrap)
- [maxEdges](mermaid.MermaidConfig.md#maxedges)
- [maxTextSize](mermaid.MermaidConfig.md#maxtextsize)
- [mindmap](mermaid.MermaidConfig.md#mindmap)
- [packet](mermaid.MermaidConfig.md#packet)
- [pie](mermaid.MermaidConfig.md#pie)
- [quadrantChart](mermaid.MermaidConfig.md#quadrantchart)
- [requirement](mermaid.MermaidConfig.md#requirement)
- [sankey](mermaid.MermaidConfig.md#sankey)
- [secure](mermaid.MermaidConfig.md#secure)
- [securityLevel](mermaid.MermaidConfig.md#securitylevel)
- [sequence](mermaid.MermaidConfig.md#sequence)
- [startOnLoad](mermaid.MermaidConfig.md#startonload)
- [state](mermaid.MermaidConfig.md#state)
- [suppressErrorRendering](mermaid.MermaidConfig.md#suppresserrorrendering)
- [theme](mermaid.MermaidConfig.md#theme)
- [themeCSS](mermaid.MermaidConfig.md#themecss)
- [themeVariables](mermaid.MermaidConfig.md#themevariables)
- [timeline](mermaid.MermaidConfig.md#timeline)
- [wrap](mermaid.MermaidConfig.md#wrap)
- [xyChart](mermaid.MermaidConfig.md#xychart)
## 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)

View File

@@ -1,28 +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
## Table of contents
### Properties
- [suppressErrors](mermaid.ParseOptions.md#suppresserrors)
## 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)

View File

@@ -1,40 +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
## Table of contents
### Properties
- [config](mermaid.ParseResult.md#config)
- [diagramType](mermaid.ParseResult.md#diagramtype)
## 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)

View File

@@ -1,25 +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
## Table of contents
### Properties
- [algorithm](mermaid.RenderOptions.md#algorithm)
## 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)

View File

@@ -1,74 +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
## Table of contents
### Properties
- [bindFunctions](mermaid.RenderResult.md#bindfunctions)
- [diagramType](mermaid.RenderResult.md#diagramtype)
- [svg](mermaid.RenderResult.md#svg)
## 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)

View File

@@ -1,80 +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
## Table of contents
### Properties
- [nodes](mermaid.RunOptions.md#nodes)
- [postRenderCallback](mermaid.RunOptions.md#postrendercallback)
- [querySelector](mermaid.RunOptions.md#queryselector)
- [suppressErrors](mermaid.RunOptions.md#suppresserrors)
## 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)

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)

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`

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)

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)

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)

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)

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)

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)

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.

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.

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)

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.

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`

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)

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`

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)

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)

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)

View File

@@ -1,295 +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
## Table of contents
### Variables
- [defaultConfig](config.md#defaultconfig)
### Functions
- [addDirective](config.md#adddirective)
- [getConfig](config.md#getconfig)
- [getSiteConfig](config.md#getsiteconfig)
- [reset](config.md#reset)
- [sanitize](config.md#sanitize)
- [saveConfigFromInitialize](config.md#saveconfigfrominitialize)
- [setConfig](config.md#setconfig)
- [setSiteConfig](config.md#setsiteconfig)
- [updateCurrentConfig](config.md#updatecurrentconfig)
- [updateSiteConfig](config.md#updatesiteconfig)
## 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)

View File

@@ -1,40 +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
## Table of contents
### Variables
- [configKeys](defaultConfig.md#configkeys)
- [default](defaultConfig.md#default)
## 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)

View File

@@ -1,103 +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
## Table of contents
### 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](mermaid.md#internalhelpers)
- [ParseErrorFunction](mermaid.md#parseerrorfunction)
- [SVG](mermaid.md#svg)
- [SVGGroup](mermaid.md#svggroup)
### Variables
- [default](mermaid.md#default)
## 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)

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 --->

View File

@@ -1,5 +1,24 @@
# mermaid
## 11.6.0
### Minor Changes
- [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
- Config
- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
- LinkStyle command (linkStyle default interpolate ...)
- [#6381](https://github.com/mermaid-js/mermaid/pull/6381) [`95d73bc`](https://github.com/mermaid-js/mermaid/commit/95d73bc3f064dbf261a06483f94a7ef4d0bb52eb) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Add Radar Chart
### Patch Changes
- [#2](https://github.com/calvinvette/mermaid/pull/2) [`16d9b63`](https://github.com/mermaid-js/mermaid/commit/16d9b6345749ab5f24d5b8433efc3635d4913863) Thanks [@calvinvette](https://github.com/calvinvette)! - - [#6388](https://github.com/mermaid-js/mermaid/pull/6386)
Thanks [@bollwyvl](https://github.com/bollwyvl) - Fix requirement diagram containment arrow
- Updated dependencies [[`95d73bc`](https://github.com/mermaid-js/mermaid/commit/95d73bc3f064dbf261a06483f94a7ef4d0bb52eb)]:
- @mermaid-js/parser@0.4.0
## 11.5.0
### Minor Changes

View File

@@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "11.5.0",
"version": "11.6.0",
"description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
"type": "module",
"module": "./dist/mermaid.core.mjs",

View File

@@ -199,6 +199,7 @@ export interface MermaidConfig {
sankey?: SankeyDiagramConfig;
packet?: PacketDiagramConfig;
block?: BlockDiagramConfig;
radar?: RadarDiagramConfig;
dompurifyConfig?: DOMPurifyConfiguration;
wrap?: boolean;
fontSize?: number;
@@ -261,7 +262,19 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
* Defines how mermaid renders curves for flowcharts.
*
*/
curve?: 'basis' | 'linear' | 'cardinal';
curve?:
| 'basis'
| 'bumpX'
| 'bumpY'
| 'cardinal'
| 'catmullRom'
| 'linear'
| 'monotoneX'
| 'monotoneY'
| 'natural'
| 'step'
| 'stepAfter'
| 'stepBefore';
/**
* Represents the padding between the labels and the shape
*
@@ -1526,6 +1539,50 @@ export interface PacketDiagramConfig extends BaseDiagramConfig {
export interface BlockDiagramConfig extends BaseDiagramConfig {
padding?: number;
}
/**
* The object containing configurations specific for radar diagrams.
*
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "RadarDiagramConfig".
*/
export interface RadarDiagramConfig extends BaseDiagramConfig {
/**
* The size of the radar diagram.
*/
width?: number;
/**
* The size of the radar diagram.
*/
height?: number;
/**
* The margin from the top of the radar diagram.
*/
marginTop?: number;
/**
* The margin from the right of the radar diagram.
*/
marginRight?: number;
/**
* The margin from the bottom of the radar diagram.
*/
marginBottom?: number;
/**
* The margin from the left of the radar diagram.
*/
marginLeft?: number;
/**
* The scale factor of the axis.
*/
axisScaleFactor?: number;
/**
* The scale factor of the axis label.
*/
axisLabelFactor?: number;
/**
* The tension factor for the Catmull-Rom spline conversion to cubic Bézier curves.
*/
curveTension?: number;
}
/**
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "FontConfig".

View File

@@ -255,8 +255,12 @@ const config: RequiredDeep<MermaidConfig> = {
packet: {
...defaultConfigJson.packet,
},
radar: {
...defaultConfigJson.radar,
},
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const keyify = (obj: any, prefix = ''): string[] =>
Object.keys(obj).reduce((res: string[], el): string[] => {
if (Array.isArray(obj[el])) {

View File

@@ -22,6 +22,7 @@ import mindmap from '../diagrams/mindmap/detector.js';
import kanban from '../diagrams/kanban/detector.js';
import sankey from '../diagrams/sankey/sankeyDetector.js';
import { packet } from '../diagrams/packet/detector.js';
import { radar } from '../diagrams/radar/detector.js';
import block from '../diagrams/block/blockDetector.js';
import architecture from '../diagrams/architecture/architectureDetector.js';
import { registerLazyLoadedDiagrams } from './detectType.js';
@@ -94,6 +95,7 @@ export const addDiagrams = () => {
packet,
xychart,
block,
architecture
architecture,
radar
);
};

View File

@@ -98,3 +98,31 @@ describe('flow db class', () => {
}
});
});
describe('flow db getData', () => {
let flowDb: FlowDB;
beforeEach(() => {
flowDb = new FlowDB();
});
it('should use defaultInterpolate for edges without specific interpolate', () => {
flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined);
flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined);
flowDb.addLink(['A'], ['B'], {});
flowDb.updateLinkInterpolate(['default'], 'stepBefore');
const { edges } = flowDb.getData();
expect(edges[0].curve).toBe('stepBefore');
});
it('should prioritize edge-specific interpolate over defaultInterpolate', () => {
flowDb.addVertex('A', { text: 'A', type: 'text' }, undefined, [], [], '', {}, undefined);
flowDb.addVertex('B', { text: 'B', type: 'text' }, undefined, [], [], '', {}, undefined);
flowDb.addLink(['A'], ['B'], {});
flowDb.updateLinkInterpolate(['default'], 'stepBefore');
flowDb.updateLinkInterpolate([0], 'basis');
const { edges } = flowDb.getData();
expect(edges[0].curve).toBe('basis');
});
});

View File

@@ -252,6 +252,7 @@ export class FlowDB implements DiagramDB {
labelType: 'text',
classes: [],
isUserDefinedId: false,
interpolate: this.edges.defaultInterpolate,
};
log.info('abc78 Got edge...', edge);
const linkTextObj = type.text;
@@ -1124,6 +1125,7 @@ You have to call mermaid.initialize.`
look: config.look,
animate: rawEdge.animate,
animation: rawEdge.animation,
curve: rawEdge.interpolate || this.edges.defaultInterpolate || config.flowchart?.curve,
};
edges.push(edge);

View File

@@ -0,0 +1,128 @@
import { getConfig as commonGetConfig } from '../../config.js';
import type { RadarDiagramConfig } from '../../config.type.js';
import DEFAULT_CONFIG from '../../defaultConfig.js';
import { cleanAndMerge } from '../../utils.js';
import {
clear as commonClear,
getAccDescription,
getAccTitle,
getDiagramTitle,
setAccDescription,
setAccTitle,
setDiagramTitle,
} from '../common/commonDb.js';
import type {
Axis,
Curve,
Option,
Entry,
} from '../../../../parser/dist/src/language/generated/ast.js';
import type { RadarAxis, RadarCurve, RadarOptions, RadarDB, RadarData } from './types.js';
const defaultOptions: RadarOptions = {
showLegend: true,
ticks: 5,
max: null,
min: 0,
graticule: 'circle',
};
const defaultRadarData: RadarData = {
axes: [],
curves: [],
options: defaultOptions,
};
let data: RadarData = structuredClone(defaultRadarData);
const DEFAULT_RADAR_CONFIG: Required<RadarDiagramConfig> = DEFAULT_CONFIG.radar;
const getConfig = (): Required<RadarDiagramConfig> => {
const config = cleanAndMerge({
...DEFAULT_RADAR_CONFIG,
...commonGetConfig().radar,
});
return config;
};
const getAxes = (): RadarAxis[] => data.axes;
const getCurves = (): RadarCurve[] => data.curves;
const getOptions = (): RadarOptions => data.options;
const setAxes = (axes: Axis[]) => {
data.axes = axes.map((axis) => {
return {
name: axis.name,
label: axis.label ?? axis.name,
};
});
};
const setCurves = (curves: Curve[]) => {
data.curves = curves.map((curve) => {
return {
name: curve.name,
label: curve.label ?? curve.name,
entries: computeCurveEntries(curve.entries),
};
});
};
const computeCurveEntries = (entries: Entry[]): number[] => {
// If entries have axis reference, we must order them according to the axes
if (entries[0].axis == undefined) {
return entries.map((entry) => entry.value);
}
const axes = getAxes();
if (axes.length === 0) {
throw new Error('Axes must be populated before curves for reference entries');
}
return axes.map((axis) => {
const entry = entries.find((entry) => entry.axis?.$refText === axis.name);
if (entry === undefined) {
throw new Error('Missing entry for axis ' + axis.label);
}
return entry.value;
});
};
const setOptions = (options: Option[]) => {
// Create a map from option names to option objects for quick lookup
const optionMap = options.reduce(
(acc, option) => {
acc[option.name] = option;
return acc;
},
{} as Record<string, Option>
);
data.options = {
showLegend: (optionMap.showLegend?.value as boolean) ?? defaultOptions.showLegend,
ticks: (optionMap.ticks?.value as number) ?? defaultOptions.ticks,
max: (optionMap.max?.value as number) ?? defaultOptions.max,
min: (optionMap.min?.value as number) ?? defaultOptions.min,
graticule: (optionMap.graticule?.value as 'circle' | 'polygon') ?? defaultOptions.graticule,
};
};
const clear = () => {
commonClear();
data = structuredClone(defaultRadarData);
};
export const db: RadarDB = {
getAxes,
getCurves,
getOptions,
setAxes,
setCurves,
setOptions,
getConfig,
clear,
setAccTitle,
getAccTitle,
setDiagramTitle,
getDiagramTitle,
getAccDescription,
setAccDescription,
};

View File

@@ -0,0 +1,22 @@
import type {
DiagramDetector,
DiagramLoader,
ExternalDiagramDefinition,
} from '../../diagram-api/types.js';
const id = 'radar';
const detector: DiagramDetector = (txt) => {
return /^\s*radar-beta/.test(txt);
};
const loader: DiagramLoader = async () => {
const { diagram } = await import('./diagram.js');
return { id, diagram };
};
export const radar: ExternalDiagramDefinition = {
id,
detector,
loader,
};

View File

@@ -0,0 +1,12 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
import { db } from './db.js';
import { parser } from './parser.js';
import { renderer } from './renderer.js';
import { styles } from './styles.js';
export const diagram: DiagramDefinition = {
parser,
db,
renderer,
styles,
};

View File

@@ -0,0 +1,23 @@
import type { Radar } from '@mermaid-js/parser';
import { parse } from '@mermaid-js/parser';
import type { ParserDefinition } from '../../diagram-api/types.js';
import { log } from '../../logger.js';
import { populateCommonDb } from '../common/populateCommonDb.js';
import { db } from './db.js';
const populate = (ast: Radar) => {
populateCommonDb(ast, db);
const { axes, curves, options } = ast;
// Here we can add specific logic between the AST and the DB
db.setAxes(axes);
db.setCurves(curves);
db.setOptions(options);
};
export const parser: ParserDefinition = {
parse: async (input: string): Promise<void> => {
const ast: Radar = await parse('radar', input);
log.debug(ast);
populate(ast);
},
};

View File

@@ -0,0 +1,258 @@
import { it, describe, expect } from 'vitest';
import { db } from './db.js';
import { parser } from './parser.js';
import { renderer, relativeRadius, closedRoundCurve } from './renderer.js';
import { Diagram } from '../../Diagram.js';
import mermaidAPI from '../../mermaidAPI.js';
import { a } from 'vitest/dist/chunks/suite.qtkXWc6R.js';
import { buildRadarStyleOptions } from './styles.js';
const {
clear,
getDiagramTitle,
getAccTitle,
getAccDescription,
getAxes,
getCurves,
getOptions,
getConfig,
} = db;
describe('radar diagrams', () => {
beforeEach(() => {
clear();
});
it('should handle a simple radar definition', async () => {
const str = `radar-beta
axis A,B,C
curve mycurve{1,2,3}`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
it('should handle diagram with data and title', async () => {
const str = `radar-beta
title Radar diagram
accTitle: Radar accTitle
accDescr: Radar accDescription
axis A["Axis A"], B["Axis B"] ,C["Axis C"]
curve mycurve["My Curve"]{1,2,3}
`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getDiagramTitle()).toMatchInlineSnapshot('"Radar diagram"');
expect(getAccTitle()).toMatchInlineSnapshot('"Radar accTitle"');
expect(getAccDescription()).toMatchInlineSnapshot('"Radar accDescription"');
expect(getAxes()).toMatchInlineSnapshot(`
[
{
"label": "Axis A",
"name": "A",
},
{
"label": "Axis B",
"name": "B",
},
{
"label": "Axis C",
"name": "C",
},
]
`);
expect(getCurves()).toMatchInlineSnapshot(`
[
{
"entries": [
1,
2,
3,
],
"label": "My Curve",
"name": "mycurve",
},
]
`);
expect(getOptions()).toMatchInlineSnapshot(`
{
"graticule": "circle",
"max": null,
"min": 0,
"showLegend": true,
"ticks": 5,
}
`);
});
it('should handle a radar diagram with options', async () => {
const str = `radar-beta
ticks 10
showLegend false
graticule polygon
min 1
max 10
`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getOptions()).toMatchInlineSnapshot(`
{
"graticule": "polygon",
"max": 10,
"min": 1,
"showLegend": false,
"ticks": 10,
}
`);
});
it('should handle curve with detailed data in any order', async () => {
const str = `radar-beta
axis A,B,C
curve mycurve{ C: 3, A: 1, B: 2 }`;
await expect(parser.parse(str)).resolves.not.toThrow();
expect(getCurves()).toMatchInlineSnapshot(`
[
{
"entries": [
1,
2,
3,
],
"label": "mycurve",
"name": "mycurve",
},
]
`);
});
it('should handle radar diagram with comments', async () => {
const str = `radar-beta
%% This is a comment
axis A,B,C
%% This is another comment
curve mycurve{1,2,3}
`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
it('should handle radar diagram with config override', async () => {
const str = `
%%{init: {'radar': {'marginTop': 80, 'axisLabelFactor': 1.25}}}%%
radar-beta
axis A,B,C
curve mycurve{1,2,3}
`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
it('should parse radar diagram with theme override', async () => {
const str = `
%%{init: { "theme": "base", "themeVariables": {'fontSize': 80, 'cScale0': '#123456' }}}%%
radar-beta:
axis A,B,C
curve mycurve{1,2,3}
`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
it('should handle radar diagram with radar style override', async () => {
const str = `
%%{init: { "theme": "base", "themeVariables": {'fontSize': 10, 'radar': { 'axisColor': '#FF0000' }}}}%%
radar-beta
axis A,B,C
curve mycurve{1,2,3}
`;
await expect(parser.parse(str)).resolves.not.toThrow();
});
describe('renderer', () => {
describe('relativeRadius', () => {
it('should calculate relative radius', () => {
expect(relativeRadius(5, 0, 10, 100)).toBe(50);
});
it('should handle min value', () => {
expect(relativeRadius(0, 0, 10, 100)).toBe(0);
});
it('should handle max value', () => {
expect(relativeRadius(10, 0, 10, 100)).toBe(100);
});
it('should clip values below min', () => {
expect(relativeRadius(-5, 0, 10, 100)).toBe(0);
});
it('should clip values above max', () => {
expect(relativeRadius(15, 0, 10, 100)).toBe(100);
});
it('should handle negative min', () => {
expect(relativeRadius(5, -10, 10, 100)).toBe(75);
});
});
describe('closedRoundCurve', () => {
it('should construct a polygon if tension is 0', () => {
const points = [
{ x: 0, y: 0 },
{ x: 100, y: 0 },
{ x: 100, y: 100 },
{ x: 0, y: 100 },
];
const tension = 0;
const path = closedRoundCurve(points, tension);
expect(path).toMatchInlineSnapshot(
`"M0,0 C0,0 100,0 100,0 C100,0 100,100 100,100 C100,100 0,100 0,100 C0,100 0,0 0,0 Z"`
);
});
it('should construct a simple round curve', () => {
const points = [
{ x: 0, y: 0 },
{ x: 100, y: 100 },
];
const tension = 0.5;
const path = closedRoundCurve(points, tension);
expect(path).toMatchInlineSnapshot(`"M0,0 C0,0 100,100 100,100 C100,100 0,0 0,0 Z"`);
});
it('should construct a closed round curve', () => {
const points = [
{ x: 0, y: 0 },
{ x: 100, y: 0 },
{ x: 100, y: 100 },
{ x: 0, y: 100 },
];
const tension = 0.5;
const path = closedRoundCurve(points, tension);
expect(path).toMatchInlineSnapshot(
`"M0,0 C50,-50 50,-50 100,0 C150,50 150,50 100,100 C50,150 50,150 0,100 C-50,50 -50,50 0,0 Z"`
);
});
});
describe('draw', () => {
it('should draw a simple radar diagram', async () => {
const str = `radar-beta
axis A,B,C
curve mycurve{1,2,3}`;
await mermaidAPI.parse(str);
const diagram = await Diagram.fromText(str);
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
});
it('should draw a complex radar diagram', async () => {
const str = `radar-beta
title Radar diagram
accTitle: Radar accTitle
accDescr: Radar accDescription
axis A["Axis A"], B["Axis B"] ,C["Axis C"]
curve mycurve["My Curve"]{1,2,3}
curve mycurve2["My Curve 2"]{ C: 1, A: 2, B: 3 }
graticule polygon
`;
await mermaidAPI.parse(str);
const diagram = await Diagram.fromText(str);
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
});
});
});
});

View File

@@ -0,0 +1,232 @@
import type { Diagram } from '../../Diagram.js';
import type { RadarDiagramConfig } from '../../config.type.js';
import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import type { RadarDB, RadarAxis, RadarCurve } from './types.js';
const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
const db = diagram.db as RadarDB;
const axes = db.getAxes();
const curves = db.getCurves();
const options = db.getOptions();
const config = db.getConfig();
const title = db.getDiagramTitle();
const svg: SVG = selectSvgElement(id);
// 🖼️ Draw the main frame
const g = drawFrame(svg, config);
// The maximum value for the radar chart is the 'max' option if it exists,
// otherwise it is the maximum value of the curves
const maxValue: number =
options.max ?? Math.max(...curves.map((curve) => Math.max(...curve.entries)));
const minValue: number = options.min;
const radius = Math.min(config.width, config.height) / 2;
// 🕸️ Draw graticule
drawGraticule(g, axes, radius, options.ticks, options.graticule);
// 🪓 Draw the axes
drawAxes(g, axes, radius, config);
// 📊 Draw the curves
drawCurves(g, axes, curves, minValue, maxValue, options.graticule, config);
// 🏷 Draw Legend
drawLegend(g, curves, options.showLegend, config);
// 🏷 Draw Title
g.append('text')
.attr('class', 'radarTitle')
.text(title)
.attr('x', 0)
.attr('y', -config.height / 2 - config.marginTop);
};
// Returns a g element to center the radar chart
// it is of type SVGElement
const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup => {
const totalWidth = config.width + config.marginLeft + config.marginRight;
const totalHeight = config.height + config.marginTop + config.marginBottom;
const center = {
x: config.marginLeft + config.width / 2,
y: config.marginTop + config.height / 2,
};
// Initialize the SVG
svg
.attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`)
.attr('width', totalWidth)
.attr('height', totalHeight);
// g element to center the radar chart
return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`);
};
const drawGraticule = (
g: SVGGroup,
axes: RadarAxis[],
radius: number,
ticks: number,
graticule: string
) => {
if (graticule === 'circle') {
// Draw a circle for each tick
for (let i = 0; i < ticks; i++) {
const r = (radius * (i + 1)) / ticks;
g.append('circle').attr('r', r).attr('class', 'radarGraticule');
}
} else if (graticule === 'polygon') {
// Draw a polygon
const numAxes = axes.length;
for (let i = 0; i < ticks; i++) {
const r = (radius * (i + 1)) / ticks;
const points = axes
.map((_, j) => {
const angle = (2 * j * Math.PI) / numAxes - Math.PI / 2;
const x = r * Math.cos(angle);
const y = r * Math.sin(angle);
return `${x},${y}`;
})
.join(' ');
g.append('polygon').attr('points', points).attr('class', 'radarGraticule');
}
}
};
const drawAxes = (
g: SVGGroup,
axes: RadarAxis[],
radius: number,
config: Required<RadarDiagramConfig>
) => {
const numAxes = axes.length;
for (let i = 0; i < numAxes; i++) {
const label = axes[i].label;
const angle = (2 * i * Math.PI) / numAxes - Math.PI / 2;
g.append('line')
.attr('x1', 0)
.attr('y1', 0)
.attr('x2', radius * config.axisScaleFactor * Math.cos(angle))
.attr('y2', radius * config.axisScaleFactor * Math.sin(angle))
.attr('class', 'radarAxisLine');
g.append('text')
.text(label)
.attr('x', radius * config.axisLabelFactor * Math.cos(angle))
.attr('y', radius * config.axisLabelFactor * Math.sin(angle))
.attr('class', 'radarAxisLabel');
}
};
function drawCurves(
g: SVGGroup,
axes: RadarAxis[],
curves: RadarCurve[],
minValue: number,
maxValue: number,
graticule: string,
config: Required<RadarDiagramConfig>
) {
const numAxes = axes.length;
const radius = Math.min(config.width, config.height) / 2;
curves.forEach((curve, index) => {
if (curve.entries.length !== numAxes) {
// Skip curves that do not have an entry for each axis.
return;
}
// Compute points for the curve.
const points = curve.entries.map((entry, i) => {
const angle = (2 * Math.PI * i) / numAxes - Math.PI / 2;
const r = relativeRadius(entry, minValue, maxValue, radius);
const x = r * Math.cos(angle);
const y = r * Math.sin(angle);
return { x, y };
});
if (graticule === 'circle') {
// Draw a closed curve through the points.
g.append('path')
.attr('d', closedRoundCurve(points, config.curveTension))
.attr('class', `radarCurve-${index}`);
} else if (graticule === 'polygon') {
// Draw a polygon for each curve.
g.append('polygon')
.attr('points', points.map((p) => `${p.x},${p.y}`).join(' '))
.attr('class', `radarCurve-${index}`);
}
});
}
export function relativeRadius(
value: number,
minValue: number,
maxValue: number,
radius: number
): number {
const clippedValue = Math.min(Math.max(value, minValue), maxValue);
return (radius * (clippedValue - minValue)) / (maxValue - minValue);
}
export function closedRoundCurve(points: { x: number; y: number }[], tension: number): string {
// Catmull-Rom spline helper function
const numPoints = points.length;
let d = `M${points[0].x},${points[0].y}`;
// For each segment from point i to point (i+1) mod n, compute control points.
for (let i = 0; i < numPoints; i++) {
const p0 = points[(i - 1 + numPoints) % numPoints];
const p1 = points[i];
const p2 = points[(i + 1) % numPoints];
const p3 = points[(i + 2) % numPoints];
// Calculate the control points for the cubic Bezier segment
const cp1 = {
x: p1.x + (p2.x - p0.x) * tension,
y: p1.y + (p2.y - p0.y) * tension,
};
const cp2 = {
x: p2.x - (p3.x - p1.x) * tension,
y: p2.y - (p3.y - p1.y) * tension,
};
d += ` C${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${p2.x},${p2.y}`;
}
return `${d} Z`;
}
function drawLegend(
g: SVGGroup,
curves: RadarCurve[],
showLegend: boolean,
config: Required<RadarDiagramConfig>
) {
if (!showLegend) {
return;
}
// Create a legend group and position it in the top-right corner of the chart.
const legendX = ((config.width / 2 + config.marginRight) * 3) / 4;
const legendY = (-(config.height / 2 + config.marginTop) * 3) / 4;
const lineHeight = 20;
curves.forEach((curve, index) => {
const itemGroup = g
.append('g')
.attr('transform', `translate(${legendX}, ${legendY + index * lineHeight})`);
// Draw a square marker for this curve.
itemGroup
.append('rect')
.attr('width', 12)
.attr('height', 12)
.attr('class', `radarLegendBox-${index}`);
// Draw the label text next to the marker.
itemGroup
.append('text')
.attr('x', 16)
.attr('y', 0)
.attr('class', 'radarLegendText')
.text(curve.label);
});
}
export const renderer: DiagramRenderer = { draw };

View File

@@ -0,0 +1,77 @@
import type { DiagramStylesProvider } from '../../diagram-api/types.js';
import { cleanAndMerge } from '../../utils.js';
import type { RadarStyleOptions } from './types.js';
import { getThemeVariables } from '../../themes/theme-default.js';
import { getConfig as getConfigAPI } from '../../config.js';
const genIndexStyles = (
themeVariables: ReturnType<typeof getThemeVariables>,
radarOptions: RadarStyleOptions
) => {
let sections = '';
for (let i = 0; i < themeVariables.THEME_COLOR_LIMIT; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const indexColor = (themeVariables as any)[`cScale${i}`];
sections += `
.radarCurve-${i} {
color: ${indexColor};
fill: ${indexColor};
fill-opacity: ${radarOptions.curveOpacity};
stroke: ${indexColor};
stroke-width: ${radarOptions.curveStrokeWidth};
}
.radarLegendBox-${i} {
fill: ${indexColor};
fill-opacity: ${radarOptions.curveOpacity};
stroke: ${indexColor};
}
`;
}
return sections;
};
export const buildRadarStyleOptions = (radar?: RadarStyleOptions) => {
const defaultThemeVariables = getThemeVariables();
const currentConfig = getConfigAPI();
const themeVariables = cleanAndMerge(defaultThemeVariables, currentConfig.themeVariables);
const radarOptions: RadarStyleOptions = cleanAndMerge(themeVariables.radar, radar);
return { themeVariables, radarOptions };
};
export const styles: DiagramStylesProvider = ({ radar }: { radar?: RadarStyleOptions } = {}) => {
const { themeVariables, radarOptions } = buildRadarStyleOptions(radar);
return `
.radarTitle {
font-size: ${themeVariables.fontSize};
color: ${themeVariables.titleColor};
dominant-baseline: hanging;
text-anchor: middle;
}
.radarAxisLine {
stroke: ${radarOptions.axisColor};
stroke-width: ${radarOptions.axisStrokeWidth};
}
.radarAxisLabel {
dominant-baseline: middle;
text-anchor: middle;
font-size: ${radarOptions.axisLabelFontSize}px;
color: ${radarOptions.axisColor};
}
.radarGraticule {
fill: ${radarOptions.graticuleColor};
fill-opacity: ${radarOptions.graticuleOpacity};
stroke: ${radarOptions.graticuleColor};
stroke-width: ${radarOptions.graticuleStrokeWidth};
}
.radarLegendText {
text-anchor: start;
font-size: ${radarOptions.legendFontSize}px;
dominant-baseline: hanging;
}
${genIndexStyles(themeVariables, radarOptions)}
`;
};
export default styles;

View File

@@ -0,0 +1,47 @@
import type { Axis, Curve, Option } from '../../../../parser/dist/src/language/generated/ast.js';
import type { RadarDiagramConfig } from '../../config.type.js';
import type { DiagramDBBase } from '../../diagram-api/types.js';
export interface RadarAxis {
name: string;
label: string;
}
export interface RadarCurve {
name: string;
entries: number[];
label: string;
}
export interface RadarOptions {
showLegend: boolean;
ticks: number;
max: number | null;
min: number;
graticule: 'circle' | 'polygon';
}
export interface RadarDB extends DiagramDBBase<RadarDiagramConfig> {
getAxes: () => RadarAxis[];
getCurves: () => RadarCurve[];
getOptions: () => RadarOptions;
setAxes: (axes: Axis[]) => void;
setCurves: (curves: Curve[]) => void;
setOptions: (options: Option[]) => void;
}
export interface RadarStyleOptions {
axisColor?: string;
axisStrokeWidth?: number;
axisLabelFontSize?: number;
curveOpacity?: number;
curveStrokeWidth?: number;
graticuleColor?: string;
graticuleOpacity?: number;
graticuleStrokeWidth?: number;
legendBoxSize?: number;
legendFontSize?: number;
}
export interface RadarData {
axes: RadarAxis[];
curves: RadarCurve[];
options: RadarOptions;
}

View File

@@ -328,7 +328,8 @@ export class RequirementDB implements DiagramDB {
thickness: 'normal',
type: 'normal',
pattern: isContains ? 'normal' : 'dashed',
arrowTypeEnd: isContains ? 'requirement_contains' : 'requirement_arrow',
arrowTypeStart: isContains ? 'requirement_contains' : '',
arrowTypeEnd: isContains ? '' : 'requirement_arrow',
look: config.look,
};

View File

@@ -1679,7 +1679,6 @@ Alice->Bob: Hello Bob, how are you?`;
const diagram = await Diagram.fromText(str);
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);

View File

@@ -6,38 +6,122 @@ interface Taglines {
url: string;
}
const taglines: Taglines[] = [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
const allTaglines: { [key: string]: { design: number; taglines: Taglines[] } } = {
A: {
design: 1,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_A',
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_A',
},
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_A',
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_A',
},
],
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
B: {
design: 2,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_B',
},
{
label: 'Diagram live with teammates in Mermaid Chart',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_B',
},
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_B',
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B',
},
],
},
{
label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
C: {
design: 1,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_C',
},
{
label: 'Diagram live with teammates in Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_C',
},
{
label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_C',
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_A',
},
],
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
D: {
design: 2,
taglines: [
{
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=AIbundle_D',
},
{
label: 'Diagram live with teammates in Mermaid Pro',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=teams_D',
},
{
label: 'Use the Visual Editor in Mermaid Pro to design and build diagrams',
url: 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor_D',
},
{
label: 'Explore the Mermaid Whiteboard from the creators of Mermaid',
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard_B',
},
],
},
];
};
// Initialize with default values
const design: Ref<number> = ref(1);
const taglines: Ref<Taglines[]> = ref([]);
const index: Ref<number> = ref(0);
let index = ref(Math.floor(Math.random() * taglines.length));
onMounted(() => {
// Select a random variant on client side
const variant =
Object.values(allTaglines)[Math.floor(Math.random() * Object.values(allTaglines).length)];
design.value = variant.design;
taglines.value = variant.taglines;
index.value = Math.floor(Math.random() * taglines.value.length);
// Set up the interval for cycling through taglines
setInterval(() => {
index.value = (index.value + 1) % taglines.length;
index.value = (index.value + 1) % taglines.value.length;
}, 5_000);
});
</script>
<template>
<div class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]">
<div
:class="[design === 1 ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670] ' : 'bg-[#E0095F]']"
class="mb-4 w-full top-bar flex p-2"
>
<p class="w-full tracking-wide fade-text text-sm">
<transition name="fade" mode="out-in">
<a
v-if="taglines.length > 0 && taglines[index]"
:key="index"
:href="taglines[index].url"
target="_blank"

View File

@@ -159,6 +159,7 @@ function sidebarSyntax() {
{ text: 'Packet 🔥', link: '/syntax/packet' },
{ text: 'Kanban 🔥', link: '/syntax/kanban' },
{ text: 'Architecture 🔥', link: '/syntax/architecture' },
{ text: 'Radar 🔥', link: '/syntax/radar' },
{ text: 'Other Examples', link: '/syntax/examples' },
],
},

View File

@@ -240,6 +240,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**

View File

@@ -0,0 +1,198 @@
# 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-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
```
## 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}
```
<!--- cspell:ignore Kiviat --->

View File

@@ -30,6 +30,7 @@ vi.mock('./diagrams/packet/renderer.js');
vi.mock('./diagrams/xychart/xychartRenderer.js');
vi.mock('./diagrams/requirement/requirementRenderer.js');
vi.mock('./diagrams/sequence/sequenceRenderer.js');
vi.mock('./diagrams/radar/renderer.js');
// -------------------------------------
@@ -797,6 +798,7 @@ graph TD;A--x|text including URL space|B;`)
{ textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
{ textDiagramType: 'radar-beta', expectedType: 'radar' },
];
describe('accessibility', () => {

View File

@@ -6,7 +6,22 @@ import utils from '../../utils.js';
import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
import { curveBasis, curveLinear, curveCardinal, line, select } from 'd3';
import {
curveBasis,
curveLinear,
curveCardinal,
curveBumpX,
curveBumpY,
curveCatmullRom,
curveMonotoneX,
curveMonotoneY,
curveNatural,
curveStep,
curveStepAfter,
curveStepBefore,
line,
select,
} from 'd3';
import rough from 'roughjs';
import createLabel from './createLabel.js';
import { addEdgeMarkers } from './edgeMarker.ts';
@@ -484,6 +499,33 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
case 'cardinal':
curve = curveCardinal;
break;
case 'bumpX':
curve = curveBumpX;
break;
case 'bumpY':
curve = curveBumpY;
break;
case 'catmullRom':
curve = curveCatmullRom;
break;
case 'monotoneX':
curve = curveMonotoneX;
break;
case 'monotoneY':
curve = curveMonotoneY;
break;
case 'natural':
curve = curveNatural;
break;
case 'step':
curve = curveStep;
break;
case 'stepAfter':
curve = curveStepAfter;
break;
case 'stepBefore':
curve = curveStepBefore;
break;
default:
curve = curveBasis;
}

View File

@@ -423,19 +423,19 @@ const requirement_contains = (elem, type, id) => {
const containsNode = elem
.append('defs')
.append('marker')
.attr('id', id + '_' + type + '-requirement_containsEnd')
.attr('refX', 20)
.attr('id', id + '_' + type + '-requirement_containsStart')
.attr('refX', 0)
.attr('refY', 10)
.attr('markerWidth', 20)
.attr('markerHeight', 20)
.attr('orient', 'auto')
.append('g');
containsNode.append('circle').attr('cx', 10).attr('cy', 10).attr('r', 10).attr('fill', 'none');
containsNode.append('circle').attr('cx', 10).attr('cy', 10).attr('r', 9).attr('fill', 'none');
containsNode.append('line').attr('x1', 0).attr('x2', 20).attr('y1', 10).attr('y2', 10);
containsNode.append('line').attr('x1', 1).attr('x2', 19).attr('y1', 10).attr('y2', 10);
containsNode.append('line').attr('y1', 0).attr('y2', 20).attr('x1', 10).attr('x2', 10);
containsNode.append('line').attr('y1', 1).attr('y2', 19).attr('x1', 10).attr('x2', 10);
};
// TODO rename the class diagram markers to something shape descriptive and semantic free

View File

@@ -55,6 +55,7 @@ required:
- packet
- block
- look
- radar
properties:
theme:
description: |
@@ -292,6 +293,8 @@ properties:
$ref: '#/$defs/PacketDiagramConfig'
block:
$ref: '#/$defs/BlockDiagramConfig'
radar:
$ref: '#/$defs/RadarDiagramConfig'
dompurifyConfig:
title: DOM Purify Configuration
description: Configuration options to pass to the `dompurify` library.
@@ -2063,7 +2066,21 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
description: |
Defines how mermaid renders curves for flowcharts.
type: string
enum: ['basis', 'linear', 'cardinal']
enum:
[
'basis',
'bumpX',
'bumpY',
'cardinal',
'catmullRom',
'linear',
'monotoneX',
'monotoneY',
'natural',
'step',
'stepAfter',
'stepBefore',
]
default: 'basis'
padding:
description: |
@@ -2208,6 +2225,60 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
minimum: 0
default: 8
RadarDiagramConfig:
title: Radar Diagram Config
allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
description: The object containing configurations specific for radar diagrams.
type: object
unevaluatedProperties: false
properties:
width:
description: The size of the radar diagram.
type: number
minimum: 1
default: 600
height:
description: The size of the radar diagram.
type: number
minimum: 1
default: 600
marginTop:
description: The margin from the top of the radar diagram.
type: number
minimum: 0
default: 50
marginRight:
description: The margin from the right of the radar diagram.
type: number
minimum: 0
default: 50
marginBottom:
description: The margin from the bottom of the radar diagram.
type: number
minimum: 0
default: 50
marginLeft:
description: The margin from the left of the radar diagram.
type: number
minimum: 0
default: 50
axisScaleFactor:
description: The scale factor of the axis.
type: number
minimum: 0
default: 1
axisLabelFactor:
description: The scale factor of the axis label.
type: number
minimum: 0
default: 1.05
curveTension:
description: The tension factor for the Catmull-Rom spline conversion to cubic Bézier curves.
type: number
minimum: 0
maximum: 1
default: 0.17
FontCalculator:
title: Font Calculator
description: |

View File

@@ -29,6 +29,7 @@ import timeline from './diagrams/timeline/styles.js';
import mindmap from './diagrams/mindmap/styles.js';
import packet from './diagrams/packet/styles.js';
import block from './diagrams/block/styles.js';
import radar from './diagrams/radar/styles.js';
import themes from './themes/index.js';
function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -99,6 +100,7 @@ describe('styles', () => {
block,
timeline,
packet,
radar,
})) {
test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
const { default: getStyles, addStylesForDiagram } = await import('./styles.js');

View File

@@ -230,6 +230,20 @@ class Theme {
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* architecture */
this.archEdgeColor = this.archEdgeColor || '#777';
this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';

View File

@@ -291,6 +291,20 @@ class Theme {
blockFillColor: this.background,
};
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* class */
this.classText = this.primaryTextColor;

View File

@@ -291,6 +291,20 @@ class Theme {
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* xychart */
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,

View File

@@ -265,6 +265,20 @@ class Theme {
blockFillColor: this.mainBkg,
};
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* xychart */
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,

View File

@@ -303,6 +303,20 @@ class Theme {
'#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0',
};
/* radar */
this.radar = {
axisColor: this.radar?.axisColor || this.lineColor,
axisStrokeWidth: this.radar?.axisStrokeWidth || 2,
axisLabelFontSize: this.radar?.axisLabelFontSize || 12,
curveOpacity: this.radar?.curveOpacity || 0.5,
curveStrokeWidth: this.radar?.curveStrokeWidth || 2,
graticuleColor: this.radar?.graticuleColor || '#DEDEDE',
graticuleStrokeWidth: this.radar?.graticuleStrokeWidth || 1,
graticuleOpacity: this.radar?.graticuleOpacity || 0.3,
legendBoxSize: this.radar?.legendBoxSize || 12,
legendFontSize: this.radar?.legendFontSize || 12,
};
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

View File

@@ -1,5 +1,11 @@
# @mermaid-js/parser
## 0.4.0
### Minor Changes
- [#6381](https://github.com/mermaid-js/mermaid/pull/6381) [`95d73bc`](https://github.com/mermaid-js/mermaid/commit/95d73bc3f064dbf261a06483f94a7ef4d0bb52eb) Thanks [@thomascizeron](https://github.com/thomascizeron)! - Add Radar Chart
## 0.3.0
### Minor Changes

View File

@@ -25,6 +25,11 @@
"id": "gitGraph",
"grammar": "src/language/gitGraph/gitGraph.langium",
"fileExtensions": [".mmd", ".mermaid"]
},
{
"id": "radar",
"grammar": "src/language/radar/radar.langium",
"fileExtensions": [".mmd", ".mermaid"]
}
],
"mode": "production",

View File

@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/parser",
"version": "0.3.0",
"version": "0.4.0",
"description": "MermaidJS parser",
"author": "Yokozuna59",
"contributors": [

View File

@@ -7,6 +7,7 @@ export {
PieSection,
Architecture,
GitGraph,
Radar,
Branch,
Commit,
Merge,
@@ -31,6 +32,7 @@ export {
PieGeneratedModule,
ArchitectureGeneratedModule,
GitGraphGeneratedModule,
RadarGeneratedModule,
} from './generated/module.js';
export * from './gitGraph/index.js';
@@ -39,3 +41,4 @@ export * from './info/index.js';
export * from './packet/index.js';
export * from './pie/index.js';
export * from './architecture/index.js';
export * from './radar/index.js';

View File

@@ -0,0 +1 @@
export * from './module.js';

View File

@@ -0,0 +1,73 @@
import type {
DefaultSharedCoreModuleContext,
LangiumCoreServices,
LangiumSharedCoreServices,
Module,
PartialLangiumCoreServices,
} from 'langium';
import {
EmptyFileSystem,
createDefaultCoreModule,
createDefaultSharedCoreModule,
inject,
} from 'langium';
import { CommonValueConverter } from '../common/valueConverter.js';
import { MermaidGeneratedSharedModule, RadarGeneratedModule } from '../generated/module.js';
import { RadarTokenBuilder } from './tokenBuilder.js';
/**
* Declaration of `Radar` services.
*/
interface RadarAddedServices {
parser: {
TokenBuilder: RadarTokenBuilder;
ValueConverter: CommonValueConverter;
};
}
/**
* Union of Langium default services and `Radar` services.
*/
export type RadarServices = LangiumCoreServices & RadarAddedServices;
/**
* Dependency injection module that overrides Langium default services and
* contributes the declared `Radar` services.
*/
export const RadarModule: Module<RadarServices, PartialLangiumCoreServices & RadarAddedServices> = {
parser: {
TokenBuilder: () => new RadarTokenBuilder(),
ValueConverter: () => new CommonValueConverter(),
},
};
/**
* Create the full set of services required by Langium.
*
* First inject the shared services by merging two modules:
* - Langium default shared services
* - Services generated by langium-cli
*
* Then inject the language-specific services by merging three modules:
* - Langium default language-specific services
* - Services generated by langium-cli
* - Services specified in this file
* @param context - Optional module context with the LSP connection
* @returns An object wrapping the shared services and the language-specific services
*/
export function createRadarServices(context: DefaultSharedCoreModuleContext = EmptyFileSystem): {
shared: LangiumSharedCoreServices;
Radar: RadarServices;
} {
const shared: LangiumSharedCoreServices = inject(
createDefaultSharedCoreModule(context),
MermaidGeneratedSharedModule
);
const Radar: RadarServices = inject(
createDefaultCoreModule({ shared }),
RadarGeneratedModule,
RadarModule
);
shared.ServiceRegistry.register(Radar);
return { shared, Radar };
}

View File

@@ -0,0 +1,89 @@
grammar Radar
// import "../common/common";
// Note: The import statement breaks TitleAndAccessibilities probably because of terminal order definition
// TODO: May need to change the common.langium to fix this
interface Common {
accDescr?: string;
accTitle?: string;
title?: string;
}
fragment TitleAndAccessibilities:
((accDescr=ACC_DESCR | accTitle=ACC_TITLE | title=TITLE) EOL)+
;
fragment EOL returns string:
NEWLINE+ | EOF
;
terminal NEWLINE: /\r?\n/;
terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}]*)})/;
terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
hidden terminal WHITESPACE: /[\t ]+/;
hidden terminal YAML: /---[\t ]*\r?\n(?:[\S\s]*?\r?\n)?---(?:\r?\n|(?!\S))/;
hidden terminal DIRECTIVE: /[\t ]*%%{[\S\s]*?}%%(?:\r?\n|(?!\S))/;
hidden terminal SINGLE_LINE_COMMENT: /[\t ]*%%[^\n\r]*/;
entry Radar:
NEWLINE*
('radar-beta' | 'radar-beta:' | 'radar-beta' ':')
NEWLINE*
(
TitleAndAccessibilities
| 'axis' axes+=Axis (',' axes+=Axis)*
| 'curve' curves+=Curve (',' curves+=Curve)*
| options+=Option (',' options+=Option)*
| NEWLINE
)*
;
fragment Label:
'[' label=STRING ']'
;
Axis:
name=ID (Label)?
;
Curve:
name=ID (Label)? '{' Entries '}'
;
fragment Entries:
NEWLINE* entries+=NumberEntry (',' NEWLINE* entries+=NumberEntry)* NEWLINE* |
NEWLINE* entries+=DetailedEntry (',' NEWLINE* entries+=DetailedEntry)* NEWLINE*
;
interface Entry {
axis?: @Axis;
value: number;
}
DetailedEntry returns Entry:
axis=[Axis:ID] ':'? value=NUMBER
;
NumberEntry returns Entry:
value=NUMBER
;
Option:
(
name='showLegend' value=BOOLEAN
| name='ticks' value=NUMBER
| name='max' value=NUMBER
| name='min' value=NUMBER
| name='graticule' value=GRATICULE
)
;
terminal NUMBER returns number: /(0|[1-9][0-9]*)(\.[0-9]+)?/;
terminal BOOLEAN returns boolean: 'true' | 'false';
terminal GRATICULE returns string: 'circle' | 'polygon';
terminal ID returns string: /[a-zA-Z_][a-zA-Z0-9\-_]*/;
terminal STRING: /"[^"]*"|'[^']*'/;

View File

@@ -0,0 +1,7 @@
import { AbstractMermaidTokenBuilder } from '../common/index.js';
export class RadarTokenBuilder extends AbstractMermaidTokenBuilder {
public constructor() {
super(['radar-beta']);
}
}

View File

@@ -1,8 +1,8 @@
import type { LangiumParser, ParseResult } from 'langium';
import type { Info, Packet, Pie, Architecture, GitGraph } from './index.js';
import type { Info, Packet, Pie, Architecture, GitGraph, Radar } from './index.js';
export type DiagramAST = Info | Packet | Pie | Architecture | GitGraph;
export type DiagramAST = Info | Packet | Pie | Architecture | GitGraph | Radar;
const parsers: Record<string, LangiumParser> = {};
const initializers = {
@@ -31,6 +31,11 @@ const initializers = {
const parser = createGitGraphServices().GitGraph.parser.LangiumParser;
parsers.gitGraph = parser;
},
radar: async () => {
const { createRadarServices } = await import('./language/radar/index.js');
const parser = createRadarServices().Radar.parser.LangiumParser;
parsers.radar = parser;
},
} as const;
export async function parse(diagramType: 'info', text: string): Promise<Info>;
@@ -38,6 +43,7 @@ export async function parse(diagramType: 'packet', text: string): Promise<Packet
export async function parse(diagramType: 'pie', text: string): Promise<Pie>;
export async function parse(diagramType: 'architecture', text: string): Promise<Architecture>;
export async function parse(diagramType: 'gitGraph', text: string): Promise<GitGraph>;
export async function parse(diagramType: 'radar', text: string): Promise<Radar>;
export async function parse<T extends DiagramAST>(
diagramType: keyof typeof initializers,

View File

@@ -0,0 +1,19 @@
import { describe, expect, it } from 'vitest';
import { Packet } from '../src/language/index.js';
import { expectNoErrorsOrAlternatives, packetParse as parse } from './test-util.js';
describe('packet', () => {
it.each([
`packet-beta`,
` packet-beta `,
`\tpacket-beta\t`,
`
\tpacket-beta
`,
])('should handle regular packet', (context: string) => {
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Packet);
});
});

View File

@@ -0,0 +1,343 @@
import { describe, expect, it } from 'vitest';
import { Radar } from '../src/language/index.js';
import { expectNoErrorsOrAlternatives, radarParse as parse } from './test-util.js';
const mutateGlobalSpacing = (context: string) => {
return [
context,
` ${context} `,
`\t${context}\t`,
`
\t${context}
`,
];
};
describe('radar', () => {
it.each([
...mutateGlobalSpacing('radar-beta'),
...mutateGlobalSpacing('radar-beta:'),
...mutateGlobalSpacing('radar-beta :'),
])('should handle regular radar', (context: string) => {
const result = parse(context);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
});
describe('should handle title, accDescr, and accTitle', () => {
it.each([
...mutateGlobalSpacing(' title My Title'),
...mutateGlobalSpacing('\n title My Title'),
])('should handle title', (context: string) => {
const result = parse(`radar-beta${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { title } = result.value;
expect(title).toBe('My Title');
});
it.each([
...mutateGlobalSpacing(' accDescr: My Accessible Description'),
...mutateGlobalSpacing('\n accDescr: My Accessible Description'),
])('should handle accDescr', (context: string) => {
const result = parse(`radar-beta${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { accDescr } = result.value;
expect(accDescr).toBe('My Accessible Description');
});
it.each([
...mutateGlobalSpacing(' accTitle: My Accessible Title'),
...mutateGlobalSpacing('\n accTitle: My Accessible Title'),
])('should handle accTitle', (context: string) => {
const result = parse(`radar-beta${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { accTitle } = result.value;
expect(accTitle).toBe('My Accessible Title');
});
it.each([
...mutateGlobalSpacing(
' title My Title\n accDescr: My Accessible Description\n accTitle: My Accessible Title'
),
...mutateGlobalSpacing(
'\n title My Title\n accDescr: My Accessible Description\n accTitle: My Accessible Title'
),
])('should handle title + accDescr + accTitle', (context: string) => {
const result = parse(`radar-beta${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { title, accDescr, accTitle } = result.value;
expect(title).toBe('My Title');
expect(accDescr).toBe('My Accessible Description');
expect(accTitle).toBe('My Accessible Title');
});
});
describe('should handle axis', () => {
it.each([`axis my-axis`, `axis my-axis["My Axis Label"]`])(
'should handle one axis',
(context: string) => {
const result = parse(`radar-beta\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { axes } = result.value;
expect(axes).toHaveLength(1);
expect(axes[0].$type).toBe('Axis');
expect(axes[0].name).toBe('my-axis');
}
);
it.each([
`axis my-axis["My Axis Label"]
axis my-axis2`,
`axis my-axis, my-axis2`,
`axis my-axis["My Axis Label"], my-axis2`,
`axis my-axis, my-axis2["My Second Axis Label"]`,
])('should handle multiple axes', (context: string) => {
const result = parse(`radar-beta\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { axes } = result.value;
expect(axes).toHaveLength(2);
expect(axes.every((axis) => axis.$type === 'Axis')).toBe(true);
expect(axes[0].name).toBe('my-axis');
expect(axes[1].name).toBe('my-axis2');
});
it.each([
`axis my-axis["My Axis Label"]
axis my-axis2["My Second Axis Label"]`,
`axis my-axis ["My Axis Label"], my-axis2\t["My Second Axis Label"]`,
])('should handle axis labels', (context: string) => {
const result = parse(`radar-beta\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { axes } = result.value;
expect(axes).toHaveLength(2);
expect(axes[0].name).toBe('my-axis');
expect(axes[0].label).toBe('My Axis Label');
expect(axes[1].name).toBe('my-axis2');
expect(axes[1].label).toBe('My Second Axis Label');
});
it('should not allow empty axis names', () => {
const result = parse(`radar-beta
axis`);
expect(result.parserErrors).not.toHaveLength(0);
});
it('should not allow non-comma separated axis names', () => {
const result = parse(`radar-beta
axis my-axis my-axis2`);
expect(result.parserErrors).not.toHaveLength(0);
});
});
describe('should handle curves', () => {
it.each([
`radar-beta
curve my-curve`,
`radar-beta
curve my-curve["My Curve Label"]`,
])('should not allow curves without axes', (context: string) => {
const result = parse(`radar-beta${context}`);
expect(result.parserErrors).not.toHaveLength(0);
});
it.each([
`radar-beta
axis my-axis
curve my-curve`,
`radar-beta
axis my-axis
curve my-curve["My Curve Label"]`,
])('should not allow curves without entries', (context: string) => {
const result = parse(`radar-beta${context}`);
expect(result.parserErrors).not.toHaveLength(0);
});
it.each([
`curve my-curve { 1 }`,
`curve my-curve {
1
}`,
`curve my-curve {
1
}`,
])('should handle one curve with one entry', (context: string) => {
const result = parse(`radar-beta\naxis my-axis\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { curves } = result.value;
expect(curves).toHaveLength(1);
expect(curves[0].$type).toBe('Curve');
expect(curves[0].name).toBe('my-curve');
expect(curves[0].entries).toHaveLength(1);
expect(curves[0].entries[0].$type).toBe('Entry');
expect(curves[0].entries[0].value).toBe(1);
});
it.each([
`curve my-curve { my-axis 1 }`,
`curve my-curve { my-axis : 1 }`,
`curve my-curve {
my-axis: 1
}`,
])('should handle one curve with one detailed entry', (context: string) => {
const result = parse(`radar-beta\naxis my-axis\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { curves } = result.value;
expect(curves).toHaveLength(1);
expect(curves[0].$type).toBe('Curve');
expect(curves[0].name).toBe('my-curve');
expect(curves[0].entries).toHaveLength(1);
expect(curves[0].entries[0].$type).toBe('Entry');
expect(curves[0].entries[0].value).toBe(1);
expect(curves[0].entries[0]?.axis?.$refText).toBe('my-axis');
});
it.each([
`curve my-curve { ax1 1, ax2 2 }`,
`curve my-curve {
ax1 1,
ax2 2
}`,
`curve my-curve["My Curve Label"] {
ax1: 1, ax2: 2
}`,
])('should handle one curve with multiple detailed entries', (context: string) => {
const result = parse(`radar-beta\naxis ax1, ax1\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { curves } = result.value;
expect(curves).toHaveLength(1);
expect(curves[0].$type).toBe('Curve');
expect(curves[0].name).toBe('my-curve');
expect(curves[0].entries).toHaveLength(2);
expect(curves[0].entries[0].$type).toBe('Entry');
expect(curves[0].entries[0].value).toBe(1);
expect(curves[0].entries[0]?.axis?.$refText).toBe('ax1');
expect(curves[0].entries[1].$type).toBe('Entry');
expect(curves[0].entries[1].value).toBe(2);
expect(curves[0].entries[1]?.axis?.$refText).toBe('ax2');
});
it.each([
`curve c1 { ax1 1, ax2 2 }
curve c2 { ax1 3, ax2 4 }`,
`curve c1 {
ax1 1,
ax2 2
}
curve c2 {
ax1 3,
ax2 4
}`,
`curve c1{ 1, 2 }, c2{ 3, 4 }`,
])('should handle multiple curves', (context: string) => {
const result = parse(`radar-beta\naxis ax1, ax1\n${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { curves } = result.value;
expect(curves).toHaveLength(2);
expect(curves.every((curve) => curve.$type === 'Curve')).toBe(true);
expect(curves[0].name).toBe('c1');
expect(curves[1].name).toBe('c2');
});
it('should not allow empty curve names', () => {
const result = parse(`radar-beta
axis my-axis
curve`);
expect(result.parserErrors).not.toHaveLength(0);
});
it('should not allow number and detailed entries in the same curve', () => {
const result = parse(`radar-beta
axis ax1, ax2
curve my-curve { 1, ax1 2 }`);
expect(result.parserErrors).not.toHaveLength(0);
});
it('should not allow non-comma separated entries', () => {
const result = parse(`radar-beta
axis ax1, ax2
curve my-curve { ax1 1 ax2 2 }`);
expect(result.parserErrors).not.toHaveLength(0);
});
});
describe('should handle options', () => {
it.each([`ticks 5`, `min 50`, `max 50`])(
`should handle number option %s`,
(context: string) => {
const result = parse(`radar-beta
axis ax1, ax2
curve c1 { ax1 1, ax2 2 }
${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { options } = result.value;
expect(options).toBeDefined();
const option = options.find((option) => option.name === context.split(' ')[0]);
expect(option).toBeDefined();
expect(option?.value).toBe(Number(context.split(' ')[1]));
}
);
it.each([`graticule circle`, `graticule polygon`])(
`should handle string option %s`,
(context: string) => {
const result = parse(`radar-beta
axis ax1, ax2
curve c1 { ax1 1, ax2 2 }
${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { options } = result.value;
expect(options).toBeDefined();
const option = options.find((option) => option.name === context.split(' ')[0]);
expect(option).toBeDefined();
expect(option?.value).toBe(context.split(' ')[1]);
}
);
it.each([`showLegend true`, `showLegend false`])(
`should handle boolean option %s`,
(context: string) => {
const result = parse(`radar-beta
axis ax1, ax2
curve c1 { ax1 1, ax2 2 }
${context}`);
expectNoErrorsOrAlternatives(result);
expect(result.value.$type).toBe(Radar);
const { options } = result.value;
expect(options).toBeDefined();
const option = options.find((option) => option.name === context.split(' ')[0]);
expect(option).toBeDefined();
expect(option?.value).toBe(context.split(' ')[1] === 'true');
}
);
});
});

View File

@@ -5,12 +5,18 @@ import type {
InfoServices,
Pie,
PieServices,
Radar,
RadarServices,
Packet,
PacketServices,
GitGraph,
GitGraphServices,
} from '../src/language/index.js';
import {
createInfoServices,
createPieServices,
createRadarServices,
createPacketServices,
createGitGraphServices,
} from '../src/language/index.js';
@@ -52,6 +58,28 @@ export function createPieTestServices() {
}
export const pieParse = createPieTestServices().parse;
const packetServices: PacketServices = createPacketServices().Packet;
const packetParser: LangiumParser = packetServices.parser.LangiumParser;
export function createPacketTestServices() {
const parse = (input: string) => {
return packetParser.parse<Packet>(input);
};
return { services: packetServices, parse };
}
export const packetParse = createPacketTestServices().parse;
const radarServices: RadarServices = createRadarServices().Radar;
const radarParser: LangiumParser = radarServices.parser.LangiumParser;
export function createRadarTestServices() {
const parse = (input: string) => {
return radarParser.parse<Radar>(input);
};
return { services: radarServices, parse };
}
export const radarParse = createRadarTestServices().parse;
const gitGraphServices: GitGraphServices = createGitGraphServices().GitGraph;
const gitGraphParser: LangiumParser = gitGraphServices.parser.LangiumParser;
export function createGitGraphTestServices() {