diff --git a/.changeset/chatty-lemons-stick.md b/.changeset/chatty-lemons-stick.md
new file mode 100644
index 000000000..733e374ef
--- /dev/null
+++ b/.changeset/chatty-lemons-stick.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status
diff --git a/.changeset/cold-sites-accept.md b/.changeset/cold-sites-accept.md
new file mode 100644
index 000000000..cba7ae414
--- /dev/null
+++ b/.changeset/cold-sites-accept.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Position the edge label in state diagram correctly relative to the edge
diff --git a/.changeset/empty-clouds-cry.md b/.changeset/empty-clouds-cry.md
new file mode 100644
index 000000000..c513542f1
--- /dev/null
+++ b/.changeset/empty-clouds-cry.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Apply correct dateFormat in Gantt chart to show only day when specified
diff --git a/.changeset/fuzzy-pears-cough.md b/.changeset/fuzzy-pears-cough.md
new file mode 100644
index 000000000..6ed777506
--- /dev/null
+++ b/.changeset/fuzzy-pears-cough.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'
diff --git a/.changeset/seven-papayas-film.md b/.changeset/seven-papayas-film.md
new file mode 100644
index 000000000..109743117
--- /dev/null
+++ b/.changeset/seven-papayas-film.md
@@ -0,0 +1,9 @@
+---
+'mermaid': patch
+---
+
+Add validation for negative values in pie charts:
+
+Prevents crashes during parsing by validating values post-parsing.
+
+Provides clearer, user-friendly error messages for invalid negative inputs.
diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js
index 180c0093d..27e23cd91 100644
--- a/cypress/integration/rendering/block.spec.js
+++ b/cypress/integration/rendering/block.spec.js
@@ -16,7 +16,7 @@ describe('Block diagram', () => {
it('BL2: should handle columns statement in sub-blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
id1["Hello"]
block
columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
block
columns 1
id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {
it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 1
block
columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {
it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 1
block
id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
it('BL6: should handle block arrows and spece statements', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
space:3
ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
it('BL7: should handle different types of edges', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
A space:5
A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
it('BL8: should handle sub-blocks without columns statements', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 2
C A B
block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
B space
block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
it('BL10: should handle edges from composite blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
B space
block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
it('BL11: should handle edges to composite blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
B space
block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
it('BL12: edges should handle labels', () => {
imgSnapshotTest(
- `block-beta
+ `block
A
space
A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
it('BL13: should handle block arrows in different directions', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
it('BL14: should style statements and class statements', () => {
imgSnapshotTest(
- `block-beta
+ `block
A
B
classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
it('BL15: width alignment - D and E should share available space', () => {
imgSnapshotTest(
- `block-beta
+ `block
block
D
E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
it('BL16: width alignment - C should be as wide as the composite block', () => {
imgSnapshotTest(
- `block-beta
+ `block
block
A("This is the text")
B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
it('BL17: width alignment - blocks should be equal in width', () => {
imgSnapshotTest(
- `block-beta
+ `block
A("This is the text")
B
C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
it('BL18: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
- `block-beta
+ `block
A["square"]
B("rounded")
C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
it('BL19: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest(
- `block-beta
+ `block
A>"rect_left_inv_arrow"]
B{"diamond"}
C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
it('BL20: block types 3 - stadium', () => {
imgSnapshotTest(
- `block-beta
+ `block
A(["stadium"])
`,
{}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest(
- `block-beta
+ `block
A[/"lean right"/]
B[\"lean left"\]
C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
it('BL22: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
- `block-beta
+ `block
A["square"]
B("rounded")
C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
it('BL23: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest(
- `block-beta
+ `block
A("rounded"):2
B:2
C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
it('BL24: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest(
- `block-beta
+ `block
block:2
A
end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
it('BL25: block in the middle with space on each side', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
space
middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
});
it('BL26: space and an edge', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 5
A space B
A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
});
it('BL27: block sizes for regular blocks', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
a["A wide one"] b:2 c:2 d
`,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
});
it('BL28: composite block with a set width - f should use the available space', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
a:3
block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest(
- `block-beta
+ `block
columns 3
a:3
block:e:3
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 2cc67918c..32dbcb4d9 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -565,6 +565,18 @@ describe('Gantt diagram', () => {
);
});
+ it('should render only the day when using dateFormat D', () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Test
+ dateFormat D
+ A :a, 1, 1d
+ `,
+ {}
+ );
+ });
+
// TODO: fix it
//
// This test is skipped deliberately
@@ -647,6 +659,49 @@ describe('Gantt diagram', () => {
);
});
+ it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
+ imgSnapshotTest(
+ `
+ gantt
+ dateFormat YYYY-MM-DD HH:mm:ss
+ excludes 2025-07-07
+ section Section
+ A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
+ Another task:after a1, 20h
+ `,
+ {}
+ );
+ });
+
+ it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
+ imgSnapshotTest(
+ `
+ gantt
+ dateFormat YYYY-MM-DD HH:mm:ss
+ excludes weekends
+ weekend saturday
+ section Section
+ A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
+ Another task:after a1, 20h
+ `,
+ {}
+ );
+ });
+ it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
+ imgSnapshotTest(
+ `
+ gantt
+ dateFormat YYYY-MM-DD HH:mm:ss
+ excludes weekends
+ weekend friday
+ section Section
+ A task :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
+ Another task:after a1, 20h
+ `,
+ {}
+ );
+ });
+
it("should render when there's a semicolon in the title", () => {
imgSnapshotTest(
`
diff --git a/cypress/integration/rendering/pie.spec.ts b/cypress/integration/rendering/pie.spec.ts
index 171a83057..8f6ef7de3 100644
--- a/cypress/integration/rendering/pie.spec.ts
+++ b/cypress/integration/rendering/pie.spec.ts
@@ -82,4 +82,13 @@ describe('pie chart', () => {
`
);
});
+ it('should render pie slices only for non-zero values but shows all legends', () => {
+ imgSnapshotTest(
+ ` pie title Pets adopted by volunteers
+ "Dogs" : 386
+ "Cats" : 85
+ "Rats" : 1
+ `
+ );
+ });
});
diff --git a/cypress/integration/rendering/sankey.spec.ts b/cypress/integration/rendering/sankey.spec.ts
index ad0d75f18..b9940d998 100644
--- a/cypress/integration/rendering/sankey.spec.ts
+++ b/cypress/integration/rendering/sankey.spec.ts
@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
describe('when given a linkColor', function () {
this.beforeAll(() => {
cy.wrap(
- `sankey-beta
+ `sankey
a,b,10
`
).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
this.beforeAll(() => {
cy.wrap(
`
- sankey-beta
+ sankey
a,b,8
b,c,8
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 83190dbc7..e5a0cedd0 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -602,6 +602,231 @@ State1 --> [*]
--
55
}
+`,
+ {}
+ );
+ });
+ it('should render edge labels correctly', () => {
+ imgSnapshotTest(
+ `---
+title: On The Way To Something Something DarkSide
+config:
+ look: default
+ theme: default
+---
+
+stateDiagram-v2
+
+ state State1_____________
+ {
+ c0
+ }
+
+ state State2_____________
+ {
+ c1
+ }
+
+ state State3_____________
+ {
+ c7
+ }
+
+ state State4_____________
+ {
+ c2
+ }
+
+ state State5_____________
+ {
+ c3
+ }
+
+ state State6_____________
+ {
+ c4
+ }
+
+ state State7_____________
+ {
+ c5
+ }
+
+ state State8_____________
+ {
+ c6
+ }
+
+
+[*] --> State1_____________
+State1_____________ --> State2_____________ : Transition1_____
+State2_____________ --> State4_____________ : Transition2_____
+State2_____________ --> State3_____________ : Transition3_____
+State3_____________ --> State2_____________
+State4_____________ --> State2_____________ : Transition5_____
+State4_____________ --> State5_____________ : Transition6_____
+State5_____________ --> State6_____________ : Transition7_____
+State6_____________ --> State4_____________ : Transition8_____
+State2_____________ --> State7_____________ : Transition4_____
+State4_____________ --> State7_____________ : Transition4_____
+State5_____________ --> State7_____________ : Transition4_____
+State6_____________ --> State7_____________ : Transition4_____
+State7_____________ --> State1_____________ : Transition9_____
+State5_____________ --> State8_____________ : Transition10____
+State8_____________ --> State5_____________ : Transition11____
+`,
+ {}
+ );
+ });
+ it('should render edge labels correctly with multiple transitions', () => {
+ imgSnapshotTest(
+ `---
+title: Multiple Transitions
+config:
+ look: default
+ theme: default
+---
+
+stateDiagram-v2
+
+ state State1_____________
+ {
+ c0
+ }
+
+ state State2_____________
+ {
+ c1
+ }
+
+ state State3_____________
+ {
+ c7
+ }
+
+ state State4_____________
+ {
+ c2
+ }
+
+ state State5_____________
+ {
+ c3
+ }
+
+ state State6_____________
+ {
+ c4
+ }
+
+ state State7_____________
+ {
+ c5
+ }
+
+ state State8_____________
+ {
+ c6
+ }
+
+ state State9_____________
+ {
+ c9
+ }
+
+[*] --> State1_____________
+State1_____________ --> State2_____________ : Transition1_____
+State2_____________ --> State4_____________ : Transition2_____
+State2_____________ --> State3_____________ : Transition3_____
+State3_____________ --> State2_____________
+State4_____________ --> State2_____________ : Transition5_____
+State4_____________ --> State5_____________ : Transition6_____
+State5_____________ --> State6_____________ : Transition7_____
+State6_____________ --> State4_____________ : Transition8_____
+State2_____________ --> State7_____________ : Transition4_____
+State4_____________ --> State7_____________ : Transition4_____
+State5_____________ --> State7_____________ : Transition4_____
+State6_____________ --> State7_____________ : Transition4_____
+State7_____________ --> State1_____________ : Transition9_____
+State5_____________ --> State8_____________ : Transition10____
+State8_____________ --> State5_____________ : Transition11____
+State9_____________ --> State8_____________ : Transition12____
+`,
+ {}
+ );
+ });
+
+ it('should render edge labels correctly with multiple states', () => {
+ imgSnapshotTest(
+ `---
+title: Multiple States
+config:
+ look: default
+ theme: default
+---
+
+stateDiagram-v2
+
+ state State1_____________
+ {
+ c0
+ }
+
+ state State2_____________
+ {
+ c1
+ }
+
+ state State3_____________
+ {
+ c7
+ }
+
+ state State4_____________
+ {
+ c2
+ }
+
+ state State5_____________
+ {
+ c3
+ }
+
+ state State6_____________
+ {
+ c4
+ }
+
+ state State7_____________
+ {
+ c5
+ }
+
+ state State8_____________
+ {
+ c6
+ }
+
+ state State9_____________
+ {
+ c9
+ }
+
+ state State10_____________
+ {
+ c10
+ }
+
+[*] --> State1_____________
+State1_____________ --> State2_____________ : Transition1_____
+State2_____________ --> State3_____________ : Transition2_____
+State3_____________ --> State4_____________ : Transition3_____
+State4_____________ --> State5_____________ : Transition4_____
+State5_____________ --> State6_____________ : Transition5_____
+State6_____________ --> State7_____________ : Transition6_____
+State7_____________ --> State8_____________ : Transition7_____
+State8_____________ --> State9_____________ : Transition8_____
+State9_____________ --> State10_____________ : Transition9_____
`,
{}
);
diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js
index a582355e8..d54086fa7 100644
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -1,7 +1,7 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('XY Chart', () => {
- it('should render the simplest possible chart', () => {
+ it('should render the simplest possible xy-beta chart', () => {
imgSnapshotTest(
`
xychart-beta
@@ -10,10 +10,19 @@ describe('XY Chart', () => {
{}
);
});
+ it('should render the simplest possible xy chart', () => {
+ imgSnapshotTest(
+ `
+ xychart
+ line [10, 30, 20]
+ `,
+ {}
+ );
+ });
it('Should render a complete chart', () => {
imgSnapshotTest(
`
- 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
@@ -26,7 +35,7 @@ describe('XY Chart', () => {
it('Should render a chart without title', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -38,7 +47,7 @@ describe('XY Chart', () => {
it('y-axis title not required', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -50,7 +59,7 @@ describe('XY Chart', () => {
it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -61,7 +70,7 @@ describe('XY Chart', () => {
it('x axis title not required', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -72,7 +81,7 @@ describe('XY Chart', () => {
it('Multiple plots can be rendered', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
line [23, 46, 77, 34]
line [45, 32, 33, 12]
bar [87, 54, 99, 85]
@@ -86,7 +95,7 @@ describe('XY Chart', () => {
it('Decimals and negative numbers are supported', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
y-axis -2.4 --> 3.5
line [+1.3, .6, 2.4, -.34]
`,
@@ -104,7 +113,7 @@ describe('XY Chart', () => {
height: 20
plotReservedSpacePercent: 100
---
- xychart-beta
+ xychart
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
{}
@@ -130,7 +139,7 @@ describe('XY Chart', () => {
showTick: false
showAxisLine: false
---
- xychart-beta
+ xychart
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
{}
@@ -140,7 +149,7 @@ describe('XY Chart', () => {
imgSnapshotTest(
`
%%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "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
@@ -181,7 +190,7 @@ describe('XY Chart', () => {
plotReservedSpacePercent: 60
showDataLabel: true
---
- 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
@@ -202,7 +211,7 @@ describe('XY Chart', () => {
yAxis:
showTitle: false
---
- 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
@@ -223,7 +232,7 @@ describe('XY Chart', () => {
yAxis:
showLabel: false
---
- 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
@@ -244,7 +253,7 @@ describe('XY Chart', () => {
yAxis:
showTick: false
---
- 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
@@ -265,7 +274,7 @@ describe('XY Chart', () => {
yAxis:
showAxisLine: false
---
- 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
@@ -294,7 +303,7 @@ describe('XY Chart', () => {
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
@@ -307,7 +316,7 @@ describe('XY Chart', () => {
it('should use the correct distances between data points', () => {
imgSnapshotTest(
`
- xychart-beta
+ xychart
x-axis 0 --> 2
line [0, 1, 0, 1]
bar [1, 0, 1, 0]
@@ -325,7 +334,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- 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
@@ -344,7 +353,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- 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
@@ -357,7 +366,7 @@ describe('XY Chart', () => {
it('should render vertical bar chart without labels by default', () => {
imgSnapshotTest(
`
- 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
@@ -375,7 +384,7 @@ describe('XY Chart', () => {
xyChart:
chartOrientation: horizontal
---
- 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
@@ -393,7 +402,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- xychart-beta
+ xychart
title "Multiple Bar Plots"
x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100
@@ -412,7 +421,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- xychart-beta
+ xychart
title "Multiple Bar Plots"
x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100
@@ -430,7 +439,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- xychart-beta
+ xychart
title "Single Bar Chart"
x-axis Categories [A]
y-axis "Value" 0 --> 100
@@ -449,7 +458,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- xychart-beta
+ xychart
title "Single Bar Chart"
x-axis Categories [A]
y-axis "Value" 0 --> 100
@@ -467,7 +476,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- xychart-beta
+ xychart
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
@@ -486,7 +495,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- xychart-beta
+ xychart
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
@@ -504,7 +513,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000
@@ -561,7 +570,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000
@@ -615,7 +624,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
y-axis "Revenue (in $)" 4000 --> 12000
@@ -672,7 +681,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
y-axis "Revenue (in $)" 4000 --> 12000
@@ -726,7 +735,7 @@ describe('XY Chart', () => {
xyChart:
showDataLabel: true
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000
@@ -783,7 +792,7 @@ describe('XY Chart', () => {
showDataLabel: true
chartOrientation: horizontal
---
- xychart-beta
+ xychart
title "Sales Revenue"
x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000
diff --git a/cypress/platform/darshan.html b/cypress/platform/darshan.html
new file mode 100644
index 000000000..df5994d7d
--- /dev/null
+++ b/cypress/platform/darshan.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Mermaid Quick Test Page
+
+
+
+
+
+
Pie chart demos
+
+ 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
+
@@ -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/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/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/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/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/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/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
index a97668d5f..db48e313c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -637,6 +637,11 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
log.info('arrowTypeEnd', edge.arrowTypeEnd);
addEdgeMarkers(svgPath, edge, url, id, diagramType, 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/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