From ea60525988918dcfb110fbbf0291132af399943e Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Fri, 13 Jun 2025 19:33:43 +0530 Subject: [PATCH 1/7] remove beta suffix from xyChart --- cypress/integration/rendering/xyChart.spec.js | 77 ++++++------ demos/xychart.html | 22 ++-- docs/syntax/xyChart.md | 16 +-- .../src/diagrams/xychart/parser/xychart.jison | 1 + .../xychart/parser/xychart.jison.spec.ts | 111 +++++++++--------- .../src/diagrams/xychart/xychartDetector.ts | 2 +- packages/mermaid/src/docs/syntax/xyChart.md | 12 +- packages/mermaid/src/mermaidAPI.spec.ts | 1 + 8 files changed, 124 insertions(+), 118 deletions(-) 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/demos/xychart.html b/demos/xychart.html index 25f8ec8ca..5706b15ea 100644 --- a/demos/xychart.html +++ b/demos/xychart.html @@ -16,7 +16,7 @@

XY Charts demos

-    xychart-beta
+    xychart
     title "Sales Revenue (in $)"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
     

XY Charts horizontal

-    xychart-beta horizontal
+    xychart horizontal
     title "Basic xychart"
     x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
     

XY Charts only lines and bar

-    xychart-beta
+    xychart
     line [23, 46, 77, 34]
     line [45, 32, 33, 12]
     line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
     

XY Charts with +ve and -ve numbers

-    xychart-beta
+    xychart
     line [+1.3, .6, 2.4, -.34]
     

XY Charts Bar with multiple category

-    xychart-beta
+    xychart
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
 
     

XY Charts line with multiple category

-    xychart-beta
+    xychart
     title "Line chart with many category"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
 
     

XY Charts category with large text

-    xychart-beta
+    xychart
     title "Basic xychart with many categories with category overlap"
     x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart-beta
+    xychart
       line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     
@@ -103,7 +103,7 @@ config: height: 20 plotReservedSpacePercent: 100 --- - xychart-beta + xychart bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
@@ -136,7 +136,7 @@ config: chartOrientation: horizontal plotReservedSpacePercent: 60 --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 @@ -162,7 +162,7 @@ config: xAxisLineColor: "#87ceeb" plotColorPalette: "#008000, #faba63" --- - xychart-beta + xychart title "Sales Revenue" x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 diff --git a/docs/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/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison index 987132d17..8a47b1aac 100644 --- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison +++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison @@ -29,6 +29,7 @@ "{" { this.popState(); } [^\}]* { return "acc_descr_multiline_value"; } +"xychart" {return 'XYCHART';} "xychart-beta" {return 'XYCHART';} (?:"vertical"|"horizontal") {return 'CHART_ORIENTATION'} 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..ee7c94581 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,7 +406,7 @@ describe('Testing xychart jison file', () => { }); it('parse multiple bar and line variant 2', () => { const str = ` - xychart-beta horizontal + xychart horizontal title Basic xychart x-axis "this is x axis" [category1, "category 2", category3] y-axis yaxisText 10 --> 150 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/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 3e28dbfd4..91022516a 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -796,6 +796,7 @@ graph TD;A--x|text including URL space|B;`) { textDiagramType: 'pie', expectedType: 'pie' }, { textDiagramType: 'packet-beta', expectedType: 'packet' }, { textDiagramType: 'xychart-beta', expectedType: 'xychart' }, + { textDiagramType: 'xychart', expectedType: 'xychart' }, { textDiagramType: 'requirementDiagram', expectedType: 'requirement' }, { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, From 9dc987b28b34d81580be59b7499e7eab6f3e636c Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Tue, 17 Jun 2025 12:12:40 +0530 Subject: [PATCH 2/7] remove beta support for sankey diagram --- cypress/integration/rendering/sankey.spec.ts | 4 ++-- demos/sankey.html | 16 ++++++++------ docs/syntax/sankey.md | 22 +++++++++---------- .../src/diagrams/sankey/parser/sankey.jison | 1 + .../src/diagrams/sankey/parser/sankey.spec.ts | 21 ++++++++++++++++-- .../src/diagrams/sankey/sankeyDetector.ts | 2 +- packages/mermaid/src/docs/syntax/sankey.md | 12 +++++----- 7 files changed, 49 insertions(+), 29 deletions(-) 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/demos/sankey.html b/demos/sankey.html index 2439cb589..11bb541c2 100644 --- a/demos/sankey.html +++ b/demos/sankey.html @@ -20,12 +20,14 @@ width: 800 nodeAlignment: left --- - sankey-beta - Revenue,Expenses,10 - Revenue,Profit,10 - Expenses,Manufacturing,5 - Expenses,Tax,3 - Expenses,Research,2 + sankey + a,b,8 + b,c,8 + c,d,8 + d,e,8 + + x,c,4 + c,y,4

Energy flow

@@ -40,7 +42,7 @@ linkColor: gradient nodeAlignment: justify --- - sankey-beta + sankey Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 diff --git a/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/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/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 From a3d164fde8673054529b9c333b0c2429f5f413b5 Mon Sep 17 00:00:00 2001 From: darshanr0107 Date: Tue, 17 Jun 2025 12:43:26 +0530 Subject: [PATCH 3/7] remove beta suffix for block diagram --- cypress/integration/rendering/block.spec.js | 56 ++++---- demos/block.html | 22 ++-- docs/syntax/block.md | 122 +++++++++--------- .../src/diagrams/block/blockDetector.ts | 2 +- .../src/diagrams/block/parser/block.jison | 10 +- .../src/diagrams/block/parser/block.spec.ts | 46 +++---- packages/mermaid/src/docs/syntax/block.md | 62 ++++----- 7 files changed, 160 insertions(+), 160 deletions(-) diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js index 589a30fde..12843f2a2 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/demos/block.html b/demos/block.html index f0957b670..5296126e0 100644 --- a/demos/block.html +++ b/demos/block.html @@ -10,7 +10,7 @@

Block diagram demos

-block-beta
+block
 columns 1
   db(("DB"))
   blockArrowId6<["   "]>(down)
@@ -26,7 +26,7 @@ columns 1
   style B fill:#f9F,stroke:#333,stroke-width:4px
     
-block-beta
+block
     A1["square"]
     B1("rounded")
     C1(("circle"))
@@ -36,7 +36,7 @@ block-beta
     
-block-beta
+block
     A1(["stadium"])
     A2[["subroutine"]]
     B1[("cylinder")]
@@ -48,7 +48,7 @@ block-beta
     
-block-beta
+block
   block:e:4
     columns 2
       f
@@ -57,7 +57,7 @@ block-beta
 
     
-block-beta
+block
   block:e:4
     columns 2
       f
@@ -67,7 +67,7 @@ block-beta
 
     
-block-beta
+block
   columns 3
   a:3
   block:e:3
@@ -80,7 +80,7 @@ block-beta
 
     
-block-beta
+block
   columns 4
   a b c d
   block:e:4
@@ -97,19 +97,19 @@ flowchart LR
   X-- "a label" -->z
     
-block-beta
+block
 columns 5
    A space B
    A --x B
     
-block-beta
+block
 columns 3
   a["A wide one"] b:2 c:2 d
     
-block-beta
+block
 columns 3
   a b c
   e:3
@@ -117,7 +117,7 @@ columns 3
     
-block-beta
+block
 
   A1:3
   A2:1
diff --git a/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/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 4bf3290d8..09f3eb02a 100644
--- a/packages/mermaid/src/diagrams/block/parser/block.spec.ts
+++ b/packages/mermaid/src/diagrams/block/parser/block.spec.ts
@@ -22,7 +22,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"]
           `;
 
@@ -34,7 +34,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
       `;
@@ -50,7 +50,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
@@ -71,7 +71,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`;
 
@@ -86,7 +86,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"]
       `;
 
@@ -100,7 +100,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"]
       `;
 
@@ -115,7 +115,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"]
       `;
@@ -126,7 +126,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"]
       `;
 
@@ -136,7 +136,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"]
       `;
@@ -148,7 +148,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"]
@@ -162,7 +162,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"]
@@ -176,7 +176,7 @@ describe('Block diagram', function () {
     });
 
     it('compound blocks 2', () => {
-      const str = `block-beta
+      const str = `block
           block
             aBlock["ABlock"]
             bBlock["BBlock"]
@@ -204,7 +204,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
@@ -239,7 +239,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"]
@@ -264,7 +264,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"]
 
@@ -291,7 +291,7 @@ describe('Block diagram', function () {
     });
 
     it('Arrow blocks', () => {
-      const str = `block-beta
+      const str = `block
         columns 3
         block1["Block 1"]
         blockArrow<["   "]>(right)
@@ -315,7 +315,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)
@@ -338,7 +338,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
@@ -353,7 +353,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"]
@@ -372,7 +372,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"]
@@ -390,7 +390,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
@@ -406,9 +406,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/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;
 

From 8224a81ab6a9484053465de985eb377358988af5 Mon Sep 17 00:00:00 2001
From: darshanr0107 
Date: Tue, 17 Jun 2025 13:52:04 +0530
Subject: [PATCH 4/7] fix xychart test cases

---
 packages/mermaid/src/diagrams/xychart/parser/xychart.jison      | 2 +-
 .../mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
index 8a47b1aac..33575b946 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
@@ -29,8 +29,8 @@
 "{"                 { this.popState(); }
 [^\}]*               { return "acc_descr_multiline_value"; }
 
-"xychart"                                 {return 'XYCHART';}
 "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 ee7c94581..409972828 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -407,7 +407,7 @@ describe('Testing xychart jison file', () => {
   it('parse multiple bar and line variant 2', () => {
     const str = `
     xychart horizontal
-    title Basic xychart
+    title "Basic xychart"
     x-axis "this is x axis" [category1, "category 2", category3]
     y-axis yaxisText 10 --> 150
  bar barTitle1 [23, 45, 56.6]

From 2c0931da46794b49d2523211e25f782900c34e94 Mon Sep 17 00:00:00 2001
From: darshanr0107 
Date: Tue, 17 Jun 2025 15:53:25 +0530
Subject: [PATCH 5/7] added changeset

---
 .changeset/chatty-lemons-stick.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/chatty-lemons-stick.md

diff --git a/.changeset/chatty-lemons-stick.md b/.changeset/chatty-lemons-stick.md
new file mode 100644
index 000000000..d0a8a4d58
--- /dev/null
+++ b/.changeset/chatty-lemons-stick.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+Removed the "Beta" suffix from the XYChart, Block , Sankey diagrams to reflect their stable status

From 3fea9e875920bc857dafabaedc65680201c50a84 Mon Sep 17 00:00:00 2001
From: darshanr0107 
Date: Wed, 16 Jul 2025 13:40:40 +0530
Subject: [PATCH 6/7] fix: update changeset

on-behalf-of: @Mermaid-Chart 
---
 .changeset/chatty-lemons-stick.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/chatty-lemons-stick.md b/.changeset/chatty-lemons-stick.md
index d0a8a4d58..733e374ef 100644
--- a/.changeset/chatty-lemons-stick.md
+++ b/.changeset/chatty-lemons-stick.md
@@ -2,4 +2,4 @@
 'mermaid': patch
 ---
 
-Removed the "Beta" suffix from the XYChart, Block , Sankey diagrams to reflect their stable status
+chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

From a14cd0e2a1bb9d501672d21639c9dac2428c0547 Mon Sep 17 00:00:00 2001
From: darshanr0107 
Date: Wed, 16 Jul 2025 18:47:45 +0530
Subject: [PATCH 7/7] fix: update test case

on-behalf-of: @Mermaid-Chart 
---
 packages/mermaid/src/mermaidAPI.spec.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index ef2ffdc73..b2d2d3cd3 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -755,7 +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' },
+      {
+        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' },