marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6653 from mermaid-js/4459-remove-beta-suffix

Browse Source 
#4459: Remove beta suffix
This commit is contained in:
Knut Sveidqvist
2025-08-08 09:55:06 +00:00
committed by GitHub
parent e6574ef40c a14cd0e2a1
commit 22530a8bdf
23 changed files with 343 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/chatty-lemons-stick.md Normal file
View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

56
cypress/integration/rendering/block.spec.js
View File

@@ -16,7 +16,7 @@ describe('Block diagram', () => {
it('BL2: should handle columns statement in sub-blocks', () => { it('BL2: should handle columns statement in sub-blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
id1["Hello"] id1["Hello"]
block block
columns 3 columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
it('BL3: should align block widths and handle columns statement in sub-blocks', () => { it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
block block
columns 1 columns 1
id1 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', () => { it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 1 columns 1
block block
columns 1 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)', () => { it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 1 columns 1
block block
id1 id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
it('BL6: should handle block arrows and spece statements', () => { it('BL6: should handle block arrows and spece statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
space:3 space:3
ida idb idc ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
it('BL7: should handle different types of edges', () => { it('BL7: should handle different types of edges', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
A space:5 A space:5
A --o B A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
it('BL8: should handle sub-blocks without columns statements', () => { it('BL8: should handle sub-blocks without columns statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 2 columns 2
C A B C A B
block block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
it('BL9: should handle edges from blocks in sub blocks to other blocks', () => { it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
B space B space
block block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
it('BL10: should handle edges from composite blocks', () => { it('BL10: should handle edges from composite blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
B space B space
block BL block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
it('BL11: should handle edges to composite blocks', () => { it('BL11: should handle edges to composite blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
B space B space
block BL block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
it('BL12: edges should handle labels', () => { it('BL12: edges should handle labels', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A A
space space
A -- "apa" --> E A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
it('BL13: should handle block arrows in different directions', () => { it('BL13: should handle block arrows in different directions', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
space blockArrowId1<["down"]>(down) space space blockArrowId1<["down"]>(down) space
blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left) 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', () => { it('BL14: should style statements and class statements', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A A
B B
classDef blue fill:#66f,stroke:#333,stroke-width:2px; 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', () => { it('BL15: width alignment - D and E should share available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
block block
D D
E E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
it('BL16: width alignment - C should be as wide as the composite block', () => { it('BL16: width alignment - C should be as wide as the composite block', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
block block
A("This is the text") A("This is the text")
B B
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
it('BL17: width alignment - blocks should be equal in width', () => { it('BL17: width alignment - blocks should be equal in width', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A("This is the text") A("This is the text")
B B
C C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
it('BL18: block types 1 - square, rounded and circle', () => { it('BL18: block types 1 - square, rounded and circle', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A["square"] A["square"]
B("rounded") B("rounded")
C(("circle")) C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
it('BL19: block types 2 - odd, diamond and hexagon', () => { it('BL19: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A>"rect_left_inv_arrow"] A>"rect_left_inv_arrow"]
B{"diamond"} B{"diamond"}
C{{"hexagon"}} C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
it('BL20: block types 3 - stadium', () => { it('BL20: block types 3 - stadium', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A(["stadium"]) A(["stadium"])
`, `,
{} {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => { it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A[/"lean right"/] A[/"lean right"/]
B[\"lean left"\] B[\"lean left"\]
C[/"trapezoid"\] C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
it('BL22: block types 1 - square, rounded and circle', () => { it('BL22: block types 1 - square, rounded and circle', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A["square"] A["square"]
B("rounded") B("rounded")
C(("circle")) C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
it('BL23: sizing - it should be possible to make a block wider', () => { it('BL23: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
A("rounded"):2 A("rounded"):2
B:2 B:2
C C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
it('BL24: sizing - it should be possible to make a composite block wider', () => { it('BL24: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
block:2 block:2
A A
end end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
it('BL25: block in the middle with space on each side', () => { it('BL25: block in the middle with space on each side', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
space space
middle["In the middle"] middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
}); });
it('BL26: space and an edge', () => { it('BL26: space and an edge', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 5 columns 5
A space B A space B
A --x B A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
}); });
it('BL27: block sizes for regular blocks', () => { it('BL27: block sizes for regular blocks', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
a["A wide one"] b:2 c:2 d 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', () => { it('BL28: composite block with a set width - f should use the available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
a:3 a:3
block:e: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', () => { it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest( imgSnapshotTest(
`block-beta `block
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3

4
cypress/integration/rendering/sankey.spec.ts
View File

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
describe('when given a linkColor', function () { describe('when given a linkColor', function () {
this.beforeAll(() => { this.beforeAll(() => {
cy.wrap( cy.wrap(
`sankey-beta `sankey
a,b,10 a,b,10
` `
).as('graph'); ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
this.beforeAll(() => { this.beforeAll(() => {
cy.wrap( cy.wrap(
` `
sankey-beta sankey
a,b,8 a,b,8
b,c,8 b,c,8

77
cypress/integration/rendering/xyChart.spec.js
View File

@@ -1,7 +1,7 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts'; import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('XY Chart', () => { describe('XY Chart', () => {
it('should render the simplest possible chart', () => { it('should render the simplest possible xy-beta chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta 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', () => { it('Should render a complete chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +35,7 @@ describe('XY Chart', () => {
it('Should render a chart without title', () => { it('Should render a chart without title', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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', () => { it('y-axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis 4000 --> 11000 y-axis 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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', () => { it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] 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] 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] 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', () => { it('x axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] 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] 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] 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', () => { it('Multiple plots can be rendered', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
line [23, 46, 77, 34] line [23, 46, 77, 34]
line [45, 32, 33, 12] line [45, 32, 33, 12]
bar [87, 54, 99, 85] bar [87, 54, 99, 85]
@@ -86,7 +95,7 @@ describe('XY Chart', () => {
it('Decimals and negative numbers are supported', () => { it('Decimals and negative numbers are supported', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
y-axis -2.4 --> 3.5 y-axis -2.4 --> 3.5
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
`, `,
@@ -104,7 +113,7 @@ describe('XY Chart', () => {
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart-beta xychart
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
@@ -130,7 +139,7 @@ describe('XY Chart', () => {
showTick: false showTick: false
showAxisLine: false showAxisLine: false
--- ---
xychart-beta xychart
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
@@ -140,7 +149,7 @@ describe('XY Chart', () => {
imgSnapshotTest( 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 }}}%% %%{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" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -181,7 +190,7 @@ describe('XY Chart', () => {
plotReservedSpacePercent: 60 plotReservedSpacePercent: 60
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -202,7 +211,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showTitle: false showTitle: false
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -223,7 +232,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showLabel: false showLabel: false
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -244,7 +253,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showTick: false showTick: false
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -265,7 +274,7 @@ describe('XY Chart', () => {
yAxis: yAxis:
showAxisLine: false showAxisLine: false
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -294,7 +303,7 @@ describe('XY Chart', () => {
xAxisLineColor: "#87ceeb" xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63" plotColorPalette: "#008000, #faba63"
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -307,7 +316,7 @@ describe('XY Chart', () => {
it('should use the correct distances between data points', () => { it('should use the correct distances between data points', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
x-axis 0 --> 2 x-axis 0 --> 2
line [0, 1, 0, 1] line [0, 1, 0, 1]
bar [1, 0, 1, 0] bar [1, 0, 1, 0]
@@ -325,7 +334,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -344,7 +353,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -357,7 +366,7 @@ describe('XY Chart', () => {
it('should render vertical bar chart without labels by default', () => { it('should render vertical bar chart without labels by default', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -375,7 +384,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -393,7 +402,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Multiple Bar Plots" title "Multiple Bar Plots"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100 y-axis "Values" 0 --> 100
@@ -412,7 +421,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Multiple Bar Plots" title "Multiple Bar Plots"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100 y-axis "Values" 0 --> 100
@@ -430,7 +439,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Single Bar Chart" title "Single Bar Chart"
x-axis Categories [A] x-axis Categories [A]
y-axis "Value" 0 --> 100 y-axis "Value" 0 --> 100
@@ -449,7 +458,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Single Bar Chart" title "Single Bar Chart"
x-axis Categories [A] x-axis Categories [A]
y-axis "Value" 0 --> 100 y-axis "Value" 0 --> 100
@@ -467,7 +476,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Decimal and Negative Values" title "Decimal and Negative Values"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis -10 --> 10 y-axis -10 --> 10
@@ -486,7 +495,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Decimal and Negative Values" title "Decimal and Negative Values"
x-axis Categories [A, B, C] x-axis Categories [A, B, C]
y-axis -10 --> 10 y-axis -10 --> 10
@@ -504,7 +513,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan,b,c] x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000 y-axis "Revenue (in $)" 4000 --> 12000
@@ -561,7 +570,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan,b,c] x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000 y-axis "Revenue (in $)" 4000 --> 12000
@@ -615,7 +624,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Sales Revenue" 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] 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 y-axis "Revenue (in $)" 4000 --> 12000
@@ -672,7 +681,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Sales Revenue" 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] 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 y-axis "Revenue (in $)" 4000 --> 12000
@@ -726,7 +735,7 @@ describe('XY Chart', () => {
xyChart: xyChart:
showDataLabel: true showDataLabel: true
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan] x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000 y-axis "Revenue (in $)" 3000 --> 12000
@@ -783,7 +792,7 @@ describe('XY Chart', () => {
showDataLabel: true showDataLabel: true
chartOrientation: horizontal chartOrientation: horizontal
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan] x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000 y-axis "Revenue (in $)" 3000 --> 12000

22
demos/block.html
View File

@@ -10,7 +10,7 @@
<body> <body>
<h1>Block diagram demos</h1> <h1>Block diagram demos</h1>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
style B fill:#f9F,stroke:#333,stroke-width:4px style B fill:#f9F,stroke:#333,stroke-width:4px
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
A1["square"] A1["square"]
B1("rounded") B1("rounded")
C1(("circle")) C1(("circle"))
@@ -36,7 +36,7 @@ block-beta
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
A1(["stadium"]) A1(["stadium"])
A2[["subroutine"]] A2[["subroutine"]]
B1[("cylinder")] B1[("cylinder")]
@@ -48,7 +48,7 @@ block-beta
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
block:e:4 block:e:4
columns 2 columns 2
f f
@@ -57,7 +57,7 @@ block-beta
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
block:e:4 block:e:4
columns 2 columns 2
f f
@@ -67,7 +67,7 @@ block-beta
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
columns 3 columns 3
a:3 a:3
block:e:3 block:e:3
@@ -80,7 +80,7 @@ block-beta
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
columns 4 columns 4
a b c d a b c d
block:e:4 block:e:4
@@ -97,19 +97,19 @@ flowchart LR
X-- "a label" -->z X-- "a label" -->z
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
columns 5 columns 5
A space B A space B
A --x B A --x B
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
columns 3 columns 3
a["A wide one"] b:2 c:2 d a["A wide one"] b:2 c:2 d
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
columns 3 columns 3
a b c a b c
e:3 e:3
@@ -117,7 +117,7 @@ columns 3
</pre> </pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
block-beta block
A1:3 A1:3
A2:1 A2:1

16
demos/sankey.html
View File

@@ -20,12 +20,14 @@
width: 800 width: 800
nodeAlignment: left nodeAlignment: left
--- ---
sankey-beta sankey
Revenue,Expenses,10 a,b,8
Revenue,Profit,10 b,c,8
Expenses,Manufacturing,5 c,d,8
Expenses,Tax,3 d,e,8
Expenses,Research,2
x,c,4
c,y,4
</pre> </pre>
<h2>Energy flow</h2> <h2>Energy flow</h2>
@@ -40,7 +42,7 @@
linkColor: gradient linkColor: gradient
nodeAlignment: justify nodeAlignment: justify
--- ---
sankey-beta sankey
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597 Bio-conversion,Liquid,0.597

22
demos/xychart.html
View File

@@ -16,7 +16,7 @@
<body> <body>
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart
title "Sales Revenue (in $)" title "Sales Revenue (in $)"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
<hr /> <hr />
<h1>XY Charts horizontal</h1> <h1>XY Charts horizontal</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta horizontal xychart horizontal
title "Basic xychart" title "Basic xychart"
x-axis "this is x axis" [category1, "category 2", category3, category4] x-axis "this is x axis" [category1, "category 2", category3, category4]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
<hr /> <hr />
<h1>XY Charts only lines and bar</h1> <h1>XY Charts only lines and bar</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart
line [23, 46, 77, 34] line [23, 46, 77, 34]
line [45, 32, 33, 12] line [45, 32, 33, 12]
line [87, 54, 99, 85] line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
<hr /> <hr />
<h1>XY Charts with +ve and -ve numbers</h1> <h1>XY Charts with +ve and -ve numbers</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
</pre> </pre>
<h1>XY Charts Bar with multiple category</h1> <h1>XY Charts Bar with multiple category</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart
title "Basic xychart with many categories" title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
<h1>XY Charts line with multiple category</h1> <h1>XY Charts line with multiple category</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart
title "Line chart with many category" title "Line chart with many category"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
<h1>XY Charts category with large text</h1> <h1>XY Charts category with large text</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart
title "Basic xychart with many categories with category overlap" 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] 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 y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart-beta xychart
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre> </pre>
@@ -103,7 +103,7 @@ config:
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart-beta xychart
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre> </pre>
@@ -136,7 +136,7 @@ config:
chartOrientation: horizontal chartOrientation: horizontal
plotReservedSpacePercent: 60 plotReservedSpacePercent: 60
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
xAxisLineColor: "#87ceeb" xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63" plotColorPalette: "#008000, #faba63"
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000

122
docs/syntax/block.md
View File

@@ -9,7 +9,7 @@
## Introduction to Block Diagrams ## Introduction to Block Diagrams
```mermaid-example ```mermaid-example
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
``` ```
```mermaid ```mermaid
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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: To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
```mermaid-example ```mermaid-example
block-beta block
a b c a b c
``` ```
```mermaid ```mermaid
block-beta block
a b c 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: 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 ```mermaid-example
block-beta block
columns 3 columns 3
a b c d a b c d
``` ```
```mermaid ```mermaid
block-beta block
columns 3 columns 3
a b c d 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: To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
a["A label"] b:2 c:2 d a["A label"] b:2 c:2 d
``` ```
```mermaid ```mermaid
block-beta block
columns 3 columns 3
a["A label"] b:2 c:2 d 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: 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 ```mermaid-example
block-beta block
block block
D D
end end
@@ -161,7 +161,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
block block
D D
end 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: 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 ```mermaid-example
block-beta block
columns 3 columns 3
a:3 a:3
block:group1:2 block:group1:2
@@ -195,7 +195,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
columns 3 columns 3
a:3 a:3
block:group1:2 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: 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 ```mermaid-example
block-beta block
block block
columns 1 columns 1
a["A label"] b c d a["A label"] b c d
@@ -223,7 +223,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
block block
columns 1 columns 1
a["A label"] b c d 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: To create a block with round edges, which can be used to represent a softer or more flexible component:
```mermaid-example ```mermaid-example
block-beta block
id1("This is the text in the box") id1("This is the text in the box")
``` ```
```mermaid ```mermaid
block-beta block
id1("This is the text in the box") 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: A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
```mermaid-example ```mermaid-example
block-beta block
id1(["This is the text in the box"]) id1(["This is the text in the box"])
``` ```
```mermaid ```mermaid
block-beta block
id1(["This is the text in the box"]) 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: For representing subroutines or contained processes, a block with double vertical lines is useful:
```mermaid-example ```mermaid-example
block-beta block
id1[["This is the text in the box"]] id1[["This is the text in the box"]]
``` ```
```mermaid ```mermaid
block-beta block
id1[["This is the text in the box"]] 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: The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example ```mermaid-example
block-beta block
id1[("Database")] id1[("Database")]
``` ```
```mermaid ```mermaid
block-beta block
id1[("Database")] id1[("Database")]
``` ```
@@ -303,12 +303,12 @@ block-beta
A circle can be used for centralized or pivotal components: A circle can be used for centralized or pivotal components:
```mermaid-example ```mermaid-example
block-beta block
id1(("This is the text in the circle")) id1(("This is the text in the circle"))
``` ```
```mermaid ```mermaid
block-beta block
id1(("This is the text in the circle")) 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** **Asymmetric**
```mermaid-example ```mermaid-example
block-beta block
id1>"This is the text in the box"] id1>"This is the text in the box"]
``` ```
```mermaid ```mermaid
block-beta block
id1>"This is the text in the box"] id1>"This is the text in the box"]
``` ```
**Rhombus** **Rhombus**
```mermaid-example ```mermaid-example
block-beta block
id1{"This is the text in the box"} id1{"This is the text in the box"}
``` ```
```mermaid ```mermaid
block-beta block
id1{"This is the text in the box"} id1{"This is the text in the box"}
``` ```
**Hexagon** **Hexagon**
```mermaid-example ```mermaid-example
block-beta block
id1{{"This is the text in the box"}} id1{{"This is the text in the box"}}
``` ```
```mermaid ```mermaid
block-beta block
id1{{"This is the text in the box"}} 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: Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example ```mermaid-example
block-beta block
id1[/"This is the text in the box"/] id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\] id2[\"This is the text in the box"\]
A[/"Christmas"\] A[/"Christmas"\]
@@ -365,7 +365,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
id1[/"This is the text in the box"/] id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\] id2[\"This is the text in the box"\]
A[/"Christmas"\] A[/"Christmas"\]
@@ -377,12 +377,12 @@ block-beta
For highlighting critical or high-priority components, a double circle can be effective: For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example ```mermaid-example
block-beta block
id1((("This is the text in the circle"))) id1((("This is the text in the circle")))
``` ```
```mermaid ```mermaid
block-beta block
id1((("This is the text in the circle"))) 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: Block arrows can visually indicate direction or flow within a process:
```mermaid-example ```mermaid-example
block-beta block
blockArrowId<["Label"]>(right) blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left) blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up) blockArrowId3<["Label"]>(up)
@@ -406,7 +406,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
blockArrowId<["Label"]>(right) blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left) blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up) 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: Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
a space b a space b
c d e c d e
``` ```
```mermaid ```mermaid
block-beta block
columns 3 columns 3
a space b a space b
c d e c d e
@@ -437,12 +437,12 @@ block-beta
or or
```mermaid-example ```mermaid-example
block-beta block
ida space:3 idb idc ida space:3 idb idc
``` ```
```mermaid ```mermaid
block-beta block
ida space:3 idb idc 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: A simple link with an arrow can be created to show direction or flow from one block to another:
```mermaid-example ```mermaid-example
block-beta block
A space B A space B
A-->B A-->B
``` ```
```mermaid ```mermaid
block-beta block
A space B A space B
A-->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: To add text to a link, the syntax includes the text within the link definition:
```mermaid-example ```mermaid-example
block-beta block
A space:2 B A space:2 B
A-- "X" -->B A-- "X" -->B
``` ```
```mermaid ```mermaid
block-beta block
A space:2 B A space:2 B
A-- "X" -->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: Example - Edges and Styles:
```mermaid-example ```mermaid-example
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -523,7 +523,7 @@ columns 1
``` ```
```mermaid ```mermaid
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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: 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 ```mermaid-example
block-beta block
id1 space id2 id1 space id2
id1("Start")-->id2("Stop") id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px style id1 fill:#636,stroke:#333,stroke-width:4px
@@ -560,7 +560,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
id1 space id2 id1 space id2
id1("Start")-->id2("Stop") id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px 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 #### Example - Styling a Single Class
```mermaid-example ```mermaid-example
block-beta block
A space B A space B
A-->B A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px; classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
@@ -583,7 +583,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
A space B A space B
A-->B A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px; 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: Illustrating a simple software system architecture with interconnected components:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
Frontend blockArrowId6<[" "]>(right) Backend Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down) space:2 down<[" "]>(down)
@@ -621,7 +621,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
columns 3 columns 3
Frontend blockArrowId6<[" "]>(right) Backend Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down) 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: Representing a business process flow with decision points and multiple stages:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
Start(("Start")) space:2 Start(("Start")) space:2
down<[" "]>(down) space:2 down<[" "]>(down) space:2
@@ -653,7 +653,7 @@ block-beta
``` ```
```mermaid ```mermaid
block-beta block
columns 3 columns 3
Start(("Start")) space:2 Start(("Start")) space:2
down<[" "]>(down) 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: A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
``` ```
block-beta block
A - B 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: 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 ```mermaid-example
block-beta block
A space B A space B
A --> B A --> B
``` ```
```mermaid ```mermaid
block-beta block
A space B A space B
A --> 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: Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
```mermaid-example ```mermaid-example
block-beta block
A A
style A fill#969; style A fill#969;
``` ```
```mermaid ```mermaid
block-beta block
A A
style A fill#969; 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: Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
```mermaid-example ```mermaid-example
block-beta block
A A
style A fill:#969,stroke:#333; style A fill:#969,stroke:#333;
``` ```
```mermaid ```mermaid
block-beta block
A A
style A fill:#969,stroke:#333; style A fill:#969,stroke:#333;

22
docs/syntax/sankey.md
View File

@@ -23,7 +23,7 @@ config:
sankey: sankey:
showValues: false showValues: false
--- ---
sankey-beta sankey
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597 Bio-conversion,Liquid,0.597
@@ -101,7 +101,7 @@ config:
sankey: sankey:
showValues: false showValues: false
--- ---
sankey-beta sankey
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597 Bio-conversion,Liquid,0.597
@@ -175,7 +175,7 @@ Wind,Electricity grid,289.366
## Syntax ## 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**: 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: It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
```mermaid-example ```mermaid-example
sankey-beta sankey
%% source,target,value %% source,target,value
Electricity grid,Over generation / exports,104.453 Electricity grid,Over generation / exports,104.453
@@ -196,7 +196,7 @@ Electricity grid,H2 conversion,27.14
``` ```
```mermaid ```mermaid
sankey-beta sankey
%% source,target,value %% source,target,value
Electricity grid,Over generation / exports,104.453 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: CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
```mermaid-example ```mermaid-example
sankey-beta sankey
Bio-conversion,Losses,26.862 Bio-conversion,Losses,26.862
@@ -219,7 +219,7 @@ Bio-conversion,Gas,81.144
``` ```
```mermaid ```mermaid
sankey-beta sankey
Bio-conversion,Losses,26.862 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: If you need to have a comma, wrap it in double quotes:
```mermaid-example ```mermaid-example
sankey-beta sankey
Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672 Pumped heat,"Heating and cooling, commercial",70.672
``` ```
```mermaid ```mermaid
sankey-beta sankey
Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672 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: If you need to have double quote, put a pair of them inside quoted string:
```mermaid-example ```mermaid-example
sankey-beta sankey
Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672 Pumped heat,"Heating and cooling, ""commercial""",70.672
``` ```
```mermaid ```mermaid
sankey-beta sankey
Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672 Pumped heat,"Heating and cooling, ""commercial""",70.672

16
docs/syntax/xyChart.md
View File

@@ -13,7 +13,7 @@
## Example ## Example
```mermaid-example ```mermaid-example
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -22,7 +22,7 @@ xychart-beta
``` ```
```mermaid ```mermaid
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -40,7 +40,7 @@ xychart-beta
The chart can be drawn horizontal or vertical, default value is vertical. 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 #### Example
``` ```
xychart-beta xychart
title "This is a simple example" title "This is a simple example"
... ...
``` ```
@@ -98,10 +98,10 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example #### 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] line [+1.3, .6, 2.4, -.34]
``` ```
@@ -176,7 +176,7 @@ config:
xyChart: xyChart:
titleColor: "#ff0000" titleColor: "#ff0000"
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
@@ -195,7 +195,7 @@ config:
xyChart: xyChart:
titleColor: "#ff0000" titleColor: "#ff0000"
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000

2
packages/mermaid/src/diagrams/block/blockDetector.ts
View File

@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
const id = 'block'; const id = 'block';
const detector: DiagramDetector = (txt) => { const detector: DiagramDetector = (txt) => {
return /^\s*block-beta/.test(txt); return /^\s*block(-beta)?/.test(txt);
}; };
const loader = async () => { const loader = async () => {

10
packages/mermaid/src/diagrams/block/parser/block.jison
View File

@@ -36,10 +36,10 @@ CRLF \u000D\u000A
%% %%
"block-beta" { return 'BLOCK_DIAGRAM_KEY'; } "block-beta" { yy.getLogger().debug('Found block-beta'); return 'BLOCK_DIAGRAM_KEY'; }
"block"\s+ { yy.getLogger().debug('Found space-block'); return 'block';} "block:" { yy.getLogger().debug('Found id-block'); return 'id-block'; }
"block"\n+ { yy.getLogger().debug('Found nl-block'); return 'block';} "block" { yy.getLogger().debug('Found block'); return 'BLOCK_DIAGRAM_KEY'; }
"block:" { yy.getLogger().debug('Found space-block'); return 'id-block';}
// \s*\%\%.* { yy.getLogger().debug('Found comment',yytext); } // \s*\%\%.* { yy.getLogger().debug('Found comment',yytext); }
[\s]+ { yy.getLogger().debug('.', yytext); /* skip all whitespace */ } [\s]+ { yy.getLogger().debug('.', yytext); /* skip all whitespace */ }
[\n]+ {yy.getLogger().debug('_', yytext); /* skip all whitespace */ } [\n]+ {yy.getLogger().debug('_', yytext); /* skip all whitespace */ }
@@ -240,7 +240,7 @@ columnsStatement
blockStatement blockStatement
: id-block nodeStatement document end { yy.getLogger().debug('Rule: id-block statement : ', $2, $3); const id2 = yy.generateId(); $$ = { ...$2, type:'composite', children: $3 }; } : 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 node

46
packages/mermaid/src/diagrams/block/parser/block.spec.ts
View File

@@ -23,7 +23,7 @@ describe('Block diagram', function () {
expect(blocks[0].label).toBe('id'); expect(blocks[0].label).toBe('id');
}); });
it('a node with a square shape and a label', () => { it('a node with a square shape and a label', () => {
const str = `block-beta const str = `block
id["A label"] id["A label"]
`; `;
@@ -35,7 +35,7 @@ describe('Block diagram', function () {
expect(blocks[0].type).toBe('square'); expect(blocks[0].type).toBe('square');
}); });
it('a diagram with multiple nodes', () => { it('a diagram with multiple nodes', () => {
const str = `block-beta const str = `block
id1 id1
id2 id2
`; `;
@@ -51,7 +51,7 @@ describe('Block diagram', function () {
expect(blocks[1].type).toBe('na'); expect(blocks[1].type).toBe('na');
}); });
it('a diagram with multiple nodes', () => { it('a diagram with multiple nodes', () => {
const str = `block-beta const str = `block
id1 id1
id2 id2
id3 id3
@@ -72,7 +72,7 @@ describe('Block diagram', function () {
}); });
it('a node with a square shape and a label', () => { it('a node with a square shape and a label', () => {
const str = `block-beta const str = `block
id["A label"] id["A label"]
id2`; id2`;
@@ -87,7 +87,7 @@ describe('Block diagram', function () {
expect(blocks[1].type).toBe('na'); expect(blocks[1].type).toBe('na');
}); });
it('a diagram with multiple nodes with edges abc123', () => { it('a diagram with multiple nodes with edges abc123', () => {
const str = `block-beta const str = `block
id1["first"] --> id2["second"] id1["first"] --> id2["second"]
`; `;
@@ -101,7 +101,7 @@ describe('Block diagram', function () {
expect(edges[0].arrowTypeEnd).toBe('arrow_point'); expect(edges[0].arrowTypeEnd).toBe('arrow_point');
}); });
it('a diagram with multiple nodes with edges abc123', () => { it('a diagram with multiple nodes with edges abc123', () => {
const str = `block-beta const str = `block
id1["first"] -- "a label" --> id2["second"] id1["first"] -- "a label" --> id2["second"]
`; `;
@@ -116,7 +116,7 @@ describe('Block diagram', function () {
expect(edges[0].label).toBe('a label'); expect(edges[0].label).toBe('a label');
}); });
it('a diagram with column statements', () => { it('a diagram with column statements', () => {
const str = `block-beta const str = `block
columns 2 columns 2
block1["Block 1"] block1["Block 1"]
`; `;
@@ -127,7 +127,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(1); expect(blocks.length).toBe(1);
}); });
it('a diagram without column statements', () => { it('a diagram without column statements', () => {
const str = `block-beta const str = `block
block1["Block 1"] block1["Block 1"]
`; `;
@@ -137,7 +137,7 @@ describe('Block diagram', function () {
expect(blocks.length).toBe(1); expect(blocks.length).toBe(1);
}); });
it('a diagram with auto column statements', () => { it('a diagram with auto column statements', () => {
const str = `block-beta const str = `block
columns auto columns auto
block1["Block 1"] block1["Block 1"]
`; `;
@@ -149,7 +149,7 @@ describe('Block diagram', function () {
}); });
it('blocks next to each other', () => { it('blocks next to each other', () => {
const str = `block-beta const str = `block
columns 2 columns 2
block1["Block 1"] block1["Block 1"]
block2["Block 2"] block2["Block 2"]
@@ -163,7 +163,7 @@ describe('Block diagram', function () {
}); });
it('blocks on top of each other', () => { it('blocks on top of each other', () => {
const str = `block-beta const str = `block
columns 1 columns 1
block1["Block 1"] block1["Block 1"]
block2["Block 2"] block2["Block 2"]
@@ -177,7 +177,7 @@ describe('Block diagram', function () {
}); });
it('compound blocks 2', () => { it('compound blocks 2', () => {
const str = `block-beta const str = `block
block block
aBlock["ABlock"] aBlock["ABlock"]
bBlock["BBlock"] bBlock["BBlock"]
@@ -205,7 +205,7 @@ describe('Block diagram', function () {
expect(bBlock.type).toBe('square'); expect(bBlock.type).toBe('square');
}); });
it('compound blocks of compound blocks', () => { it('compound blocks of compound blocks', () => {
const str = `block-beta const str = `block
block block
aBlock["ABlock"] aBlock["ABlock"]
block block
@@ -240,7 +240,7 @@ describe('Block diagram', function () {
expect(bBlock.type).toBe('square'); expect(bBlock.type).toBe('square');
}); });
it('compound blocks with title', () => { it('compound blocks with title', () => {
const str = `block-beta const str = `block
block:compoundBlock["Compound block"] block:compoundBlock["Compound block"]
columns 1 columns 1
block2["Block 2"] block2["Block 2"]
@@ -265,7 +265,7 @@ describe('Block diagram', function () {
expect(block2.type).toBe('square'); expect(block2.type).toBe('square');
}); });
it('blocks mixed with compound blocks', () => { it('blocks mixed with compound blocks', () => {
const str = `block-beta const str = `block
columns 1 columns 1
block1["Block 1"] block1["Block 1"]
@@ -292,7 +292,7 @@ describe('Block diagram', function () {
}); });
it('Arrow blocks', () => { it('Arrow blocks', () => {
const str = `block-beta const str = `block
columns 3 columns 3
block1["Block 1"] block1["Block 1"]
blockArrow<["&nbsp;&nbsp;&nbsp;"]>(right) blockArrow<["&nbsp;&nbsp;&nbsp;"]>(right)
@@ -316,7 +316,7 @@ describe('Block diagram', function () {
expect(blockArrow.directions).toContain('right'); expect(blockArrow.directions).toContain('right');
}); });
it('Arrow blocks with multiple points', () => { it('Arrow blocks with multiple points', () => {
const str = `block-beta const str = `block
columns 1 columns 1
A A
blockArrow<["&nbsp;&nbsp;&nbsp;"]>(up, down) blockArrow<["&nbsp;&nbsp;&nbsp;"]>(up, down)
@@ -339,7 +339,7 @@ describe('Block diagram', function () {
expect(blockArrow.directions).not.toContain('right'); expect(blockArrow.directions).not.toContain('right');
}); });
it('blocks with different widths', () => { it('blocks with different widths', () => {
const str = `block-beta const str = `block
columns 3 columns 3
one["One Slot"] one["One Slot"]
two["Two slots"]:2 two["Two slots"]:2
@@ -354,7 +354,7 @@ describe('Block diagram', function () {
expect(two.widthInColumns).toBe(2); expect(two.widthInColumns).toBe(2);
}); });
it('empty blocks', () => { it('empty blocks', () => {
const str = `block-beta const str = `block
columns 3 columns 3
space space
middle["In the middle"] middle["In the middle"]
@@ -373,7 +373,7 @@ describe('Block diagram', function () {
expect(middle.label).toBe('In the middle'); expect(middle.label).toBe('In the middle');
}); });
it('classDef statements applied to a block', () => { it('classDef statements applied to a block', () => {
const str = `block-beta const str = `block
classDef black color:#ffffff, fill:#000000; classDef black color:#ffffff, fill:#000000;
mc["Memcache"] mc["Memcache"]
@@ -391,7 +391,7 @@ describe('Block diagram', function () {
expect(black.styles[0]).toEqual('color:#ffffff'); expect(black.styles[0]).toEqual('color:#ffffff');
}); });
it('style statements applied to a block', () => { it('style statements applied to a block', () => {
const str = `block-beta const str = `block
columns 1 columns 1
B["A wide one in the middle"] B["A wide one in the middle"]
style B fill:#f9F,stroke:#333,stroke-width:4px style B fill:#f9F,stroke:#333,stroke-width:4px
@@ -426,9 +426,9 @@ columns 1
describe('prototype properties', function () { describe('prototype properties', function () {
function validateProperty(prop: string) { function validateProperty(prop: string) {
expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow(); expect(() => block.parse(`block\n${prop}`)).not.toThrow();
expect(() => 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(); ).not.toThrow();
} }

1
packages/mermaid/src/diagrams/sankey/parser/sankey.jison
View File

@@ -27,6 +27,7 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
%% %%
<INITIAL>"sankey-beta" { this.pushState('csv'); return 'SANKEY'; } <INITIAL>"sankey-beta" { this.pushState('csv'); return 'SANKEY'; }
<INITIAL>"sankey" { this.pushState('csv'); return 'SANKEY'; }
<INITIAL,csv><<EOF>> { return 'EOF' } // match end of file <INITIAL,csv><<EOF>> { return 'EOF' } // match end of file
<INITIAL,csv>({CRLF}|{LF}) { return 'NEWLINE' } <INITIAL,csv>({CRLF}|{LF}) { return 'NEWLINE' }
<INITIAL,csv>{COMMA} { return 'COMMA' } <INITIAL,csv>{COMMA} { return 'COMMA' }

21
packages/mermaid/src/diagrams/sankey/parser/sankey.spec.ts
View File

@@ -13,7 +13,7 @@ describe('Sankey diagram', function () {
sankey.parser.yy.clear(); sankey.parser.yy.clear();
}); });
it('parses csv', () => { it('parses csv with sankey-beta syntax', () => {
const csv = path.resolve(__dirname, './energy.csv'); const csv = path.resolve(__dirname, './energy.csv');
const data = fs.readFileSync(csv, 'utf8'); const data = fs.readFileSync(csv, 'utf8');
const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data)); const graphDefinition = prepareTextForParsing(cleanupComments('sankey-beta\n\n ' + data));
@@ -21,7 +21,15 @@ describe('Sankey diagram', function () {
sankey.parser.parse(graphDefinition); 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( sankey.parser.parse(
prepareTextForParsing(`sankey-beta prepareTextForParsing(`sankey-beta
__proto__,A,0.597 __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
`)
);
});
}); });
}); });

2
packages/mermaid/src/diagrams/sankey/sankeyDetector.ts
View File

@@ -3,7 +3,7 @@ import type { DiagramDetector, ExternalDiagramDefinition } from '../../diagram-a
const id = 'sankey'; const id = 'sankey';
const detector: DiagramDetector = (txt) => { const detector: DiagramDetector = (txt) => {
return /^\s*sankey-beta/.test(txt); return /^\s*sankey(-beta)?/.test(txt);
}; };
const loader = async () => { const loader = async () => {

1
packages/mermaid/src/diagrams/xychart/parser/xychart.jison
View File

@@ -30,6 +30,7 @@
<acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; } <acc_descr_multiline>[^\}]* { return "acc_descr_multiline_value"; }
"xychart-beta" {return 'XYCHART';} "xychart-beta" {return 'XYCHART';}
"xychart" {return 'XYCHART';}
(?:"vertical"|"horizontal") {return 'CHART_ORIENTATION'} (?:"vertical"|"horizontal") {return 'CHART_ORIENTATION'}
"x-axis" { this.pushState("axis_data"); return "X_AXIS"; } "x-axis" { this.pushState("axis_data"); return "X_AXIS"; }

113
packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
View File

@@ -33,44 +33,44 @@ describe('Testing xychart jison file', () => {
clearMocks(); clearMocks();
}); });
it('should throw error if xychart-beta text is not there', () => { it('should throw error if xychart text is not there', () => {
const str = 'xychart-beta-1'; const str = 'xychart-1';
expect(parserFnConstructor(str)).toThrow(); expect(parserFnConstructor(str)).toThrow();
}); });
it('should not throw error if only xychart is there', () => { it('should not throw error if only xychart is there', () => {
const str = 'xychart-beta'; const str = 'xychart';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
}); });
it('parse title of the chart within "', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title'); expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title');
}); });
it('parse title of the chart without "', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle'); expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle');
}); });
it('parse chart orientation', () => { it('parse chart orientation', () => {
const str = 'xychart-beta vertical'; const str = 'xychart vertical';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical'); expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical');
}); });
it('parse chart orientation with spaces', () => { it('parse chart orientation with spaces', () => {
let str = 'xychart-beta horizontal '; let str = 'xychart horizontal ';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal'); expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal');
str = 'xychart-beta abc'; str = 'xychart abc';
expect(parserFnConstructor(str)).toThrow(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse x-axis', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName', text: 'xAxisName',
@@ -79,7 +79,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis with axis name without "', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName', text: 'xAxisName',
@@ -88,7 +88,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis with axis name with "', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName has space', text: 'xAxisName has space',
@@ -97,7 +97,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis with axis name with " with spaces', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: ' xAxisName has space ', text: ' xAxisName has space ',
@@ -106,7 +106,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis with axis name and range data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName', text: 'xAxisName',
@@ -115,11 +115,11 @@ describe('Testing xychart jison file', () => {
expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33); expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33);
}); });
it('parse x-axis throw error for invalid range data', () => { 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse x-axis with axis name and range data with only decimal part', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName', text: 'xAxisName',
@@ -129,7 +129,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis without axis name and range data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: '', text: '',
@@ -139,7 +139,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis with axis name and category data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: 'xAxisName', text: 'xAxisName',
@@ -155,7 +155,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis without axis name and category data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
text: '', text: '',
@@ -171,14 +171,14 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis throw error if unbalanced bracket', () => { 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(); 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse x-axis complete variant 1', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' });
expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
@@ -189,8 +189,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse x-axis complete variant 2', () => { it('parse x-axis complete variant 2', () => {
const str = const str = 'xychart \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
@@ -202,7 +201,7 @@ describe('Testing xychart jison file', () => {
it('parse x-axis complete variant 3', () => { it('parse x-axis complete variant 3', () => {
const str = 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setXAxisBand).toHaveBeenCalledWith([ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
@@ -213,17 +212,17 @@ describe('Testing xychart jison file', () => {
}); });
it('parse y-axis with axis name', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
}); });
it('parse y-axis with axis name with spaces', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
}); });
it('parse y-axis with axis name with "', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
text: 'yAxisName has space', text: 'yAxisName has space',
@@ -231,7 +230,7 @@ describe('Testing xychart jison file', () => {
}); });
}); });
it('parse y-axis with axis name with " and spaces', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
text: ' yAxisName has space ', text: ' yAxisName has space ',
@@ -239,39 +238,39 @@ describe('Testing xychart jison file', () => {
}); });
}); });
it('parse y-axis with axis name with range data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
}); });
it('parse y-axis without axis name with range data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
}); });
it('parse y-axis with axis name with range data with only decimal part', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33); expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33);
}); });
it('parse y-axis throw error for invalid number in range data', () => { 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse y-axis throws error if range data is passed', () => { 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse both axis at once', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' }); expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
}); });
it('parse line Data', () => { 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setLineData).toHaveBeenCalledWith( expect(mockDB.setLineData).toHaveBeenCalledWith(
{ text: 'lineTitle', type: 'text' }, { text: 'lineTitle', type: 'text' },
@@ -282,7 +281,7 @@ describe('Testing xychart jison file', () => {
}); });
it('parse line Data with spaces and +,- symbols', () => { it('parse line Data with spaces and +,- symbols', () => {
const str = 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse line Data without title', () => {
const str = const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] ';
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] ';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse line Data throws error unbalanced brackets', () => {
let str = 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(); expect(parserFnConstructor(str)).toThrow();
str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse line Data throws error if data is not provided', () => { 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse line Data throws error if data is empty', () => { it('parse line Data throws error if data is empty', () => {
const str = const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] ';
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] ';
expect(parserFnConstructor(str)).toThrow(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse line Data throws error if , is not in proper', () => { it('parse line Data throws error if , is not in proper', () => {
const str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse line Data throws error if not number', () => { it('parse line Data throws error if not number', () => {
const str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse bar Data', () => { it('parse bar Data', () => {
const str = const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]';
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse bar Data spaces and +,- symbol', () => {
const str = 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse bar Data without plot title', () => {
const str = const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse bar should throw for unbalanced brackets', () => {
let str = 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(); expect(parserFnConstructor(str)).toThrow();
str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse bar should throw error if data is not provided', () => { 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse bar should throw error if data is empty', () => { it('parse bar should throw error if data is empty', () => {
const str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse bar should throw error if comma is not proper', () => { it('parse bar should throw error if comma is not proper', () => {
const str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse bar should throw error if number is not passed', () => { it('parse bar should throw error if number is not passed', () => {
const str = 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(); expect(parserFnConstructor(str)).toThrow();
}); });
it('parse multiple bar and line variant 1', () => { it('parse multiple bar and line variant 1', () => {
const str = 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(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', 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', () => { it('parse multiple bar and line variant 2', () => {
const str = ` const str = `
xychart-beta horizontal xychart horizontal
title Basic xychart title "Basic xychart"
x-axis "this is x axis" [category1, "category 2", category3] x-axis "this is x axis" [category1, "category 2", category3]
y-axis yaxisText 10 --> 150 y-axis yaxisText 10 --> 150
bar barTitle1 [23, 45, 56.6] bar barTitle1 [23, 45, 56.6]

2
packages/mermaid/src/diagrams/xychart/xychartDetector.ts
View File

@@ -7,7 +7,7 @@ import type {
const id = 'xychart'; const id = 'xychart';
const detector: DiagramDetector = (txt) => { const detector: DiagramDetector = (txt) => {
return /^\s*xychart-beta/.test(txt); return /^\s*xychart(-beta)?/.test(txt);
}; };
const loader: DiagramLoader = async () => { const loader: DiagramLoader = async () => {

62
packages/mermaid/src/docs/syntax/block.md
View File

@@ -8,7 +8,7 @@ outline: 'deep' # shows all h3 headings in outline in Vitepress
## Introduction to Block Diagrams ## Introduction to Block Diagrams
```mermaid-example ```mermaid-example
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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: To create a simple block diagram with three blocks labeled 'a', 'b', and 'c', the syntax is as follows:
```mermaid-example ```mermaid-example
block-beta block
a b c 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: 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 ```mermaid-example
block-beta block
columns 3 columns 3
a b c d 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: To create a block diagram where one block spans across two columns, you can specify the desired width for each block:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
a["A label"] b:2 c:2 d 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: 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 ```mermaid-example
block-beta block
block block
D D
end 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: 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 ```mermaid-example
block-beta block
columns 3 columns 3
a:3 a:3
block:group1:2 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: 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 ```mermaid-example
block-beta block
block block
columns 1 columns 1
a["A label"] b c d 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: To create a block with round edges, which can be used to represent a softer or more flexible component:
```mermaid-example ```mermaid-example
block-beta block
id1("This is the text in the box") 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: A stadium-shaped block, resembling an elongated circle, can be used for components that are process-oriented:
```mermaid-example ```mermaid-example
block-beta block
id1(["This is the text in the box"]) 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: For representing subroutines or contained processes, a block with double vertical lines is useful:
```mermaid-example ```mermaid-example
block-beta block
id1[["This is the text in the box"]] 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: The cylindrical shape is ideal for representing databases or storage components:
```mermaid-example ```mermaid-example
block-beta block
id1[("Database")] id1[("Database")]
``` ```
@@ -217,7 +217,7 @@ block-beta
A circle can be used for centralized or pivotal components: A circle can be used for centralized or pivotal components:
```mermaid-example ```mermaid-example
block-beta block
id1(("This is the text in the circle")) 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** **Asymmetric**
```mermaid-example ```mermaid-example
block-beta block
id1>"This is the text in the box"] id1>"This is the text in the box"]
``` ```
**Rhombus** **Rhombus**
```mermaid-example ```mermaid-example
block-beta block
id1{"This is the text in the box"} id1{"This is the text in the box"}
``` ```
**Hexagon** **Hexagon**
```mermaid-example ```mermaid-example
block-beta block
id1{{"This is the text in the box"}} 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: Parallelogram and trapezoid shapes are perfect for inputs/outputs and transitional processes:
```mermaid-example ```mermaid-example
block-beta block
id1[/"This is the text in the box"/] id1[/"This is the text in the box"/]
id2[\"This is the text in the box"\] id2[\"This is the text in the box"\]
A[/"Christmas"\] A[/"Christmas"\]
@@ -263,7 +263,7 @@ block-beta
For highlighting critical or high-priority components, a double circle can be effective: For highlighting critical or high-priority components, a double circle can be effective:
```mermaid-example ```mermaid-example
block-beta block
id1((("This is the text in the circle"))) 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: Block arrows can visually indicate direction or flow within a process:
```mermaid-example ```mermaid-example
block-beta block
blockArrowId<["Label"]>(right) blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left) blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up) 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: Space blocks can be used to create intentional empty spaces in the diagram, which is useful for layout and readability:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
a space b a space b
c d e c d e
@@ -300,7 +300,7 @@ block-beta
or or
```mermaid-example ```mermaid-example
block-beta block
ida space:3 idb idc 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: A simple link with an arrow can be created to show direction or flow from one block to another:
```mermaid-example ```mermaid-example
block-beta block
A space B A space B
A-->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: To add text to a link, the syntax includes the text within the link definition:
```mermaid-example ```mermaid-example
block-beta block
A space:2 B A space:2 B
A-- "X" -->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: Example - Edges and Styles:
```mermaid-example ```mermaid-example
block-beta block
columns 1 columns 1
db(("DB")) db(("DB"))
blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down) blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(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: 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 ```mermaid-example
block-beta block
id1 space id2 id1 space id2
id1("Start")-->id2("Stop") id1("Start")-->id2("Stop")
style id1 fill:#636,stroke:#333,stroke-width:4px 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 #### Example - Styling a Single Class
```mermaid-example ```mermaid-example
block-beta block
A space B A space B
A-->B A-->B
classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px; 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: Illustrating a simple software system architecture with interconnected components:
```mermaid ```mermaid
block-beta block
columns 3 columns 3
Frontend blockArrowId6<[" "]>(right) Backend Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down) 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: Representing a business process flow with decision points and multiple stages:
```mermaid-example ```mermaid-example
block-beta block
columns 3 columns 3
Start(("Start")) space:2 Start(("Start")) space:2
down<[" "]>(down) 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: A common mistake is incorrect linking syntax, which can lead to unexpected results or broken diagrams:
``` ```
block-beta block
A - B 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: 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 ```mermaid-example
block-beta block
A space B A space B
A --> 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: Applying styles in the wrong context or with incorrect syntax can lead to blocks not being styled as intended:
```mermaid-example ```mermaid-example
block-beta block
A A
style A fill#969; 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: Correct the syntax by ensuring proper separation of style properties with commas and using the correct CSS property format:
```mermaid-example ```mermaid-example
block-beta block
A A
style A fill:#969,stroke:#333; style A fill:#969,stroke:#333;

12
packages/mermaid/src/docs/syntax/sankey.md
View File

@@ -18,7 +18,7 @@ config:
sankey: sankey:
showValues: false showValues: false
--- ---
sankey-beta sankey
Agricultural 'waste',Bio-conversion,124.729 Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597 Bio-conversion,Liquid,0.597
@@ -92,7 +92,7 @@ Wind,Electricity grid,289.366
## Syntax ## 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**: 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: It is implied that 3 columns inside CSV should represent `source`, `target` and `value` accordingly:
```mermaid-example ```mermaid-example
sankey-beta sankey
%% source,target,value %% source,target,value
Electricity grid,Over generation / exports,104.453 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: CSV does not support empty lines without comma delimiters by default. But you can add them if needed:
```mermaid-example ```mermaid-example
sankey-beta sankey
Bio-conversion,Losses,26.862 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: If you need to have a comma, wrap it in double quotes:
```mermaid-example ```mermaid-example
sankey-beta sankey
Pumped heat,"Heating and cooling, homes",193.026 Pumped heat,"Heating and cooling, homes",193.026
Pumped heat,"Heating and cooling, commercial",70.672 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: If you need to have double quote, put a pair of them inside quoted string:
```mermaid-example ```mermaid-example
sankey-beta sankey
Pumped heat,"Heating and cooling, ""homes""",193.026 Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672 Pumped heat,"Heating and cooling, ""commercial""",70.672

12
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -7,7 +7,7 @@
## Example ## Example
```mermaid-example ```mermaid-example
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 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. 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 #### Example
``` ```
xychart-beta xychart
title "This is a simple example" title "This is a simple example"
... ...
``` ```
@@ -86,10 +86,10 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example #### 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] line [+1.3, .6, 2.4, -.34]
``` ```
@@ -164,7 +164,7 @@ config:
xyChart: xyChart:
titleColor: "#ff0000" titleColor: "#ff0000"
--- ---
xychart-beta xychart
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000

5
packages/mermaid/src/mermaidAPI.spec.ts
View File

@@ -755,6 +755,11 @@ graph TD;A--x|text including URL space|B;`)
expectedType: 'xychart', expectedType: 'xychart',
content: 'x-axis "Attempts" 10000 --> 10000\ny-axis "Passing tests" 1 --> 1\nbar [1]', 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: 'requirementDiagram', expectedType: 'requirement' },
{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },