+ pie title Default text position: Animal adoption + accTitle: simple pie char demo + accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs. + "dogs" : -60.67 + "rats" : 40.12 ++ +
+--- +config: + layout: elk + elk: + mergeEdges: false + forceNodeModelOrder: false + considerModelOrder: NONE + +--- + flowchart TB + a --> a1 & a2 & a3 & a4 + b --> b1 & b2 + b2 --> b3 + b1 --> b4+
+treemap
+"Section 1"
+ "Leaf 1.1": 12
+ "Section 1.2":::class1
+ "Leaf 1.2.1": 12
+"Section 2"
+ "Leaf 2.1": 20:::class1
+ "Leaf 2.2": 25
+ "Leaf 2.3": 12
diff --git a/cypress/timings.json b/cypress/timings.json
index 05263ad9f..50130f180 100644
--- a/cypress/timings.json
+++ b/cypress/timings.json
@@ -2,219 +2,219 @@
"durations": [
{
"spec": "cypress/integration/other/configuration.spec.js",
- "duration": 5672
+ "duration": 5815
},
{
"spec": "cypress/integration/other/external-diagrams.spec.js",
- "duration": 1990
+ "duration": 2035
},
{
"spec": "cypress/integration/other/ghsa.spec.js",
- "duration": 3186
+ "duration": 3386
},
{
"spec": "cypress/integration/other/iife.spec.js",
- "duration": 1948
+ "duration": 2089
},
{
"spec": "cypress/integration/other/interaction.spec.js",
- "duration": 11938
+ "duration": 11578
},
{
"spec": "cypress/integration/other/rerender.spec.js",
- "duration": 1932
+ "duration": 2119
},
{
"spec": "cypress/integration/other/xss.spec.js",
- "duration": 27237
+ "duration": 27282
},
{
"spec": "cypress/integration/rendering/appli.spec.js",
- "duration": 3170
+ "duration": 3377
},
{
"spec": "cypress/integration/rendering/architecture.spec.ts",
- "duration": 104
+ "duration": 97
},
{
"spec": "cypress/integration/rendering/block.spec.js",
- "duration": 17390
+ "duration": 18137
},
{
"spec": "cypress/integration/rendering/c4.spec.js",
- "duration": 5296
+ "duration": 5455
},
{
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
- "duration": 39004
+ "duration": 40850
},
{
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
- "duration": 37653
+ "duration": 37964
},
{
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
- "duration": 23278
+ "duration": 23446
},
{
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
- "duration": 36645
+ "duration": 37207
},
{
"spec": "cypress/integration/rendering/classDiagram.spec.js",
- "duration": 15418
+ "duration": 16531
},
{
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
- "duration": 9684
+ "duration": 9385
},
{
"spec": "cypress/integration/rendering/current.spec.js",
- "duration": 2570
+ "duration": 2697
},
{
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
- "duration": 84687
+ "duration": 88648
},
{
"spec": "cypress/integration/rendering/erDiagram.spec.js",
- "duration": 14819
+ "duration": 15094
},
{
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
- "duration": 3371
+ "duration": 3548
},
{
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
- "duration": 39925
+ "duration": 44889
},
{
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
- "duration": 34694
+ "duration": 30487
},
{
"spec": "cypress/integration/rendering/flowchart-icon.spec.js",
- "duration": 7137
+ "duration": 7375
},
{
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
- "duration": 24740
+ "duration": 24913
},
{
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
- "duration": 42077
+ "duration": 51927
},
{
"spec": "cypress/integration/rendering/flowchart.spec.js",
- "duration": 30642
+ "duration": 31676
},
{
"spec": "cypress/integration/rendering/gantt.spec.js",
- "duration": 18085
+ "duration": 19897
},
{
"spec": "cypress/integration/rendering/gitGraph.spec.js",
- "duration": 50107
+ "duration": 53450
},
{
"spec": "cypress/integration/rendering/iconShape.spec.ts",
- "duration": 276279
+ "duration": 287035
},
{
"spec": "cypress/integration/rendering/imageShape.spec.ts",
- "duration": 56505
+ "duration": 58555
},
{
"spec": "cypress/integration/rendering/info.spec.ts",
- "duration": 3036
+ "duration": 3179
},
{
"spec": "cypress/integration/rendering/journey.spec.js",
- "duration": 6889
+ "duration": 7099
},
{
"spec": "cypress/integration/rendering/kanban.spec.ts",
- "duration": 7353
+ "duration": 7628
},
{
"spec": "cypress/integration/rendering/katex.spec.js",
- "duration": 3580
+ "duration": 3764
},
{
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
- "duration": 2508
+ "duration": 2573
},
{
"spec": "cypress/integration/rendering/mindmap.spec.ts",
- "duration": 10939
+ "duration": 11269
},
{
"spec": "cypress/integration/rendering/newShapes.spec.ts",
- "duration": 149102
+ "duration": 148389
},
{
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
- "duration": 113987
+ "duration": 113395
},
{
"spec": "cypress/integration/rendering/packet.spec.ts",
- "duration": 4060
+ "duration": 4714
},
{
"spec": "cypress/integration/rendering/pie.spec.ts",
- "duration": 5715
+ "duration": 6446
},
{
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
- "duration": 8945
+ "duration": 9133
},
{
"spec": "cypress/integration/rendering/radar.spec.js",
- "duration": 5337
+ "duration": 5544
},
{
"spec": "cypress/integration/rendering/requirement.spec.js",
- "duration": 2643
+ "duration": 2709
},
{
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
- "duration": 52072
+ "duration": 55647
},
{
"spec": "cypress/integration/rendering/sankey.spec.ts",
- "duration": 6692
+ "duration": 6751
},
{
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
- "duration": 35721
+ "duration": 36618
},
{
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
- "duration": 26030
+ "duration": 29642
},
{
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
- "duration": 16333
+ "duration": 16037
},
{
"spec": "cypress/integration/rendering/theme.spec.js",
- "duration": 29287
+ "duration": 30006
},
{
"spec": "cypress/integration/rendering/timeline.spec.ts",
- "duration": 8491
+ "duration": 8451
},
{
"spec": "cypress/integration/rendering/treemap.spec.ts",
- "duration": 12291
+ "duration": 11996
},
{
"spec": "cypress/integration/rendering/xyChart.spec.js",
- "duration": 20651
+ "duration": 20627
},
{
"spec": "cypress/integration/rendering/zenuml.spec.js",
- "duration": 3218
+ "duration": 3472
}
]
}
diff --git a/demos/block.html b/demos/block.html
index f0957b670..5296126e0 100644
--- a/demos/block.html
+++ b/demos/block.html
@@ -10,7 +10,7 @@
Block diagram demos
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -26,7 +26,7 @@ columns 1
style B fill:#f9F,stroke:#333,stroke-width:4px
-block-beta
+block
A1["square"]
B1("rounded")
C1(("circle"))
@@ -36,7 +36,7 @@ block-beta
-block-beta
+block
A1(["stadium"])
A2[["subroutine"]]
B1[("cylinder")]
@@ -48,7 +48,7 @@ block-beta
-block-beta
+block
block:e:4
columns 2
f
@@ -57,7 +57,7 @@ block-beta
-block-beta
+block
block:e:4
columns 2
f
@@ -67,7 +67,7 @@ block-beta
-block-beta
+block
columns 3
a:3
block:e:3
@@ -80,7 +80,7 @@ block-beta
-block-beta
+block
columns 4
a b c d
block:e:4
@@ -97,19 +97,19 @@ flowchart LR
X-- "a label" -->z
-block-beta
+block
columns 5
A space B
A --x B
-block-beta
+block
columns 3
a["A wide one"] b:2 c:2 d
-block-beta
+block
columns 3
a b c
e:3
@@ -117,7 +117,7 @@ columns 3
-block-beta
+block
A1:3
A2:1
diff --git a/demos/sankey.html b/demos/sankey.html
index 2439cb589..11bb541c2 100644
--- a/demos/sankey.html
+++ b/demos/sankey.html
@@ -20,12 +20,14 @@
width: 800
nodeAlignment: left
---
- sankey-beta
- Revenue,Expenses,10
- Revenue,Profit,10
- Expenses,Manufacturing,5
- Expenses,Tax,3
- Expenses,Research,2
+ sankey
+ a,b,8
+ b,c,8
+ c,d,8
+ d,e,8
+
+ x,c,4
+ c,y,4
Energy flow
@@ -40,7 +42,7 @@
linkColor: gradient
nodeAlignment: justify
---
- sankey-beta
+ sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
diff --git a/demos/xychart.html b/demos/xychart.html
index 25f8ec8ca..5706b15ea 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -16,7 +16,7 @@
XY Charts demos
- xychart-beta
+ xychart
title "Sales Revenue (in $)"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
XY Charts horizontal
- xychart-beta horizontal
+ xychart horizontal
title "Basic xychart"
x-axis "this is x axis" [category1, "category 2", category3, category4]
y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
XY Charts only lines and bar
- xychart-beta
+ xychart
line [23, 46, 77, 34]
line [45, 32, 33, 12]
line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
XY Charts with +ve and -ve numbers
- xychart-beta
+ xychart
line [+1.3, .6, 2.4, -.34]
XY Charts Bar with multiple category
- xychart-beta
+ xychart
title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
XY Charts line with multiple category
- xychart-beta
+ xychart
title "Line chart with many category"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
XY Charts category with large text
- xychart-beta
+ xychart
title "Basic xychart with many categories with category overlap"
x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
height: 20
plotReservedSpacePercent: 100
---
- xychart-beta
+ xychart
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
@@ -103,7 +103,7 @@ config:
height: 20
plotReservedSpacePercent: 100
---
- xychart-beta
+ xychart
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
@@ -136,7 +136,7 @@ config:
chartOrientation: horizontal
plotReservedSpacePercent: 60
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63"
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
diff --git a/docs/community/contributing.md b/docs/community/contributing.md
index ef6bef987..ce010b316 100644
--- a/docs/community/contributing.md
+++ b/docs/community/contributing.md
@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-
Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
-> **💡 Tip**
-> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
```bash
git clone git@github.com/your-fork/mermaid
diff --git a/docs/community/intro.md b/docs/community/intro.md
index a549d031e..6b1430572 100644
--- a/docs/community/intro.md
+++ b/docs/community/intro.md
@@ -33,8 +33,7 @@ mindmap
## Join the Development
-> **💡 Tip**
-> **Check out our** [**detailed contribution guide**](./contributing.md).
+> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).
Where to start:
@@ -48,8 +47,7 @@ Where to start:
## A Question Or a Suggestion?
-> **💡 Tip**
-> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
+> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
If you have faced a vulnerability [report it to us](./security.md).
diff --git a/docs/config/directives.md b/docs/config/directives.md
index 40ebd81a4..13a663133 100644
--- a/docs/config/directives.md
+++ b/docs/config/directives.md
@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
Mermaid basically supports two types of configuration options to be overridden by directives.
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
- theme
- fontFamily
- logLevel
diff --git a/docs/config/setup/defaultConfig/variables/configKeys.md b/docs/config/setup/defaultConfig/variables/configKeys.md
index 222111bd5..82b68d780 100644
--- a/docs/config/setup/defaultConfig/variables/configKeys.md
+++ b/docs/config/setup/defaultConfig/variables/configKeys.md
@@ -12,4 +12,4 @@
> `const` **configKeys**: `Set`<`string`>
-Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)
+Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292)
diff --git a/docs/config/setup/mermaid/README.md b/docs/config/setup/mermaid/README.md
index 653d90592..3e2cd7a28 100644
--- a/docs/config/setup/mermaid/README.md
+++ b/docs/config/setup/mermaid/README.md
@@ -10,6 +10,10 @@
# mermaid
+## Classes
+
+- [UnknownDiagramError](classes/UnknownDiagramError.md)
+
## Interfaces
- [DetailedError](interfaces/DetailedError.md)
@@ -23,7 +27,6 @@
- [RenderOptions](interfaces/RenderOptions.md)
- [RenderResult](interfaces/RenderResult.md)
- [RunOptions](interfaces/RunOptions.md)
-- [UnknownDiagramError](interfaces/UnknownDiagramError.md)
## Type Aliases
diff --git a/docs/config/setup/mermaid/classes/UnknownDiagramError.md b/docs/config/setup/mermaid/classes/UnknownDiagramError.md
new file mode 100644
index 000000000..c077f0e34
--- /dev/null
+++ b/docs/config/setup/mermaid/classes/UnknownDiagramError.md
@@ -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
+
+
+
+#### 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`
diff --git a/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md b/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
index aac23f764..789e62045 100644
--- a/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
+++ b/docs/config/setup/mermaid/interfaces/LayoutLoaderDefinition.md
@@ -10,7 +10,7 @@
# 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)
+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)
## Properties
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:21](https://github.co
> `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)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:27](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L27)
---
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:24](https://github.co
> **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)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:26](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L26)
---
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:23](https://github.co
> **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)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
diff --git a/docs/config/setup/mermaid/interfaces/Mermaid.md b/docs/config/setup/mermaid/interfaces/Mermaid.md
index 0c63d140a..fd15b306b 100644
--- a/docs/config/setup/mermaid/interfaces/Mermaid.md
+++ b/docs/config/setup/mermaid/interfaces/Mermaid.md
@@ -32,7 +32,7 @@ page.
### detectType()
-> **detectType**: (`text`, `config?`) => `string`
+> **detectType**: (`text`, `config`?) => `string`
Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
@@ -105,7 +105,7 @@ An array of objects with the id of the diagram.
### ~~init()~~
-> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
+> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
@@ -117,7 +117,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/
[`MermaidConfig`](MermaidConfig.md)
-**Deprecated**, please set configuration in [initialize](#initialize).
+**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
##### nodes?
@@ -141,13 +141,13 @@ Called once for each rendered diagram's id.
#### Deprecated
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
Renders the mermaid diagrams
#### Deprecated
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
---
@@ -176,7 +176,7 @@ Configuration object for mermaid.
### ~~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); }>
+> **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:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
@@ -184,81 +184,73 @@ Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/
#### Deprecated
-Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+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)>; }
+> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
-#### Call Signature
-
-> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
-
Parse the text and validate the syntax.
-##### Parameters
+#### Parameters
-###### text
+##### text
`string`
The mermaid diagram definition.
-###### parseOptions
+##### parseOptions
[`ParseOptions`](ParseOptions.md) & `object`
Options for parsing.
-##### Returns
+#### 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
+#### See
[ParseOptions](ParseOptions.md)
-##### Throws
+#### Throws
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
-#### Call Signature
-
-> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
-
Parse the text and validate the syntax.
-##### Parameters
+#### Parameters
-###### text
+##### text
`string`
The mermaid diagram definition.
-###### parseOptions?
+##### parseOptions?
[`ParseOptions`](ParseOptions.md)
Options for parsing.
-##### Returns
+#### 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
+#### See
[ParseOptions](ParseOptions.md)
-##### Throws
+#### Throws
Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
@@ -340,7 +332,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
### render()
-> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
+> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
diff --git a/docs/config/setup/mermaid/interfaces/MermaidConfig.md b/docs/config/setup/mermaid/interfaces/MermaidConfig.md
index d08533713..f4c5b0b2b 100644
--- a/docs/config/setup/mermaid/interfaces/MermaidConfig.md
+++ b/docs/config/setup/mermaid/interfaces/MermaidConfig.md
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
---
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
---
@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
Controls whether or arrow markers in html code are absolute paths or anchors.
This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
---
@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)
---
@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
---
@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
---
@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
This option controls if the generated ids of nodes in the SVG are
generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
This option is the optional seed for deterministic ids.
If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)
---
@@ -115,12 +115,24 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
+#### considerModelOrder?
+
+> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
+
+Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+
#### 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.
+#### forceNodeModelOrder?
+
+> `optional` **forceNodeModelOrder**: `boolean`
+
+The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+
#### mergeEdges?
> `optional` **mergeEdges**: `boolean`
@@ -139,7 +151,7 @@ Elk specific option affecting how nodes are placed.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
---
@@ -147,7 +159,7 @@ Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
---
@@ -155,7 +167,7 @@ Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
Specifies the font to be used in the rendered diagrams.
Can be any possible CSS `font-family`.
@@ -167,7 +179,7 @@ See
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215)
---
@@ -175,7 +187,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
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.
@@ -187,7 +199,7 @@ If set to true, ignores legacyMathML.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
---
@@ -195,7 +207,7 @@ Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)
---
@@ -213,7 +225,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)
---
@@ -221,7 +233,7 @@ Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
---
@@ -229,7 +241,7 @@ Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
---
@@ -247,7 +259,7 @@ Defines which layout algorithm to use for rendering the diagram.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
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
@@ -260,7 +272,7 @@ fall back to legacy rendering for KaTeX.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
This option decides the amount of logging to be used by mermaid.
@@ -280,7 +292,7 @@ Defines which main look to use for the diagram.
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216)
---
@@ -308,7 +320,7 @@ The maximum allowed size of the users text diagram
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
---
@@ -316,7 +328,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
---
@@ -324,7 +336,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
---
@@ -332,7 +344,7 @@ Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
---
@@ -340,7 +352,7 @@ Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
---
@@ -348,7 +360,7 @@ Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
---
@@ -356,7 +368,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
---
@@ -364,7 +376,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
This option controls which `currentConfig` keys are considered secure and
can only be changed via call to `mermaid.initialize`.
@@ -376,7 +388,7 @@ This prevents malicious graph directives from overriding a site's default securi
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
Level of trust for parsed diagram
@@ -386,7 +398,7 @@ Level of trust for parsed diagram
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
---
@@ -394,7 +406,7 @@ Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
Dictates whether mermaid starts on Page load
@@ -404,7 +416,7 @@ Dictates whether mermaid starts on Page load
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
---
@@ -412,7 +424,7 @@ Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)
Suppresses inserting 'Syntax error' diagram in the DOM.
This is useful when you want to control how to handle syntax errors in your application.
@@ -450,7 +462,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
---
@@ -458,7 +470,7 @@ Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214)
---
@@ -466,4 +478,4 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid
> `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)
+Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
diff --git a/docs/config/setup/mermaid/interfaces/RenderOptions.md b/docs/config/setup/mermaid/interfaces/RenderOptions.md
index e3a9483f2..a90912069 100644
--- a/docs/config/setup/mermaid/interfaces/RenderOptions.md
+++ b/docs/config/setup/mermaid/interfaces/RenderOptions.md
@@ -10,7 +10,7 @@
# 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)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
## Properties
@@ -18,4 +18,4 @@ Defined in: [packages/mermaid/src/rendering-util/render.ts:7](https://github.com
> `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)
+Defined in: [packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
diff --git a/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md b/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md
deleted file mode 100644
index 2415d77ee..000000000
--- a/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md
+++ /dev/null
@@ -1,65 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
-
-[**mermaid**](../../README.md)
-
----
-
-# Interface: 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`
-
-## 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`
diff --git a/docs/config/setup/mermaid/type-aliases/InternalHelpers.md b/docs/config/setup/mermaid/type-aliases/InternalHelpers.md
index bfaeabd12..6baf786fe 100644
--- a/docs/config/setup/mermaid/type-aliases/InternalHelpers.md
+++ b/docs/config/setup/mermaid/type-aliases/InternalHelpers.md
@@ -10,6 +10,6 @@
# Type Alias: InternalHelpers
-> **InternalHelpers** = _typeof_ `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)
diff --git a/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md b/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md
index dd5938478..78f27854c 100644
--- a/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md
+++ b/docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md
@@ -10,7 +10,7 @@
# Type Alias: ParseErrorFunction()
-> **ParseErrorFunction** = (`err`, `hash?`) => `void`
+> **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)
diff --git a/docs/config/setup/mermaid/type-aliases/SVG.md b/docs/config/setup/mermaid/type-aliases/SVG.md
index 184f3e2cd..8bfb7bda0 100644
--- a/docs/config/setup/mermaid/type-aliases/SVG.md
+++ b/docs/config/setup/mermaid/type-aliases/SVG.md
@@ -10,6 +10,6 @@
# Type Alias: SVG
-> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)
diff --git a/docs/config/setup/mermaid/type-aliases/SVGGroup.md b/docs/config/setup/mermaid/type-aliases/SVGGroup.md
index 8d673aafb..5e53052fd 100644
--- a/docs/config/setup/mermaid/type-aliases/SVGGroup.md
+++ b/docs/config/setup/mermaid/type-aliases/SVGGroup.md
@@ -10,6 +10,6 @@
# Type Alias: SVGGroup
-> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md
index fd1e70aca..8100a1846 100644
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
- **Plugins** - A plugin system for extending the functionality of Mermaid.
Official Mermaid Chart plugins:
+
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index e054d2da0..a8a67343d 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
Learn more:
- Visual Editor For Flowcharts
+
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
- Visual Editor For Sequence diagrams
+
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
- [Demo video](https://youtu.be/imc2u5_N6Dc)
diff --git a/docs/syntax/block.md b/docs/syntax/block.md
index d711a2c92..5ca0db719 100644
--- a/docs/syntax/block.md
+++ b/docs/syntax/block.md
@@ -9,7 +9,7 @@
## Introduction to Block Diagrams
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -26,7 +26,7 @@ columns 1
```
```mermaid
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -80,12 +80,12 @@ At its core, a block diagram consists of blocks representing different entities
To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
```mermaid-example
-block-beta
+block
a b c
```
```mermaid
-block-beta
+block
a b c
```
@@ -101,13 +101,13 @@ While simple block diagrams are linear and straightforward, more complex systems
In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
```mermaid-example
-block-beta
+block
columns 3
a b c d
```
```mermaid
-block-beta
+block
columns 3
a b c d
```
@@ -130,13 +130,13 @@ In more complex diagrams, you may need blocks that span multiple columns to emph
To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
```mermaid-example
-block-beta
+block
columns 3
a["A label"] b:2 c:2 d
```
```mermaid
-block-beta
+block
columns 3
a["A label"] b:2 c:2 d
```
@@ -153,7 +153,7 @@ Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's
Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
```mermaid-example
-block-beta
+block
block
D
end
@@ -161,7 +161,7 @@ block-beta
```
```mermaid
-block-beta
+block
block
D
end
@@ -180,7 +180,7 @@ Mermaid also allows for dynamic adjustment of column widths based on the content
In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
```mermaid-example
-block-beta
+block
columns 3
a:3
block:group1:2
@@ -195,7 +195,7 @@ block-beta
```
```mermaid
-block-beta
+block
columns 3
a:3
block:group1:2
@@ -215,7 +215,7 @@ This example demonstrates how Mermaid dynamically adjusts the width of the colum
In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
```mermaid-example
-block-beta
+block
block
columns 1
a["A label"] b c d
@@ -223,7 +223,7 @@ block-beta
```
```mermaid
-block-beta
+block
block
columns 1
a["A label"] b c d
@@ -247,12 +247,12 @@ Mermaid supports a range of block shapes to suit different diagramming needs, fr
To create a block with round edges, which can be used to represent a softer or more flexible component:
```mermaid-example
-block-beta
+block
id1("This is the text in the box")
```
```mermaid
-block-beta
+block
id1("This is the text in the box")
```
@@ -261,12 +261,12 @@ block-beta
A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
```mermaid-example
-block-beta
+block
id1(["This is the text in the box"])
```
```mermaid
-block-beta
+block
id1(["This is the text in the box"])
```
@@ -275,12 +275,12 @@ block-beta
For representing subroutines or contained processes, a block with double vertical lines is useful:
```mermaid-example
-block-beta
+block
id1[["This is the text in the box"]]
```
```mermaid
-block-beta
+block
id1[["This is the text in the box"]]
```
@@ -289,12 +289,12 @@ block-beta
The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example
-block-beta
+block
id1[("Database")]
```
```mermaid
-block-beta
+block
id1[("Database")]
```
@@ -303,12 +303,12 @@ block-beta
A circle can be used for centralized or pivotal components:
```mermaid-example
-block-beta
+block
id1(("This is the text in the circle"))
```
```mermaid
-block-beta
+block
id1(("This is the text in the circle"))
```
@@ -319,36 +319,36 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
**Asymmetric**
```mermaid-example
-block-beta
+block
id1>"This is the text in the box"]
```
```mermaid
-block-beta
+block
id1>"This is the text in the box"]
```
**Rhombus**
```mermaid-example
-block-beta
+block
id1{"This is the text in the box"}
```
```mermaid
-block-beta
+block
id1{"This is the text in the box"}
```
**Hexagon**
```mermaid-example
-block-beta
+block
id1{{"This is the text in the box"}}
```
```mermaid
-block-beta
+block
id1{{"This is the text in the box"}}
```
@@ -357,7 +357,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example
-block-beta
+block
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -365,7 +365,7 @@ block-beta
```
```mermaid
-block-beta
+block
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -377,12 +377,12 @@ block-beta
For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example
-block-beta
+block
id1((("This is the text in the circle")))
```
```mermaid
-block-beta
+block
id1((("This is the text in the circle")))
```
@@ -395,7 +395,7 @@ Mermaid also offers unique shapes like block arrows and space blocks for directi
Block arrows can visually indicate direction or flow within a process:
```mermaid-example
-block-beta
+block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
@@ -406,7 +406,7 @@ block-beta
```
```mermaid
-block-beta
+block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
@@ -421,14 +421,14 @@ block-beta
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example
-block-beta
+block
columns 3
a space b
c d e
```
```mermaid
-block-beta
+block
columns 3
a space b
c d e
@@ -437,12 +437,12 @@ block-beta
or
```mermaid-example
-block-beta
+block
ida space:3 idb idc
```
```mermaid
-block-beta
+block
ida space:3 idb idc
```
@@ -467,13 +467,13 @@ The most fundamental aspect of connecting blocks is the use of arrows or links.
A simple link with an arrow can be created to show direction or flow from one block to another:
```mermaid-example
-block-beta
+block
A space B
A-->B
```
```mermaid
-block-beta
+block
A space B
A-->B
```
@@ -490,13 +490,13 @@ Example - Text with Links
To add text to a link, the syntax includes the text within the link definition:
```mermaid-example
-block-beta
+block
A space:2 B
A-- "X" -->B
```
```mermaid
-block-beta
+block
A space:2 B
A-- "X" -->B
```
@@ -506,7 +506,7 @@ This example show how to add descriptive text to the links, enhancing the inform
Example - Edges and Styles:
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -523,7 +523,7 @@ columns 1
```
```mermaid
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -552,7 +552,7 @@ Mermaid enables detailed styling of individual blocks, allowing you to apply var
To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
```mermaid-example
-block-beta
+block
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -560,7 +560,7 @@ block-beta
```
```mermaid
-block-beta
+block
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -574,7 +574,7 @@ Mermaid enables applying styling to classes, which could make styling easier if
#### Example - Styling a Single Class
```mermaid-example
-block-beta
+block
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -583,7 +583,7 @@ block-beta
```
```mermaid
-block-beta
+block
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -608,7 +608,7 @@ Combining the elements of structure, linking, and styling, we can create compreh
Illustrating a simple software system architecture with interconnected components:
```mermaid-example
-block-beta
+block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
@@ -621,7 +621,7 @@ block-beta
```
```mermaid
-block-beta
+block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
@@ -640,7 +640,7 @@ This example shows a basic architecture with a frontend, backend, and database.
Representing a business process flow with decision points and multiple stages:
```mermaid-example
-block-beta
+block
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
@@ -653,7 +653,7 @@ block-beta
```
```mermaid
-block-beta
+block
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
@@ -682,7 +682,7 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
```
-block-beta
+block
A - B
```
@@ -690,13 +690,13 @@ block-beta
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
```mermaid-example
-block-beta
+block
A space B
A --> B
```
```mermaid
-block-beta
+block
A space B
A --> B
```
@@ -706,13 +706,13 @@ block-beta
Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
```mermaid-example
- block-beta
+ block
A
style A fill#969;
```
```mermaid
- block-beta
+ block
A
style A fill#969;
```
@@ -721,14 +721,14 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
```mermaid-example
-block-beta
+block
A
style A fill:#969,stroke:#333;
```
```mermaid
-block-beta
+block
A
style A fill:#969,stroke:#333;
diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md
index ae610d152..c1d2e1597 100644
--- a/docs/syntax/c4.md
+++ b/docs/syntax/c4.md
@@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term.
- [ ] Legend
- [x] System Context
+
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- [x] Person_Ext
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
@@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term.
- [x] System_Boundary
- [x] Container diagram
+
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- [x] ContainerDb
- [x] ContainerQueue
@@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term.
- [x] Container_Boundary(alias, label, ?tags, $link)
- [x] Component diagram
+
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- [x] ComponentDb
- [x] ComponentQueue
@@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term.
- [x] ComponentQueue_Ext
- [x] Dynamic diagram
+
- [x] RelIndex(index, from, to, label, ?tags, $link)
- [x] Deployment diagram
+
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- [x] Relationship Types
+
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- [x] BiRel (bidirectional relationship)
- [x] Rel_U, Rel_Up
diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md
index 3a42f04e1..552c1658a 100644
--- a/docs/syntax/gantt.md
+++ b/docs/syntax/gantt.md
@@ -360,8 +360,7 @@ gantt
weekday monday
```
-> **Warning**
-> `millisecond` and `second` support was added in v10.3.0
+> **Warning** > `millisecond` and `second` support was added in v10.3.0
## Output in compact mode
diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md
index b8f452b66..6a2eefb27 100644
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -37,6 +37,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
+**Note:**
+
+> Pie chart values must be **positive numbers greater than zero**.\
+> **Negative values are not allowed** and will result in an error.
+
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1]
diff --git a/docs/syntax/sankey.md b/docs/syntax/sankey.md
index ccabc11c9..e981358b5 100644
--- a/docs/syntax/sankey.md
+++ b/docs/syntax/sankey.md
@@ -23,7 +23,7 @@ config:
sankey:
showValues: false
---
-sankey-beta
+sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
@@ -101,7 +101,7 @@ config:
sankey:
showValues: false
---
-sankey-beta
+sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
@@ -175,7 +175,7 @@ Wind,Electricity grid,289.366
## Syntax
-The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
+The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
@@ -187,7 +187,7 @@ It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.
It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
```mermaid-example
-sankey-beta
+sankey
%% source,target,value
Electricity grid,Over generation / exports,104.453
@@ -196,7 +196,7 @@ Electricity grid,H2 conversion,27.14
```
```mermaid
-sankey-beta
+sankey
%% source,target,value
Electricity grid,Over generation / exports,104.453
@@ -209,7 +209,7 @@ Electricity grid,H2 conversion,27.14
CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
```mermaid-example
-sankey-beta
+sankey
Bio-conversion,Losses,26.862
@@ -219,7 +219,7 @@ Bio-conversion,Gas,81.144
```
```mermaid
-sankey-beta
+sankey
Bio-conversion,Losses,26.862
@@ -233,14 +233,14 @@ Bio-conversion,Gas,81.144
If you need to have a comma, wrap it in double quotes:
```mermaid-example
-sankey-beta
+sankey
Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672
```
```mermaid
-sankey-beta
+sankey
Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672
@@ -251,14 +251,14 @@ Pumped heat,"Heating and cooling, commercial",70.672
If you need to have double quote, put a pair of them inside quoted string:
```mermaid-example
-sankey-beta
+sankey
Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672
```
```mermaid
-sankey-beta
+sankey
Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index dd64f742d..dec16a518 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -13,7 +13,7 @@
## Example
```mermaid-example
-xychart-beta
+xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -22,7 +22,7 @@ xychart-beta
```
```mermaid
-xychart-beta
+xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -40,7 +40,7 @@ xychart-beta
The chart can be drawn horizontal or vertical, default value is vertical.
```
-xychart-beta horizontal
+xychart horizontal
...
```
@@ -51,7 +51,7 @@ The title is a short description of the chart and it will always render on top o
#### Example
```
-xychart-beta
+xychart
title "This is a simple example"
...
```
@@ -98,10 +98,10 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example
-The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
+The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like
```
-xychart-beta
+xychart
line [+1.3, .6, 2.4, -.34]
```
@@ -176,7 +176,7 @@ config:
xyChart:
titleColor: "#ff0000"
---
-xychart-beta
+xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -195,7 +195,7 @@ config:
xyChart:
titleColor: "#ff0000"
---
-xychart-beta
+xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
index a25c15b15..ef4f3ed28 100644
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -859,6 +859,10 @@ export const render = async (
id: 'root',
layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+ 'elk.layered.crossingMinimization.forceNodeModelOrder':
+ data4Layout.config.elk?.forceNodeModelOrder,
+ 'elk.layered.considerModelOrder.strategy': data4Layout.config.elk?.considerModelOrder,
+
'elk.algorithm': algorithm,
'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy,
'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges,
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 355e021d5..79fadd195 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -109,6 +109,16 @@ export interface MermaidConfig {
| 'INTERACTIVE'
| 'MODEL_ORDER'
| 'GREEDY_MODEL_ORDER';
+ /**
+ * The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+ *
+ */
+ forceNodeModelOrder?: boolean;
+ /**
+ * Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+ *
+ */
+ considerModelOrder?: 'NONE' | 'NODES_AND_EDGES' | 'PREFER_EDGES' | 'PREFER_NODES';
};
darkMode?: boolean;
htmlLabels?: boolean;
diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
index 468f8e192..655bf3724 100644
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -24,6 +24,8 @@ const config: RequiredDeep = {
// mergeEdges is needed here to be considered
mergeEdges: false,
nodePlacementStrategy: 'BRANDES_KOEPF',
+ forceNodeModelOrder: false,
+ considerModelOrder: 'NODES_AND_EDGES',
},
themeCSS: undefined,
diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
index 39a8b47a0..b291be61e 100644
--- a/packages/mermaid/src/diagrams/block/blockDB.ts
+++ b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -238,13 +238,15 @@ export function edgeTypeStr2Type(typeStr: string): string {
}
export function edgeStrToEdgeData(typeStr: string): string {
- switch (typeStr.trim()) {
- case '--x':
+ switch (typeStr.replace(/^[\s-]+|[\s-]+$/g, '')) {
+ case 'x':
return 'arrow_cross';
- case '--o':
+ case 'o':
return 'arrow_circle';
- default:
+ case '>':
return 'arrow_point';
+ default:
+ return '';
}
}
diff --git a/packages/mermaid/src/diagrams/block/blockDetector.ts b/packages/mermaid/src/diagrams/block/blockDetector.ts
index c4da643f0..6122221e8 100644
--- a/packages/mermaid/src/diagrams/block/blockDetector.ts
+++ b/packages/mermaid/src/diagrams/block/blockDetector.ts
@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
const id = 'block';
const detector: DiagramDetector = (txt) => {
- return /^\s*block-beta/.test(txt);
+ return /^\s*block(-beta)?/.test(txt);
};
const loader = async () => {
diff --git a/packages/mermaid/src/diagrams/block/parser/block.jison b/packages/mermaid/src/diagrams/block/parser/block.jison
index 88bdf729e..3aa2759a6 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.jison
+++ b/packages/mermaid/src/diagrams/block/parser/block.jison
@@ -36,10 +36,10 @@ CRLF \u000D\u000A
%%
-"block-beta" { return 'BLOCK_DIAGRAM_KEY'; }
-"block"\s+ { yy.getLogger().debug('Found space-block'); return 'block';}
-"block"\n+ { yy.getLogger().debug('Found nl-block'); return 'block';}
-"block:" { yy.getLogger().debug('Found space-block'); return 'id-block';}
+"block-beta" { yy.getLogger().debug('Found block-beta'); return 'BLOCK_DIAGRAM_KEY'; }
+"block:" { yy.getLogger().debug('Found id-block'); return 'id-block'; }
+"block" { yy.getLogger().debug('Found block'); return 'BLOCK_DIAGRAM_KEY'; }
+
// \s*\%\%.* { yy.getLogger().debug('Found comment',yytext); }
[\s]+ { yy.getLogger().debug('.', yytext); /* skip all whitespace */ }
[\n]+ {yy.getLogger().debug('_', yytext); /* skip all whitespace */ }
@@ -240,7 +240,7 @@ columnsStatement
blockStatement
: id-block nodeStatement document end { yy.getLogger().debug('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; }
- | block document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
+ | BLOCK_DIAGRAM_KEY document end { yy.getLogger().debug('Rule: blockStatement : ', $1, $2, $3); const id = yy.generateId(); $$ = { id, type:'composite', label:'', children: $2 }; }
;
node
diff --git a/packages/mermaid/src/diagrams/block/parser/block.spec.ts b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
index 21da4e440..e6ad90a65 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -23,7 +23,7 @@ describe('Block diagram', function () {
expect(blocks[0].label).toBe('id');
});
it('a node with a square shape and a label', () => {
- const str = `block-beta
+ const str = `block
id["A label"]
`;
@@ -35,7 +35,7 @@ describe('Block diagram', function () {
expect(blocks[0].type).toBe('square');
});
it('a diagram with multiple nodes', () => {
- const str = `block-beta
+ const str = `block
id1
id2
`;
@@ -51,7 +51,7 @@ describe('Block diagram', function () {
expect(blocks[1].type).toBe('na');
});
it('a diagram with multiple nodes', () => {
- const str = `block-beta
+ const str = `block
id1
id2
id3
@@ -72,7 +72,7 @@ describe('Block diagram', function () {
});
it('a node with a square shape and a label', () => {
- const str = `block-beta
+ const str = `block
id["A label"]
id2`;
@@ -87,7 +87,7 @@ describe('Block diagram', function () {
expect(blocks[1].type).toBe('na');
});
it('a diagram with multiple nodes with edges abc123', () => {
- const str = `block-beta
+ const str = `block
id1["first"] --> id2["second"]
`;
@@ -101,7 +101,7 @@ describe('Block diagram', function () {
expect(edges[0].arrowTypeEnd).toBe('arrow_point');
});
it('a diagram with multiple nodes with edges abc123', () => {
- const str = `block-beta
+ const str = `block
id1["first"] -- "a label" --> id2["second"]
`;
@@ -116,7 +116,7 @@ describe('Block diagram', function () {
expect(edges[0].label).toBe('a label');
});
it('a diagram with column statements', () => {
- const str = `block-beta
+ const str = `block
columns 2
block1["Block 1"]
`;
@@ -127,7 +127,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(1);
});
it('a diagram without column statements', () => {
- const str = `block-beta
+ const str = `block
block1["Block 1"]
`;
@@ -137,7 +137,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(1);
});
it('a diagram with auto column statements', () => {
- const str = `block-beta
+ const str = `block
columns auto
block1["Block 1"]
`;
@@ -149,7 +149,7 @@ describe('Block diagram', function () {
});
it('blocks next to each other', () => {
- const str = `block-beta
+ const str = `block
columns 2
block1["Block 1"]
block2["Block 2"]
@@ -163,7 +163,7 @@ describe('Block diagram', function () {
});
it('blocks on top of each other', () => {
- const str = `block-beta
+ const str = `block
columns 1
block1["Block 1"]
block2["Block 2"]
@@ -177,7 +177,7 @@ describe('Block diagram', function () {
});
it('compound blocks 2', () => {
- const str = `block-beta
+ const str = `block
block
aBlock["ABlock"]
bBlock["BBlock"]
@@ -205,7 +205,7 @@ describe('Block diagram', function () {
expect(bBlock.type).toBe('square');
});
it('compound blocks of compound blocks', () => {
- const str = `block-beta
+ const str = `block
block
aBlock["ABlock"]
block
@@ -240,7 +240,7 @@ describe('Block diagram', function () {
expect(bBlock.type).toBe('square');
});
it('compound blocks with title', () => {
- const str = `block-beta
+ const str = `block
block:compoundBlock["Compound block"]
columns 1
block2["Block 2"]
@@ -265,7 +265,7 @@ describe('Block diagram', function () {
expect(block2.type).toBe('square');
});
it('blocks mixed with compound blocks', () => {
- const str = `block-beta
+ const str = `block
columns 1
block1["Block 1"]
@@ -292,7 +292,7 @@ describe('Block diagram', function () {
});
it('Arrow blocks', () => {
- const str = `block-beta
+ const str = `block
columns 3
block1["Block 1"]
blockArrow<[" "]>(right)
@@ -316,7 +316,7 @@ describe('Block diagram', function () {
expect(blockArrow.directions).toContain('right');
});
it('Arrow blocks with multiple points', () => {
- const str = `block-beta
+ const str = `block
columns 1
A
blockArrow<[" "]>(up, down)
@@ -339,7 +339,7 @@ describe('Block diagram', function () {
expect(blockArrow.directions).not.toContain('right');
});
it('blocks with different widths', () => {
- const str = `block-beta
+ const str = `block
columns 3
one["One Slot"]
two["Two slots"]:2
@@ -354,7 +354,7 @@ describe('Block diagram', function () {
expect(two.widthInColumns).toBe(2);
});
it('empty blocks', () => {
- const str = `block-beta
+ const str = `block
columns 3
space
middle["In the middle"]
@@ -373,7 +373,7 @@ describe('Block diagram', function () {
expect(middle.label).toBe('In the middle');
});
it('classDef statements applied to a block', () => {
- const str = `block-beta
+ const str = `block
classDef black color:#ffffff, fill:#000000;
mc["Memcache"]
@@ -391,7 +391,7 @@ describe('Block diagram', function () {
expect(black.styles[0]).toEqual('color:#ffffff');
});
it('style statements applied to a block', () => {
- const str = `block-beta
+ const str = `block
columns 1
B["A wide one in the middle"]
style B fill:#f9F,stroke:#333,stroke-width:4px
@@ -426,9 +426,9 @@ columns 1
describe('prototype properties', function () {
function validateProperty(prop: string) {
- expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow();
+ expect(() => block.parse(`block\n${prop}`)).not.toThrow();
expect(() =>
- block.parse(`block-beta\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
+ block.parse(`block\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
).not.toThrow();
}
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 00c9b8313..4b73bb02f 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -33,13 +33,13 @@ function setupDompurifyHooks() {
const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
DOMPurify.addHook('beforeSanitizeAttributes', (node) => {
- if (node instanceof Element && node.tagName === 'A' && node.hasAttribute('target')) {
+ if (node.tagName === 'A' && node.hasAttribute('target')) {
node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') ?? '');
}
});
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
- if (node instanceof Element && node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+ if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) ?? '');
node.removeAttribute(TEMPORARY_ATTRIBUTE);
if (node.getAttribute('target') === '_blank') {
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index 3ae55fb25..b2b5b0566 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -167,7 +167,10 @@ export const getTasks = function () {
};
export const isInvalidDate = function (date, dateFormat, excludes, includes) {
- if (includes.includes(date.format(dateFormat.trim()))) {
+ const formattedDate = date.format(dateFormat.trim());
+ const dateOnly = date.format('YYYY-MM-DD');
+
+ if (includes.includes(formattedDate) || includes.includes(dateOnly)) {
return false;
}
if (
@@ -180,7 +183,7 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) {
if (excludes.includes(date.format('dddd').toLowerCase())) {
return true;
}
- return excludes.includes(date.format(dateFormat.trim()));
+ return excludes.includes(formattedDate) || excludes.includes(dateOnly);
};
export const setWeekday = function (txt) {
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index f5c8c2e38..9f899a40f 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -581,17 +581,11 @@ export const draw = function (text, id, version, diagObj) {
rectangles
.append('rect')
- .attr('id', function (d) {
- return 'exclude-' + d.start.format('YYYY-MM-DD');
- })
- .attr('x', function (d) {
- return timeScale(d.start) + theSidePad;
- })
+ .attr('id', (d) => 'exclude-' + d.start.format('YYYY-MM-DD'))
+ .attr('x', (d) => timeScale(d.start.startOf('day')) + theSidePad)
.attr('y', conf.gridLineStartPadding)
- .attr('width', function (d) {
- const renderEnd = d.end.add(1, 'day');
- return timeScale(renderEnd) - timeScale(d.start);
- })
+ .attr('width', (d) => timeScale(d.end.endOf('day')) - timeScale(d.start.startOf('day')))
+
.attr('height', h - theTopPad - conf.gridLineStartPadding)
.attr('transform-origin', function (d, i) {
return (
@@ -615,9 +609,20 @@ export const draw = function (text, id, version, diagObj) {
* @param h
*/
function makeGrid(theSidePad, theTopPad, w, h) {
+ const dateFormat = diagObj.db.getDateFormat();
+ const userAxisFormat = diagObj.db.getAxisFormat();
+ let axisFormat;
+ if (userAxisFormat) {
+ axisFormat = userAxisFormat;
+ } else if (dateFormat === 'D') {
+ axisFormat = '%d';
+ } else {
+ axisFormat = conf.axisFormat ?? '%Y-%m-%d';
+ }
+
let bottomXAxis = axisBottom(timeScale)
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
- .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
+ .tickFormat(timeFormat(axisFormat));
const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/;
const resultTickInterval = reTickInterval.exec(
@@ -669,7 +674,7 @@ export const draw = function (text, id, version, diagObj) {
if (diagObj.db.topAxisEnabled() || conf.topAxis) {
let topXAxis = axisTop(timeScale)
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
- .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
+ .tickFormat(timeFormat(axisFormat));
if (resultTickInterval !== null) {
const every = resultTickInterval[1];
diff --git a/packages/mermaid/src/diagrams/pie/pie.spec.ts b/packages/mermaid/src/diagrams/pie/pie.spec.ts
index f00906cc5..60fff01e1 100644
--- a/packages/mermaid/src/diagrams/pie/pie.spec.ts
+++ b/packages/mermaid/src/diagrams/pie/pie.spec.ts
@@ -139,6 +139,32 @@ describe('pie', () => {
}).rejects.toThrowError();
});
+ it('should handle simple pie with zero slice value', async () => {
+ await parser.parse(`pie title Default text position: Animal adoption
+ accTitle: simple pie char demo
+ accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+ "dogs" : 0
+ "rats" : 40.12
+ `);
+
+ const sections = db.getSections();
+ expect(sections.get('dogs')).toBe(0);
+ expect(sections.get('rats')).toBe(40.12);
+ });
+
+ it('should handle simple pie with negative slice value', async () => {
+ await expect(async () => {
+ await parser.parse(`pie title Default text position: Animal adoption
+ accTitle: simple pie char demo
+ accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+ "dogs" : -60.67
+ "rats" : 40.12
+ `);
+ }).rejects.toThrowError(
+ '"dogs" has invalid value: -60.67. Negative values are not allowed in pie charts. All slice values must be >= 0.'
+ );
+ });
+
it('should handle unsafe properties', async () => {
await expect(
parser.parse(`pie title Unsafe props test
diff --git a/packages/mermaid/src/diagrams/pie/pieDb.ts b/packages/mermaid/src/diagrams/pie/pieDb.ts
index 64831495c..083ee97d5 100644
--- a/packages/mermaid/src/diagrams/pie/pieDb.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDb.ts
@@ -34,6 +34,11 @@ const clear = (): void => {
};
const addSection = ({ label, value }: D3Section): void => {
+ if (value < 0) {
+ throw new Error(
+ `"${label}" has invalid value: ${value}. Negative values are not allowed in pie charts. All slice values must be >= 0.`
+ );
+ }
if (!sections.has(label)) {
sections.set(label, value);
log.debug(`added new section: ${label}, with value: ${value}`);
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
index a0cdce3df..5b87613ff 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -10,20 +10,14 @@ import { cleanAndMerge, parseFontSize } from '../../utils.js';
import type { D3Section, PieDB, Sections } from './pieTypes.js';
const createPieArcs = (sections: Sections): d3.PieArcDatum[] => {
- // Compute the position of each group on the pie:
+ const sum = [...sections.values()].reduce((acc, val) => acc + val, 0);
+
const pieData: D3Section[] = [...sections.entries()]
- .map((element: [string, number]): D3Section => {
- return {
- label: element[0],
- value: element[1],
- };
- })
- .sort((a: D3Section, b: D3Section): number => {
- return b.value - a.value;
- });
- const pie: d3.Pie = d3pie().value(
- (d3Section: D3Section): number => d3Section.value
- );
+ .map(([label, value]) => ({ label, value }))
+ .filter((d) => (d.value / sum) * 100 >= 1) // Remove values < 1%
+ .sort((a, b) => b.value - a.value);
+
+ const pie: d3.Pie = d3pie().value((d) => d.value);
return pie(pieData);
};
@@ -89,13 +83,21 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
themeVariables.pie11,
themeVariables.pie12,
];
+ let sum = 0;
+ sections.forEach((section) => {
+ sum += section;
+ });
+
+ // Filter out arcs that would render as 0%
+ const filteredArcs = arcs.filter((datum) => ((datum.data.value / sum) * 100).toFixed(0) !== '0');
+
// Set the color scale
const color: d3.ScaleOrdinal = scaleOrdinal(myGeneratedColors);
// Build the pie chart: each part of the pie is a path that we build using the arc function.
group
.selectAll('mySlices')
- .data(arcs)
+ .data(filteredArcs)
.enter()
.append('path')
.attr('d', arcGenerator)
@@ -104,15 +106,11 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
})
.attr('class', 'pieCircle');
- let sum = 0;
- sections.forEach((section) => {
- sum += section;
- });
// Now add the percentage.
// Use the centroid method to get the best coordinates.
group
.selectAll('mySlices')
- .data(arcs)
+ .data(filteredArcs)
.enter()
.append('text')
.text((datum: d3.PieArcDatum): string => {
@@ -133,15 +131,20 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
.attr('class', 'pieTitleText');
// Add the legends/annotations for each section
+ const allSectionData: D3Section[] = [...sections.entries()].map(([label, value]) => ({
+ label,
+ value,
+ }));
+
const legend = group
.selectAll('.legend')
- .data(color.domain())
+ .data(allSectionData)
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', (_datum, index: number): string => {
const height = LEGEND_RECT_SIZE + LEGEND_SPACING;
- const offset = (height * color.domain().length) / 2;
+ const offset = (height * allSectionData.length) / 2;
const horizontal = 12 * LEGEND_RECT_SIZE;
const vertical = index * height - offset;
return 'translate(' + horizontal + ',' + vertical + ')';
@@ -151,20 +154,18 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
.append('rect')
.attr('width', LEGEND_RECT_SIZE)
.attr('height', LEGEND_RECT_SIZE)
- .style('fill', color)
- .style('stroke', color);
+ .style('fill', (d) => color(d.label))
+ .style('stroke', (d) => color(d.label));
legend
- .data(arcs)
.append('text')
.attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING)
.attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING)
- .text((datum: d3.PieArcDatum): string => {
- const { label, value } = datum.data;
+ .text((d) => {
if (db.getShowData()) {
- return `${label} [${value}]`;
+ return `${d.label} [${d.value}]`;
}
- return label;
+ return d.label;
});
const longestTextWidth = Math.max(
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
index 9d66b69a4..d531c438a 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.jison
@@ -27,6 +27,7 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
%%
"sankey-beta" { this.pushState('csv'); return 'SANKEY'; }
+"sankey" { this.pushState('csv'); return 'SANKEY'; }
<> { return 'EOF' } // match end of file
({CRLF}|{LF}) { return 'NEWLINE' }
{COMMA} { return 'COMMA' }
diff --git a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
index 007cda6f9..10fc86963 100644
--- a/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
+++ b/packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
@@ -13,7 +13,7 @@ describe('Sankey diagram', function () {
sankey.parser.yy.clear();
});
- it('parses csv', () => {
+ it('parses csv with sankey-beta syntax', () => {
const csv = path.resolve(__dirname, './energy.csv');
const data = fs.readFileSync(csv, 'utf8');
const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
@@ -21,7 +21,15 @@ describe('Sankey diagram', function () {
sankey.parser.parse(graphDefinition);
});
- it('allows __proto__ as id', function () {
+ it('parses csv with sankey syntax', () => {
+ const csv = path.resolve(__dirname, './energy.csv');
+ const data = fs.readFileSync(csv, 'utf8');
+ const graphDefinition = prepareTextForParsing(cleanupComments('sankey\n\n ' + data));
+
+ sankey.parser.parse(graphDefinition);
+ });
+
+ it('allows __proto__ as id with sankey-beta syntax', function () {
sankey.parser.parse(
prepareTextForParsing(`sankey-beta
__proto__,A,0.597
@@ -29,5 +37,14 @@ describe('Sankey diagram', function () {
`)
);
});
+
+ it('allows __proto__ as id with sankey syntax', function () {
+ sankey.parser.parse(
+ prepareTextForParsing(`sankey
+ __proto__,A,0.597
+ A,__proto__,0.403
+ `)
+ );
+ });
});
});
diff --git a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
index 73c4d1428..589bc9ade 100644
--- a/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
+++ b/packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
const id = 'sankey';
const detector: DiagramDetector = (txt) => {
- return /^\s*sankey-beta/.test(txt);
+ return /^\s*sankey(-beta)?/.test(txt);
};
const loader = async () => {
diff --git a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
index d2e81df5f..2dcadc0bb 100644
--- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
@@ -33,7 +33,7 @@
"actor" { this.begin('ID'); return 'participant_actor'; }
"create" return 'create';
"destroy" { this.begin('ID'); return 'destroy'; }
-[^\<->\->:\n,;]+?([\-]*[^\<->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
"loop" { this.begin('LINE'); return 'loop'; }
@@ -73,7 +73,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
"off" return 'off';
"," return ',';
";" return 'NEWLINE';
-[^\+\<->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\<->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
+[^+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+<\->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
"->>" return 'SOLID_ARROW';
"<<->>" return 'BIDIRECTIONAL_SOLID_ARROW';
"-->>" return 'DOTTED_ARROW';
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 7d47c0536..08514a993 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -350,6 +350,26 @@ Bob-->Alice-in-Wonderland:I am good thanks!`);
expect(messages[1].from).toBe('Bob');
});
+ it('should handle equals in participant names', async () => {
+ const diagram = await Diagram.fromText(`
+sequenceDiagram
+participant Alice=Wonderland
+participant Bob
+Alice=Wonderland->Bob:Hello Bob, how are - you?
+Bob-->Alice=Wonderland:I am good thanks!`);
+
+ const actors = diagram.db.getActors();
+ expect([...actors.keys()]).toEqual(['Alice=Wonderland', 'Bob']);
+ expect(actors.get('Alice=Wonderland').description).toBe('Alice=Wonderland');
+ expect(actors.get('Bob').description).toBe('Bob');
+
+ const messages = diagram.db.getMessages();
+
+ expect(messages.length).toBe(2);
+ expect(messages[0].from).toBe('Alice=Wonderland');
+ expect(messages[1].from).toBe('Bob');
+ });
+
it('should alias participants', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
index 987132d17..33575b946 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
@@ -30,6 +30,7 @@
[^\}]* { return "acc_descr_multiline_value"; }
"xychart-beta" {return 'XYCHART';}
+"xychart" {return 'XYCHART';}
(?:"vertical"|"horizontal") {return 'CHART_ORIENTATION'}
"x-axis" { this.pushState("axis_data"); return "X_AXIS"; }
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
index d7de15f66..409972828 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -33,44 +33,44 @@ describe('Testing xychart jison file', () => {
clearMocks();
});
- it('should throw error if xychart-beta text is not there', () => {
- const str = 'xychart-beta-1';
+ it('should throw error if xychart text is not there', () => {
+ const str = 'xychart-1';
expect(parserFnConstructor(str)).toThrow();
});
it('should not throw error if only xychart is there', () => {
- const str = 'xychart-beta';
+ const str = 'xychart';
expect(parserFnConstructor(str)).not.toThrow();
});
it('parse title of the chart within "', () => {
- const str = 'xychart-beta \n title "This is a title"';
+ const str = 'xychart \n title "This is a title"';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title');
});
it('parse title of the chart without "', () => {
- const str = 'xychart-beta \n title oneLinertitle';
+ const str = 'xychart \n title oneLinertitle';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle');
});
it('parse chart orientation', () => {
- const str = 'xychart-beta vertical';
+ const str = 'xychart vertical';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical');
});
it('parse chart orientation with spaces', () => {
- let str = 'xychart-beta horizontal ';
+ let str = 'xychart horizontal ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal');
- str = 'xychart-beta abc';
+ str = 'xychart abc';
expect(parserFnConstructor(str)).toThrow();
});
it('parse x-axis', () => {
- const str = 'xychart-beta \nx-axis xAxisName\n';
+ const str = 'xychart \nx-axis xAxisName\n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName',
@@ -79,7 +79,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis with axis name without "', () => {
- const str = 'xychart-beta \nx-axis xAxisName \n';
+ const str = 'xychart \nx-axis xAxisName \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName',
@@ -88,7 +88,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis with axis name with "', () => {
- const str = 'xychart-beta \n x-axis "xAxisName has space"\n';
+ const str = 'xychart \n x-axis "xAxisName has space"\n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName has space',
@@ -97,7 +97,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis with axis name with " with spaces', () => {
- const str = 'xychart-beta \n x-axis " xAxisName has space " \n';
+ const str = 'xychart \n x-axis " xAxisName has space " \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: ' xAxisName has space ',
@@ -106,7 +106,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis with axis name and range data', () => {
- const str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n';
+ const str = 'xychart \nx-axis xAxisName 45.5 --> 33 \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName',
@@ -115,11 +115,11 @@ describe('Testing xychart jison file', () => {
expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33);
});
it('parse x-axis throw error for invalid range data', () => {
- const str = 'xychart-beta \nx-axis xAxisName aaa --> 33 \n';
+ const str = 'xychart \nx-axis xAxisName aaa --> 33 \n';
expect(parserFnConstructor(str)).toThrow();
});
it('parse x-axis with axis name and range data with only decimal part', () => {
- const str = 'xychart-beta \nx-axis xAxisName 45.5 --> .34 \n';
+ const str = 'xychart \nx-axis xAxisName 45.5 --> .34 \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName',
@@ -129,7 +129,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis without axis name and range data', () => {
- const str = 'xychart-beta \nx-axis 45.5 --> 1.34 \n';
+ const str = 'xychart \nx-axis 45.5 --> 1.34 \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: '',
@@ -139,7 +139,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis with axis name and category data', () => {
- const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n ';
+ const str = 'xychart \nx-axis xAxisName [ "cat1" , cat2a ] \n ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName',
@@ -155,7 +155,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis without axis name and category data', () => {
- const str = 'xychart-beta \nx-axis [ "cat1" , cat2a ] \n ';
+ const str = 'xychart \nx-axis [ "cat1" , cat2a ] \n ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: '',
@@ -171,14 +171,14 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis throw error if unbalanced bracket', () => {
- let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n ';
+ let str = 'xychart \nx-axis xAxisName [ "cat1" [ cat2a ] \n ';
expect(parserFnConstructor(str)).toThrow();
- str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] ] \n ';
+ str = 'xychart \nx-axis xAxisName [ "cat1" , cat2a ] ] \n ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse x-axis complete variant 1', () => {
- const str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`;
+ const str = `xychart \n x-axis "this is x axis" [category1, "category 2", category3]\n`;
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' });
expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
@@ -189,8 +189,7 @@ describe('Testing xychart jison file', () => {
});
it('parse x-axis complete variant 2', () => {
- const str =
- 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
+ const str = 'xychart \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
@@ -202,7 +201,7 @@ describe('Testing xychart jison file', () => {
it('parse x-axis complete variant 3', () => {
const str =
- 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n ';
+ 'xychart \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
@@ -213,17 +212,17 @@ describe('Testing xychart jison file', () => {
});
it('parse y-axis with axis name', () => {
- const str = 'xychart-beta \ny-axis yAxisName\n';
+ const str = 'xychart \ny-axis yAxisName\n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
});
it('parse y-axis with axis name with spaces', () => {
- const str = 'xychart-beta \ny-axis yAxisName \n';
+ const str = 'xychart \ny-axis yAxisName \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
});
it('parse y-axis with axis name with "', () => {
- const str = 'xychart-beta \n y-axis "yAxisName has space"\n';
+ const str = 'xychart \n y-axis "yAxisName has space"\n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
text: 'yAxisName has space',
@@ -231,7 +230,7 @@ describe('Testing xychart jison file', () => {
});
});
it('parse y-axis with axis name with " and spaces', () => {
- const str = 'xychart-beta \n y-axis " yAxisName has space " \n';
+ const str = 'xychart \n y-axis " yAxisName has space " \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
text: ' yAxisName has space ',
@@ -239,39 +238,39 @@ describe('Testing xychart jison file', () => {
});
});
it('parse y-axis with axis name with range data', () => {
- const str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n';
+ const str = 'xychart \ny-axis yAxisName 45.5 --> 33 \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
});
it('parse y-axis without axis name with range data', () => {
- const str = 'xychart-beta \ny-axis 45.5 --> 33 \n';
+ const str = 'xychart \ny-axis 45.5 --> 33 \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
});
it('parse y-axis with axis name with range data with only decimal part', () => {
- const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n';
+ const str = 'xychart \ny-axis yAxisName 45.5 --> .33 \n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33);
});
it('parse y-axis throw error for invalid number in range data', () => {
- const str = 'xychart-beta \ny-axis yAxisName 45.5 --> abc \n';
+ const str = 'xychart \ny-axis yAxisName 45.5 --> abc \n';
expect(parserFnConstructor(str)).toThrow();
});
it('parse y-axis throws error if range data is passed', () => {
- const str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n';
+ const str = 'xychart \ny-axis yAxisName [ 45.3, 33 ] \n';
expect(parserFnConstructor(str)).toThrow();
});
it('parse both axis at once', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
});
it('parse line Data', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle', type: 'text' },
@@ -282,7 +281,7 @@ describe('Testing xychart jison file', () => {
});
it('parse line Data with spaces and +,- symbols', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
@@ -292,8 +291,7 @@ describe('Testing xychart jison file', () => {
);
});
it('parse line Data without title', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] ';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
@@ -304,34 +302,32 @@ describe('Testing xychart jison file', () => {
});
it('parse line Data throws error unbalanced brackets', () => {
let str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 [ -45 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 [ -45 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 ] 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 ] 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse line Data throws error if data is not provided', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" ';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse line Data throws error if data is empty', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] ';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse line Data throws error if , is not in proper', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , , -45 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse line Data throws error if not number', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse bar Data', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
@@ -342,7 +338,7 @@ describe('Testing xychart jison file', () => {
});
it('parse bar Data spaces and +,- symbol', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
@@ -352,8 +348,7 @@ describe('Testing xychart jison file', () => {
);
});
it('parse bar Data without plot title', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
@@ -361,34 +356,34 @@ describe('Testing xychart jison file', () => {
});
it('parse bar should throw for unbalanced brackets', () => {
let str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 [ -45 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 [ -45 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 ] 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 ] 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse bar should throw error if data is not provided', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" ';
+ const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse bar should throw error if data is empty', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse bar should throw error if comma is not proper', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , , -45 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse bar should throw error if number is not passed', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] ';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();
});
it('parse multiple bar and line variant 1', () => {
const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]';
+ 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
@@ -411,8 +406,8 @@ describe('Testing xychart jison file', () => {
});
it('parse multiple bar and line variant 2', () => {
const str = `
- xychart-beta horizontal
- title Basic xychart
+ xychart horizontal
+ title "Basic xychart"
x-axis "this is x axis" [category1, "category 2", category3]
y-axis yaxisText 10 --> 150
bar barTitle1 [23, 45, 56.6]
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts
index 08be05b01..3a848cd7f 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDetector.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDetector.ts
@@ -7,7 +7,7 @@ import type {
const id = 'xychart';
const detector: DiagramDetector = (txt) => {
- return /^\s*xychart-beta/.test(txt);
+ return /^\s*xychart(-beta)?/.test(txt);
};
const loader: DiagramLoader = async () => {
diff --git a/packages/mermaid/src/docs/syntax/block.md b/packages/mermaid/src/docs/syntax/block.md
index ac5b53d5e..985ce1d8c 100644
--- a/packages/mermaid/src/docs/syntax/block.md
+++ b/packages/mermaid/src/docs/syntax/block.md
@@ -8,7 +8,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
## Introduction to Block Diagrams
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -62,7 +62,7 @@ At its core, a block diagram consists of blocks representing different entities
To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
```mermaid-example
-block-beta
+block
a b c
```
@@ -78,7 +78,7 @@ While simple block diagrams are linear and straightforward, more complex systems
In scenarios where you need to distribute blocks across multiple columns, you can specify the number of columns and arrange the blocks accordingly. Here's how to create a block diagram with three columns and four blocks, where the fourth block appears in a second row:
```mermaid-example
-block-beta
+block
columns 3
a b c d
```
@@ -101,7 +101,7 @@ In more complex diagrams, you may need blocks that span multiple columns to emph
To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
```mermaid-example
-block-beta
+block
columns 3
a["A label"] b:2 c:2 d
```
@@ -118,7 +118,7 @@ Composite blocks, or blocks within blocks, are an advanced feature in Mermaid's
Creating a composite block involves defining a parent block and then nesting other blocks within it. Here's how to define a composite block with nested elements:
```mermaid-example
-block-beta
+block
block
D
end
@@ -137,7 +137,7 @@ Mermaid also allows for dynamic adjustment of column widths based on the content
In diagrams with varying block sizes, Mermaid automatically adjusts the column widths to fit the largest block in each column. Here's an example:
```mermaid-example
-block-beta
+block
columns 3
a:3
block:group1:2
@@ -157,7 +157,7 @@ This example demonstrates how Mermaid dynamically adjusts the width of the colum
In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
```mermaid-example
-block-beta
+block
block
columns 1
a["A label"] b c d
@@ -181,7 +181,7 @@ Mermaid supports a range of block shapes to suit different diagramming needs, fr
To create a block with round edges, which can be used to represent a softer or more flexible component:
```mermaid-example
-block-beta
+block
id1("This is the text in the box")
```
@@ -190,7 +190,7 @@ block-beta
A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
```mermaid-example
-block-beta
+block
id1(["This is the text in the box"])
```
@@ -199,7 +199,7 @@ block-beta
For representing subroutines or contained processes, a block with double vertical lines is useful:
```mermaid-example
-block-beta
+block
id1[["This is the text in the box"]]
```
@@ -208,7 +208,7 @@ block-beta
The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example
-block-beta
+block
id1[("Database")]
```
@@ -217,7 +217,7 @@ block-beta
A circle can be used for centralized or pivotal components:
```mermaid-example
-block-beta
+block
id1(("This is the text in the circle"))
```
@@ -228,21 +228,21 @@ For decision points, use a rhombus, and for unique or specialized processes, asy
**Asymmetric**
```mermaid-example
-block-beta
+block
id1>"This is the text in the box"]
```
**Rhombus**
```mermaid-example
-block-beta
+block
id1{"This is the text in the box"}
```
**Hexagon**
```mermaid-example
-block-beta
+block
id1{{"This is the text in the box"}}
```
@@ -251,7 +251,7 @@ block-beta
Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example
-block-beta
+block
id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\]
A[/"Christmas"\]
@@ -263,7 +263,7 @@ block-beta
For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example
-block-beta
+block
id1((("This is the text in the circle")))
```
@@ -276,7 +276,7 @@ Mermaid also offers unique shapes like block arrows and space blocks for directi
Block arrows can visually indicate direction or flow within a process:
```mermaid-example
-block-beta
+block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
@@ -291,7 +291,7 @@ block-beta
Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example
-block-beta
+block
columns 3
a space b
c d e
@@ -300,7 +300,7 @@ block-beta
or
```mermaid-example
-block-beta
+block
ida space:3 idb idc
```
@@ -325,7 +325,7 @@ The most fundamental aspect of connecting blocks is the use of arrows or links.
A simple link with an arrow can be created to show direction or flow from one block to another:
```mermaid-example
-block-beta
+block
A space B
A-->B
```
@@ -342,7 +342,7 @@ Example - Text with Links
To add text to a link, the syntax includes the text within the link definition:
```mermaid-example
-block-beta
+block
A space:2 B
A-- "X" -->B
```
@@ -352,7 +352,7 @@ This example show how to add descriptive text to the links, enhancing the inform
Example - Edges and Styles:
```mermaid-example
-block-beta
+block
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
@@ -381,7 +381,7 @@ Mermaid enables detailed styling of individual blocks, allowing you to apply var
To apply custom styles to a block, you can use the `style` keyword followed by the block identifier and the desired CSS properties:
```mermaid-example
-block-beta
+block
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -395,7 +395,7 @@ Mermaid enables applying styling to classes, which could make styling easier if
#### Example - Styling a Single Class
```mermaid-example
-block-beta
+block
A space B
A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -420,7 +420,7 @@ Combining the elements of structure, linking, and styling, we can create compreh
Illustrating a simple software system architecture with interconnected components:
```mermaid
-block-beta
+block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
@@ -439,7 +439,7 @@ This example shows a basic architecture with a frontend, backend, and database.
Representing a business process flow with decision points and multiple stages:
```mermaid-example
-block-beta
+block
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
@@ -468,7 +468,7 @@ Understanding and avoiding common syntax errors is key to a smooth experience wi
A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
```
-block-beta
+block
A - B
```
@@ -476,7 +476,7 @@ block-beta
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
```mermaid-example
-block-beta
+block
A space B
A --> B
```
@@ -486,7 +486,7 @@ block-beta
Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
```mermaid-example
- block-beta
+ block
A
style A fill#969;
```
@@ -495,7 +495,7 @@ Applying styles in the wrong context or with incorrect syntax can lead to blocks
Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
```mermaid-example
-block-beta
+block
A
style A fill:#969,stroke:#333;
diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md
index 2e7a1799a..416119b5b 100644
--- a/packages/mermaid/src/docs/syntax/pie.md
+++ b/packages/mermaid/src/docs/syntax/pie.md
@@ -24,6 +24,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
+**Note:**
+
+> Pie chart values must be **positive numbers greater than zero**.
+> **Negative values are not allowed** and will result in an error.
+
[pie] [showData] (OPTIONAL)
[title] [titlevalue] (OPTIONAL)
"[datakey1]" : [dataValue1]
diff --git a/packages/mermaid/src/docs/syntax/sankey.md b/packages/mermaid/src/docs/syntax/sankey.md
index 6b7c359e3..bf04d5553 100644
--- a/packages/mermaid/src/docs/syntax/sankey.md
+++ b/packages/mermaid/src/docs/syntax/sankey.md
@@ -18,7 +18,7 @@ config:
sankey:
showValues: false
---
-sankey-beta
+sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
@@ -92,7 +92,7 @@ Wind,Electricity grid,289.366
## Syntax
-The idea behind syntax is that a user types `sankey-beta` keyword first, then pastes raw CSV below and get the result.
+The idea behind syntax is that a user types `sankey` keyword first, then pastes raw CSV below and get the result.
It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.txt) with subtle **differences**:
@@ -104,7 +104,7 @@ It implements CSV standard as [described here](https://www.ietf.org/rfc/rfc4180.
It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
```mermaid-example
-sankey-beta
+sankey
%% source,target,value
Electricity grid,Over generation / exports,104.453
@@ -117,7 +117,7 @@ Electricity grid,H2 conversion,27.14
CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
```mermaid-example
-sankey-beta
+sankey
Bio-conversion,Losses,26.862
@@ -131,7 +131,7 @@ Bio-conversion,Gas,81.144
If you need to have a comma, wrap it in double quotes:
```mermaid-example
-sankey-beta
+sankey
Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672
@@ -142,7 +142,7 @@ Pumped heat,"Heating and cooling, commercial",70.672
If you need to have double quote, put a pair of them inside quoted string:
```mermaid-example
-sankey-beta
+sankey
Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 7de3d4144..4154fb2f0 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -7,7 +7,7 @@
## Example
```mermaid-example
-xychart-beta
+xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@ All text values that contain only one word can be written without `"`. If a text
The chart can be drawn horizontal or vertical, default value is vertical.
```
-xychart-beta horizontal
+xychart horizontal
...
```
@@ -37,7 +37,7 @@ The title is a short description of the chart and it will always render on top o
#### Example
```
-xychart-beta
+xychart
title "This is a simple example"
...
```
@@ -86,10 +86,10 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example
-The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
+The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like
```
-xychart-beta
+xychart
line [+1.3, .6, 2.4, -.34]
```
@@ -164,7 +164,7 @@ config:
xyChart:
titleColor: "#ff0000"
---
-xychart-beta
+xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index a61edaaba..b2d2d3cd3 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -755,6 +755,11 @@ graph TD;A--x|text including URL space|B;`)
expectedType: 'xychart',
content: 'x-axis "Attempts" 10000 --> 10000\ny-axis "Passing tests" 1 --> 1\nbar [1]',
},
+ {
+ textDiagramType: 'xychart',
+ expectedType: 'xychart',
+ content: 'x-axis "Attempts" 10000 --> 10000\ny-axis "Passing tests" 1 --> 1\nbar [1]',
+ },
{ textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
index 3ab4167a2..2000d58b8 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.spec.ts
@@ -285,7 +285,11 @@ test('markdownToHTML - Unsupported formatting', () => {
- l1
- l2
- l3`)
- ).toMatchInlineSnapshot('"Hello
Unsupported markdown: list"');
+ ).toMatchInlineSnapshot(`
+ "Hello
- l1
+ - l2
+ - l3"
+ `);
});
test('markdownToHTML - no auto wrapping', () => {
diff --git a/packages/mermaid/src/rendering-util/handle-markdown-text.ts b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
index f898875cf..b20b334f4 100644
--- a/packages/mermaid/src/rendering-util/handle-markdown-text.ts
+++ b/packages/mermaid/src/rendering-util/handle-markdown-text.ts
@@ -3,6 +3,7 @@ import { marked } from 'marked';
import { dedent } from 'ts-dedent';
import type { MarkdownLine, MarkdownWordType } from './types.js';
import type { MermaidConfig } from '../config.type.js';
+import { log } from '../logger.js';
/**
* @param markdown - markdown to process
@@ -61,6 +62,8 @@ export function markdownToLines(markdown: string, config: MermaidConfig = {}): M
});
} else if (treeNode.type === 'html') {
lines[currentLine].push({ content: treeNode.text, type: 'normal' });
+ } else {
+ lines[currentLine].push({ content: treeNode.raw, type: 'normal' });
}
});
@@ -89,7 +92,8 @@ export function markdownToHTML(markdown: string, { markdownAutoWrap }: MermaidCo
} else if (node.type === 'escape') {
return node.text;
}
- return `Unsupported markdown: ${node.type}`;
+ log.warn(`Unsupported markdown: ${node.type}`);
+ return node.raw;
}
return nodes.map(output).join('');
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index 7efa6eb9b..27f785205 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -629,6 +629,11 @@ export const insertEdge = function (
const useMargin = !animatedEdge && edge?.look === 'neo';
addEdgeMarkers(svgPath, edge, url, id, diagramType, useMargin, strokeColor);
+ const midIndex = Math.floor(points.length / 2);
+ const point = points[midIndex];
+ if (!utils.isLabelCoordinateInPath(point, svgPath.attr('d'))) {
+ pointsHasChanged = true;
+ }
let paths = {};
if (pointsHasChanged) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
index 99dedd919..16a201e14 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
@@ -104,8 +104,23 @@ export const userNodeOverrides = (node: Node, options: any) => {
seed: handDrawnSeed,
strokeWidth: stylesMap.get('stroke-width')?.replace('px', '') || 1.3,
fillLineDash: [0, 0],
+ strokeLineDash: getStrokeDashArray(stylesMap.get('stroke-dasharray')),
},
options
);
return result;
};
+
+const getStrokeDashArray = (strokeDasharrayStyle?: string) => {
+ if (!strokeDasharrayStyle) {
+ return [0, 0];
+ }
+ const dashArray = strokeDasharrayStyle.trim().split(/\s+/).map(Number);
+ if (dashArray.length === 1) {
+ const val = isNaN(dashArray[0]) ? 0 : dashArray[0];
+ return [val, val];
+ }
+ const first = isNaN(dashArray[0]) ? 0 : dashArray[0];
+ const second = isNaN(dashArray[1]) ? 0 : dashArray[1];
+ return [first, second];
+};
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
index 52a4397a2..e73074268 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -1,9 +1,8 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
-import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js';
export const createHexagonPathD = (
@@ -29,42 +28,50 @@ export async function hexagon(parent: D3Selection<
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
- const f = 4;
- const h = bbox.height + node.padding;
- const m = h / f;
- const w = bbox.width + 2 * m + node.padding;
- const points = [
- { x: m, y: 0 },
- { x: w - m, y: 0 },
- { x: w, y: -h / 2 },
- { x: w - m, y: -h },
- { x: m, y: -h },
- { x: 0, y: -h / 2 },
- ];
-
- let polygon: D3Selection | Awaited>;
+ const h = bbox.height + (node.padding ?? 0);
+ const w = bbox.width + (node.padding ?? 0) * 2.5;
const { cssStyles } = node;
+ // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
+ const rc = rough.svg(shapeSvg);
+ const options = userNodeOverrides(node, {});
- if (node.look === 'handDrawn') {
- // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
- const rc = rough.svg(shapeSvg);
- const options = userNodeOverrides(node, {});
- const pathData = createHexagonPathD(0, 0, w, h, m);
- const roughNode = rc.path(pathData, options);
-
- polygon = shapeSvg
- .insert(() => roughNode, ':first-child')
- .attr('transform', `translate(${-w / 2}, ${h / 2})`);
-
- if (cssStyles) {
- polygon.attr('style', cssStyles);
- }
- } else {
- polygon = insertPolygonShape(shapeSvg, w, h, points);
+ if (node.look !== 'handDrawn') {
+ options.roughness = 0;
+ options.fillStyle = 'solid';
}
- if (nodeStyles) {
- polygon.attr('style', nodeStyles);
+ let halfWidth = w / 2;
+ const m = halfWidth / 6; // Margin for label
+ halfWidth = halfWidth + m; // Adjusted half width for hexagon
+
+ const halfHeight = h / 2;
+
+ const fixedLength = halfHeight / 2;
+ const deducedWidth = halfWidth - fixedLength;
+
+ const points = [
+ { x: -deducedWidth, y: -halfHeight },
+ { x: 0, y: -halfHeight },
+ { x: deducedWidth, y: -halfHeight },
+ { x: halfWidth, y: 0 },
+ { x: deducedWidth, y: halfHeight },
+ { x: 0, y: halfHeight },
+ { x: -deducedWidth, y: halfHeight },
+ { x: -halfWidth, y: 0 },
+ ];
+
+ const pathData = createPathFromPoints(points);
+ const shapeNode = rc.path(pathData, options);
+
+ const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+ polygon.attr('class', 'basic label-container');
+
+ if (cssStyles && node.look !== 'handDrawn') {
+ polygon.selectChildren('path').attr('style', cssStyles);
+ }
+
+ if (nodeStyles && node.look !== 'handDrawn') {
+ polygon.selectChildren('path').attr('style', nodeStyles);
}
node.width = w;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
index b7e9d61e9..87adc4814 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -25,6 +25,7 @@ export async function question(parent: D3Selection
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
const s = w + h;
+ const adjustment = 0.5;
const points = [
{ x: s / 2, y: 0 },
@@ -45,13 +46,14 @@ export async function question(parent: D3Selection
polygon = shapeSvg
.insert(() => roughNode, ':first-child')
- .attr('transform', `translate(${-s / 2}, ${s / 2})`);
+ .attr('transform', `translate(${-s / 2 + adjustment}, ${s / 2})`);
if (cssStyles) {
polygon.attr('style', cssStyles);
}
} else {
polygon = insertPolygonShape(shapeSvg, s, s, points);
+ polygon.attr('transform', `translate(${-s / 2 + adjustment}, ${s / 2})`);
}
if (nodeStyles) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 134bcdb6c..40d71429c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -1,18 +1,160 @@
-import type { Node, RectOptions } from '../../types.js';
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import rough from 'roughjs';
import type { D3Selection } from '../../../types.js';
-import { drawRect } from './drawRect.js';
+
+/**
+ * Generates evenly spaced points along an elliptical arc connecting two points.
+ *
+ * @param x1 - x-coordinate of the start point of the arc
+ * @param y1 - y-coordinate of the start point of the arc
+ * @param x2 - x-coordinate of the end point of the arc
+ * @param y2 - y-coordinate of the end point of the arc
+ * @param rx - horizontal radius of the ellipse
+ * @param ry - vertical radius of the ellipse
+ * @param clockwise - direction of the arc; true for clockwise, false for counterclockwise
+ * @returns Array of points `{ x, y }` along the elliptical arc
+ *
+ * @throws Error if the given radii are too small to draw an arc between the points
+ */
+export function generateArcPoints(
+ x1: number,
+ y1: number,
+ x2: number,
+ y2: number,
+ rx: number,
+ ry: number,
+ clockwise: boolean
+) {
+ const numPoints = 20;
+ // Calculate midpoint
+ const midX = (x1 + x2) / 2;
+ const midY = (y1 + y2) / 2;
+
+ // Calculate the angle of the line connecting the points
+ const angle = Math.atan2(y2 - y1, x2 - x1);
+
+ // Calculate transformed coordinates for the ellipse
+ const dx = (x2 - x1) / 2;
+ const dy = (y2 - y1) / 2;
+
+ // Scale to unit circle
+ const transformedX = dx / rx;
+ const transformedY = dy / ry;
+
+ // Calculate the distance between points on the unit circle
+ const distance = Math.sqrt(transformedX ** 2 + transformedY ** 2);
+
+ // Check if the ellipse can be drawn with the given radii
+ if (distance > 1) {
+ throw new Error('The given radii are too small to create an arc between the points.');
+ }
+
+ // Calculate the distance from the midpoint to the center of the ellipse
+ const scaledCenterDistance = Math.sqrt(1 - distance ** 2);
+
+ // Calculate the center of the ellipse
+ const centerX = midX + scaledCenterDistance * ry * Math.sin(angle) * (clockwise ? -1 : 1);
+ const centerY = midY - scaledCenterDistance * rx * Math.cos(angle) * (clockwise ? -1 : 1);
+
+ // Calculate the start and end angles on the ellipse
+ const startAngle = Math.atan2((y1 - centerY) / ry, (x1 - centerX) / rx);
+ const endAngle = Math.atan2((y2 - centerY) / ry, (x2 - centerX) / rx);
+
+ // Adjust angles for clockwise/counterclockwise
+ let angleRange = endAngle - startAngle;
+ if (clockwise && angleRange < 0) {
+ angleRange += 2 * Math.PI;
+ }
+ if (!clockwise && angleRange > 0) {
+ angleRange -= 2 * Math.PI;
+ }
+
+ // Generate points
+ const points = [];
+ for (let i = 0; i < numPoints; i++) {
+ const t = i / (numPoints - 1);
+ const angle = startAngle + t * angleRange;
+ const x = centerX + rx * Math.cos(angle);
+ const y = centerY + ry * Math.sin(angle);
+ points.push({ x, y });
+ }
+
+ return points;
+}
export async function roundedRect(
parent: D3Selection,
node: Node
) {
- const options = {
- rx: 5,
- ry: 5,
- classes: '',
- labelPaddingX: (node?.padding || 0) * 1,
- labelPaddingY: (node?.padding || 0) * 1,
- } as RectOptions;
+ const { labelStyles, nodeStyles } = styles2String(node);
+ node.labelStyle = labelStyles;
+ const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
- return drawRect(parent, node, options);
+ const labelPaddingX = node?.padding ?? 0;
+ const labelPaddingY = node?.padding ?? 0;
+
+ const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
+ const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
+ const radius = 5;
+ const taper = 5; // Taper width for the rounded corners
+ const { cssStyles } = node;
+ // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
+ const rc = rough.svg(shapeSvg);
+ const options = userNodeOverrides(node, {});
+
+ if (node.look !== 'handDrawn') {
+ options.roughness = 0;
+ options.fillStyle = 'solid';
+ }
+
+ const points = [
+ // Top edge (left to right)
+ { x: -w / 2 + taper, y: -h / 2 }, // Top-left corner start (1)
+ { x: w / 2 - taper, y: -h / 2 }, // Top-right corner start (2)
+
+ ...generateArcPoints(w / 2 - taper, -h / 2, w / 2, -h / 2 + taper, radius, radius, true), // Top-left arc (2 to 3)
+
+ // Right edge (top to bottom)
+ { x: w / 2, y: -h / 2 + taper }, // Top-right taper point (3)
+ { x: w / 2, y: h / 2 - taper }, // Bottom-right taper point (4)
+
+ ...generateArcPoints(w / 2, h / 2 - taper, w / 2 - taper, h / 2, radius, radius, true), // Top-left arc (4 to 5)
+
+ // Bottom edge (right to left)
+ { x: w / 2 - taper, y: h / 2 }, // Bottom-right corner start (5)
+ { x: -w / 2 + taper, y: h / 2 }, // Bottom-left corner start (6)
+
+ ...generateArcPoints(-w / 2 + taper, h / 2, -w / 2, h / 2 - taper, radius, radius, true), // Top-left arc (4 to 5)
+
+ // Left edge (bottom to top)
+ { x: -w / 2, y: h / 2 - taper }, // Bottom-left taper point (7)
+ { x: -w / 2, y: -h / 2 + taper }, // Top-left taper point (8)
+ ...generateArcPoints(-w / 2, -h / 2 + taper, -w / 2 + taper, -h / 2, radius, radius, true), // Top-left arc (4 to 5)
+ ];
+
+ const pathData = createPathFromPoints(points);
+ const shapeNode = rc.path(pathData, options);
+
+ const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+ polygon.attr('class', 'basic label-container outer-path');
+
+ if (cssStyles && node.look !== 'handDrawn') {
+ polygon.selectChildren('path').attr('style', cssStyles);
+ }
+
+ if (nodeStyles && node.look !== 'handDrawn') {
+ polygon.selectChildren('path').attr('style', nodeStyles);
+ }
+
+ updateNodeBounds(node, polygon);
+
+ node.intersect = function (point) {
+ const pos = intersect.polygon(node, points, point);
+ return pos;
+ };
+
+ return shapeSvg;
}
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
index 1b93aa1b3..117176b19 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -1,11 +1,15 @@
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import {
+ labelHelper,
+ updateNodeBounds,
+ getNodeClasses,
+ generateCirclePoints,
+ createPathFromPoints,
+} from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
-import { createRoundedRectPathD } from './roundedRectPath.js';
import type { D3Selection } from '../../../types.js';
-import { handleUndefinedAttr } from '../../../utils.js';
export const createStadiumPathD = (
x: number,
@@ -60,36 +64,44 @@ export async function stadium(parent: D3Selection<
const h = bbox.height + node.padding;
const w = bbox.width + h / 4 + node.padding;
- let rect;
+ const radius = h / 2;
const { cssStyles } = node;
- if (node.look === 'handDrawn') {
- // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
- const rc = rough.svg(shapeSvg);
- const options = userNodeOverrides(node, {});
+ // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
+ const rc = rough.svg(shapeSvg);
+ const options = userNodeOverrides(node, {});
- const pathData = createRoundedRectPathD(-w / 2, -h / 2, w, h, h / 2);
- const roughNode = rc.path(pathData, options);
-
- rect = shapeSvg.insert(() => roughNode, ':first-child');
- rect.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
- } else {
- rect = shapeSvg.insert('rect', ':first-child');
-
- rect
- .attr('class', 'basic label-container')
- .attr('style', nodeStyles)
- .attr('rx', h / 2)
- .attr('ry', h / 2)
- .attr('x', -w / 2)
- .attr('y', -h / 2)
- .attr('width', w)
- .attr('height', h);
+ if (node.look !== 'handDrawn') {
+ options.roughness = 0;
+ options.fillStyle = 'solid';
}
- updateNodeBounds(node, rect);
+ const points = [
+ { x: -w / 2 + radius, y: -h / 2 },
+ { x: w / 2 - radius, y: -h / 2 },
+ ...generateCirclePoints(-w / 2 + radius, 0, radius, 50, 90, 270),
+ { x: w / 2 - radius, y: h / 2 },
+ ...generateCirclePoints(w / 2 - radius, 0, radius, 50, 270, 450),
+ ];
+
+ const pathData = createPathFromPoints(points);
+ const shapeNode = rc.path(pathData, options);
+
+ const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+ polygon.attr('class', 'basic label-container outer-path');
+
+ if (cssStyles && node.look !== 'handDrawn') {
+ polygon.selectChildren('path').attr('style', cssStyles);
+ }
+
+ if (nodeStyles && node.look !== 'handDrawn') {
+ polygon.selectChildren('path').attr('style', nodeStyles);
+ }
+
+ updateNodeBounds(node, polygon);
node.intersect = function (point) {
- return intersect.rect(node, point);
+ const pos = intersect.polygon(node, points, point);
+ return pos;
};
return shapeSvg;
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 756a55e5d..4b75c9704 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -133,6 +133,21 @@ properties:
- MODEL_ORDER
- GREEDY_MODEL_ORDER
default: GREEDY_MODEL_ORDER
+ forceNodeModelOrder:
+ description: |
+ The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+ type: boolean
+ default: false
+ considerModelOrder:
+ description: |
+ Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+ type: string
+ enum:
+ - NONE
+ - NODES_AND_EDGES
+ - PREFER_EDGES
+ - PREFER_NODES
+ default: 'NODES_AND_EDGES'
darkMode:
type: boolean
default: false
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 6ed935cf6..0f1bfbecf 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -884,6 +884,7 @@ export default {
runFunc,
entityDecode,
insertTitle,
+ isLabelCoordinateInPath,
parseFontSize,
InitIDGenerator,
};
@@ -960,3 +961,23 @@ export function handleUndefinedAttr(
) {
return attrValue ?? null;
}
+
+/**
+ * Checks if the x or y coordinate of the edge label
+ * appears in the given SVG path data string.
+ *
+ * @param point - The Point object with x and y properties to check.
+ * @param dAttr - SVG path data string (the 'd' attribute of an SVG path element).
+ * @returns - True if the rounded x or y coordinate of the edge label is found
+ * in the sanitized path data string; otherwise, false.
+ */
+export function isLabelCoordinateInPath(point: Point, dAttr: string) {
+ const roundedX = Math.round(point.x);
+ const roundedY = Math.round(point.y);
+
+ const sanitizedD = dAttr.replace(/(\d+\.\d+)/g, (match) =>
+ Math.round(parseFloat(match)).toString()
+ );
+
+ return sanitizedD.includes(roundedX.toString()) || sanitizedD.includes(roundedY.toString());
+}
diff --git a/packages/parser/src/language/pie/pie.langium b/packages/parser/src/language/pie/pie.langium
index a80caa81f..f6802d718 100644
--- a/packages/parser/src/language/pie/pie.langium
+++ b/packages/parser/src/language/pie/pie.langium
@@ -12,5 +12,9 @@ entry Pie:
;
PieSection:
- label=STRING ":" value=NUMBER EOL
+ label=STRING ":" value=NUMBER_PIE EOL
;
+
+terminal FLOAT_PIE returns number: /-?[0-9]+\.[0-9]+(?!\.)/;
+terminal INT_PIE returns number: /-?(0|[1-9][0-9]*)(?!\.)/;
+terminal NUMBER_PIE returns number: FLOAT_PIE | INT_PIE;
\ No newline at end of file