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 branch 'develop' into saurabh/refactor-fontawesome-icon-usage

Browse Source
This commit is contained in:
Sidharth Vinod
2025-04-18 12:39:47 -07:00
committed by GitHub
parent 24f23efdad 59b400652b
commit 53e89d97a0
169 changed files with 4174 additions and 1748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/integration/other/interaction.spec.js
View File

@@ -20,7 +20,7 @@ describe('Interaction', () => {
});
it('Graph: should handle a click on a node with a bound url', () => {
// When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
// When there is a URL, `cy.contains()` selects the `a` tag instead of the `span` tag. The .node is a child of `a`, so we have to use `find()` instead of `parent`.
cy.contains('URLTest1').find('.node').click();
cy.location().should(({ href }) => {
expect(href).to.eq('http://localhost:9000/empty.html');
@@ -146,7 +146,7 @@ describe('Interaction', () => {
});
});
describe('Interaction - security level other, missspelling', () => {
describe('Interaction - security level other, misspelling', () => {
beforeEach(() => {
cy.visit('http://localhost:9000/click_security_other.html');
});

2
cypress/integration/rendering/architecture.spec.ts
View File

@@ -19,7 +19,7 @@ describe.skip('architecture diagram', () => {
`
);
});
it('should render a simple architecture diagram with titleAndAccessabilities', () => {
it('should render a simple architecture diagram with titleAndAccessibilities', () => {
imgSnapshotTest(
`architecture-beta
title Simple Architecture Diagram

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

@@ -14,7 +14,7 @@ describe('Block diagram', () => {
);
});
it('BL2: should handle colums statement in sub-blocks', () => {
it('BL2: should handle columns statement in sub-blocks', () => {
imgSnapshotTest(
`block-beta
id1["Hello"]
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
);
});
it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
imgSnapshotTest(
`block-beta
block
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
);
});
it('BL4: should align block widths and handle colums 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(
`block-beta
columns 1
@@ -66,7 +66,7 @@ describe('Block diagram', () => {
);
});
it('BL5: should align block widths and handle colums 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(
`block-beta
columns 1
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
);
});
it('BL17: width alignment - blocks shold be equal in width', () => {
it('BL17: width alignment - blocks should be equal in width', () => {
imgSnapshotTest(
`block-beta
A("This is the text")

6
cypress/integration/rendering/classDiagram.spec.js
View File

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
-String Many
#int Members
+And()
-Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
classDiagram
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
-String Many
#int Members
+And()
-Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
namespace testingNamespace {
class \`This\nTitle\nHas\nMany\nNewlines\` {
+String Also
-Stirng Many
-String Many
#int Members
+And()
-Many()

10
cypress/integration/rendering/flowchart-elk.spec.js
View File

@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
`flowchart-elk TB
internet
nat
routeur
router
lb1
lb2
compute1
compute2
subgraph project
routeur
router
nat
subgraph subnet1
compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
lb2
end
end
internet --> routeur
routeur --> subnet1 & subnet2
internet --> router
router --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('63-elk: title on subgraphs should be themable', () => {
it('63-elk: title on subgraphs should be themeable', () => {
imgSnapshotTest(
`
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%

22
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
`flowchart TB
internet
nat
routeur
router
lb1
lb2
compute1
compute2
subgraph project
routeur
router
nat
subgraph subnet1
compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
lb2
end
end
internet --> routeur
routeur --> subnet1 & subnet2
internet --> router
router --> subnet1 & subnet2
subnet1 & subnet2 --> nat --> internet
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('63: title on subgraphs should be themable', () => {
it('63: title on subgraphs should be themeable', () => {
imgSnapshotTest(
`
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
{ flowchart: { titleTopMargin: 10 } }
);
});
it('3192: It should be possieble to render flowcharts with invisible edges', () => {
it('3192: It should be possible to render flowcharts with invisible edges', () => {
imgSnapshotTest(
`---
title: Simple flowchart with invisible edges
@@ -1076,11 +1076,11 @@ end
);
});
});
describe('New @ sytax for node metadata edge cases', () => {
describe('New @ syntax for node metadata edge cases', () => {
it('should be possible to use @ syntax to add labels on multi nodes', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
`,
{}
);
@@ -1088,7 +1088,7 @@ end
it('should be possible to use @ syntax to add labels with trail spaces and &', () => {
imgSnapshotTest(
`flowchart TB
n2["label for n2"] & n4@{ label: "labe for n4"} & n5@{ label: "labe for n5"}
n2["label for n2"] & n4@{ label: "label for n4"} & n5@{ label: "label for n5"}
`,
{}
);
@@ -1097,8 +1097,8 @@ end
imgSnapshotTest(
`flowchart TB
n2["label for n2"]
n4@{ label: "labe for n4"}
n5@{ label: "labe for n5"}
n4@{ label: "label for n4"}
n5@{ label: "label for n5"}
`,
{}
);

8
cypress/integration/rendering/gantt.spec.js
View File

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
{}
);
});
it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
imgSnapshotTest(
`
gantt
@@ -573,7 +573,7 @@ describe('Gantt diagram', () => {
`
);
});
it('should render a gantt diagram exculding friday and saturday', () => {
it('should render a gantt diagram excluding friday and saturday', () => {
imgSnapshotTest(
`gantt
title A Gantt Diagram
@@ -584,7 +584,7 @@ describe('Gantt diagram', () => {
A task :a1, 2024-02-28, 10d`
);
});
it('should render a gantt diagram exculding saturday and sunday', () => {
it('should render a gantt diagram excluding saturday and sunday', () => {
imgSnapshotTest(
`gantt
title A Gantt Diagram
@@ -671,7 +671,7 @@ describe('Gantt diagram', () => {
title Gantt Digram
dateFormat YYYY-MM-DD
section Section
;A task with a semiclon :a1, 2014-01-01, 30d
;A task with a semicolon :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d

14
cypress/integration/rendering/gitGraph.spec.js
View File

@@ -11,7 +11,7 @@ describe('Git Graph diagram', () => {
{}
);
});
it('2: should render a simple gitgraph with commit on main branch with Id', () => {
it('2: should render a simple gitgraph with commit on main branch with id', () => {
imgSnapshotTest(
`gitGraph
commit id: "One"
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
`
gitGraph
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
@@ -343,7 +343,7 @@ gitGraph
{}
);
});
it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
it('16: should render a simple gitgraph with commit on main branch with id | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id: "One"
@@ -585,7 +585,7 @@ gitGraph
`
gitGraph TB:
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
@@ -1024,7 +1024,7 @@ gitGraph TB:
{}
);
});
it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
it('51: should render a simple gitgraph with commit on main branch with id | Vertical Branch - Bottom-to-top', () => {
imgSnapshotTest(
`gitGraph BT:
commit id: "One"
@@ -1266,7 +1266,7 @@ gitGraph TB:
`
gitGraph BT:
checkout main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
checkout main
branch branch1
@@ -1491,7 +1491,7 @@ gitGraph TB:
`
gitGraph
switch main
%% Make sure to manually set the ID of all commits, for consistent visual tests
%% Make sure to manually set the id of all commits, for consistent visual tests
commit id: "1-abcdefg"
switch main
branch branch1

34
cypress/integration/rendering/journey.spec.js
View File

@@ -224,4 +224,38 @@ section Checkout from website
});
});
});
it('should correctly render the user journey diagram title with the specified styling', () => {
renderGraph(
`---
config:
journey:
titleColor: "#2900A5"
titleFontFamily: "Times New Roman"
titleFontSize: "5rem"
---
journey
title User Journey Example
section Onboarding
Sign Up: 5: John, Shahir
Complete Profile: 4: John
section Engagement
Browse Features: 3: John
Use Core Functionality: 4: John
section Retention
Revisit Application: 5: John
Invite Friends: 3: John
size: 2rem
`
);
cy.get('text').contains('User Journey Example').as('title');
cy.get('@title').then(($title) => {
expect($title).to.have.attr('fill', '#2900A5');
expect($title).to.have.attr('font-family', 'Times New Roman');
expect($title).to.have.attr('font-size', '5rem');
});
});
});

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

@@ -62,7 +62,7 @@ describe('Kanban diagram', () => {
{}
);
});
it('6: should handle assigments', () => {
it('6: should handle assignments', () => {
imgSnapshotTest(
`kanban
id1[Todo]
@@ -118,7 +118,7 @@ kanban
docs[Create Documentation]
docs[Create Blog about the new diagram]
id7[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id8[Design grammar]@{ assigned: 'knsv' }
id9[Ready for deploy]
id10[Ready for test]

2
cypress/integration/rendering/mindmap.spec.ts
View File

@@ -146,7 +146,7 @@ root
shouldHaveRoot
);
});
it('text shouhld wrap with icon', () => {
it('text should wrap with icon', () => {
imgSnapshotTest(
`mindmap
root

2
cypress/integration/rendering/pie.spec.ts
View File

@@ -64,7 +64,7 @@ describe('pie chart', () => {
});
});
it('should render a pie diagram when textPosition is setted', () => {
it('should render a pie diagram when textPosition is set', () => {
imgSnapshotTest(
`pie
"Dogs": 50

6
cypress/integration/rendering/quadrantChart.spec.js
View File

@@ -45,7 +45,7 @@ describe('Quadrant Chart', () => {
{}
);
});
it('should able to render y-axix on right side', () => {
it('should able to render y-axis on right side', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
@@ -61,7 +61,7 @@ describe('Quadrant Chart', () => {
{}
);
});
it('should able to render x-axix on bottom', () => {
it('should able to render x-axis on bottom', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
@@ -77,7 +77,7 @@ describe('Quadrant Chart', () => {
{}
);
});
it('should able to render x-axix on bottom and y-axis on right', () => {
it('should able to render x-axis on bottom and y-axis on right', () => {
imgSnapshotTest(
`
%%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%

14
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -138,8 +138,8 @@ describe('State diagram', () => {
imgSnapshotTest(
`
stateDiagram-v2
State1: This a a single line description
State2: This a a multi line description
State1: This a single line description
State2: This a multi line description
State2: here comes the multi part
[*] --> State1
State1 --> State2
@@ -345,7 +345,7 @@ stateDiagram
}
);
});
it('v2 width of compond state should grow with title if title is wider', () => {
it('v2 width of compound state should grow with title if title is wider', () => {
imgSnapshotTest(
`
stateDiagram-v2
@@ -402,8 +402,8 @@ stateDiagram-v2
`
stateDiagram-v2
MyState
note left of MyState : I am a leftie
note right of MyState : I am a rightie
note left of MyState : I am a lefty
note right of MyState : I am a righty
`,
{
logLevel: 0,
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
{ logLevel: 0, fontFamily: 'courier' }
);
});
it(' should let styles take preceedence over classes', () => {
it(' should let styles take precedence over classes', () => {
imgSnapshotTest(
`
stateDiagram-v2
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
{ logLevel: 0, fontFamily: 'courier' }
);
});
it(' should allow styles to take effect in stubgraphs', () => {
it(' should allow styles to take effect in subgraphs', () => {
imgSnapshotTest(
`
stateDiagram

4
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -129,8 +129,8 @@ describe('State diagram', () => {
imgSnapshotTest(
`
stateDiagram
State1: This a a single line description
State2: This a a multi line description
State1: This a single line description
State2: This a multi line description
State2: here comes the multi part
[*] --> State1
State1 --> State2

18
cypress/integration/rendering/timeline.spec.ts
View File

@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
`,
{}
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
section Broze Age
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
`,
{}
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram

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

@@ -179,6 +179,7 @@ describe('XY Chart', () => {
axisLineWidth: 5
chartOrientation: horizontal
plotReservedSpacePercent: 60
showDataLabel: true
---
xychart-beta
title "Sales Revenue"
@@ -315,4 +316,516 @@ describe('XY Chart', () => {
);
cy.get('svg');
});
it('should render vertical bar chart with labels', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`,
{}
);
});
it('should render horizontal bar chart with labels', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`,
{}
);
});
it('should render vertical bar chart without labels by default', () => {
imgSnapshotTest(
`
xychart-beta
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`,
{}
);
});
it('should render horizontal bar chart without labels by default', () => {
imgSnapshotTest(
`
---
config:
xyChart:
chartOrientation: horizontal
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`,
{}
);
});
it('should render multiple bar plots vertically with labels correctly', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Multiple Bar Plots"
x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100
bar [10, 50, 90]
`,
{}
);
});
it('should render multiple bar plots horizontally with labels correctly', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Multiple Bar Plots"
x-axis Categories [A, B, C]
y-axis "Values" 0 --> 100
bar [10, 50, 90]
`,
{}
);
});
it('should render a single bar with label for a vertical xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Single Bar Chart"
x-axis Categories [A]
y-axis "Value" 0 --> 100
bar [75]
`,
{}
);
});
it('should render a single bar with label for a horizontal xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Single Bar Chart"
x-axis Categories [A]
y-axis "Value" 0 --> 100
bar [75]
`,
{}
);
});
it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
bar [ -2.5, 0.75, 5.1 ]
`,
{}
);
});
it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Decimal and Negative Values"
x-axis Categories [A, B, C]
y-axis -10 --> 10
bar [ -2.5, 0.75, 5.1 ]
`,
{}
);
});
it('should render data labels within each bar in the vertical xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
`,
{}
);
cy.get('g.bar-plot-0').within(() => {
cy.get('rect').each(($rect, index) => {
// Extract bar properties
const barProps = {
x: parseFloat($rect.attr('x')),
y: parseFloat($rect.attr('y')),
width: parseFloat($rect.attr('width')),
height: parseFloat($rect.attr('height')),
};
// Get the text element corresponding to this bar by index.
cy.get('text')
.eq(index)
.then(($text) => {
const bbox = $text[0].getBBox();
const textProps = {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
};
// Verify that the text label is positioned within the boundaries of the bar.
expect(textProps.x).to.be.greaterThan(barProps.x);
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
// Check horizontal alignment (within tolerance)
expect(textProps.x + textProps.width / 2).to.be.closeTo(
barProps.x + barProps.width / 2,
5
);
expect(textProps.y).to.be.greaterThan(barProps.y);
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
});
});
});
});
it('should render data labels within each bar in the horizontal xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan,b,c]
y-axis "Revenue (in $)" 4000 --> 12000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
`,
{}
);
cy.get('g.bar-plot-0').within(() => {
cy.get('rect').each(($rect, index) => {
// Extract bar properties
const barProps = {
x: parseFloat($rect.attr('x')),
y: parseFloat($rect.attr('y')),
width: parseFloat($rect.attr('width')),
height: parseFloat($rect.attr('height')),
};
// Get the text element corresponding to this bar by index.
cy.get('text')
.eq(index)
.then(($text) => {
const bbox = $text[0].getBBox();
const textProps = {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
};
// Verify that the text label is positioned within the boundaries of the bar.
expect(textProps.x).to.be.greaterThan(barProps.x);
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
expect(textProps.y).to.be.greaterThan(barProps.y);
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
expect(textProps.y + textProps.height / 2).to.be.closeTo(
barProps.y + barProps.height / 2,
5
);
});
});
});
});
it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
y-axis "Revenue (in $)" 4000 --> 12000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
`,
{}
);
cy.get('g.bar-plot-0').within(() => {
cy.get('rect').each(($rect, index) => {
// Extract bar properties
const barProps = {
x: parseFloat($rect.attr('x')),
y: parseFloat($rect.attr('y')),
width: parseFloat($rect.attr('width')),
height: parseFloat($rect.attr('height')),
};
// Get the text element corresponding to this bar by index.
cy.get('text')
.eq(index)
.then(($text) => {
const bbox = $text[0].getBBox();
const textProps = {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
};
// Verify that the text label is positioned within the boundaries of the bar.
expect(textProps.x).to.be.greaterThan(barProps.x);
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
// Check horizontal alignment (within tolerance)
expect(textProps.x + textProps.width / 2).to.be.closeTo(
barProps.x + barProps.width / 2,
5
);
expect(textProps.y).to.be.greaterThan(barProps.y);
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
});
});
});
});
it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
y-axis "Revenue (in $)" 4000 --> 12000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
`,
{}
);
cy.get('g.bar-plot-0').within(() => {
cy.get('rect').each(($rect, index) => {
// Extract bar properties
const barProps = {
x: parseFloat($rect.attr('x')),
y: parseFloat($rect.attr('y')),
width: parseFloat($rect.attr('width')),
height: parseFloat($rect.attr('height')),
};
// Get the text element corresponding to this bar by index.
cy.get('text')
.eq(index)
.then(($text) => {
const bbox = $text[0].getBBox();
const textProps = {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
};
// Verify that the text label is positioned within the boundaries of the bar.
expect(textProps.x).to.be.greaterThan(barProps.x);
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
expect(textProps.y).to.be.greaterThan(barProps.y);
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
expect(textProps.y + textProps.height / 2).to.be.closeTo(
barProps.y + barProps.height / 2,
5
);
});
});
});
});
it('should render data labels correctly for a bar in the vertical xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000
bar [4000]
`,
{}
);
cy.get('g.bar-plot-0').within(() => {
cy.get('rect').each(($rect, index) => {
// Extract bar properties
const barProps = {
x: parseFloat($rect.attr('x')),
y: parseFloat($rect.attr('y')),
width: parseFloat($rect.attr('width')),
height: parseFloat($rect.attr('height')),
};
// Get the text element corresponding to this bar by index.
cy.get('text')
.eq(index)
.then(($text) => {
const bbox = $text[0].getBBox();
const textProps = {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
};
// Verify that the text label is positioned within the boundaries of the bar.
expect(textProps.x).to.be.greaterThan(barProps.x);
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
// Check horizontal alignment (within tolerance)
expect(textProps.x + textProps.width / 2).to.be.closeTo(
barProps.x + barProps.width / 2,
5
);
expect(textProps.y).to.be.greaterThan(barProps.y);
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
});
});
});
});
it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
imgSnapshotTest(
`
---
config:
xyChart:
showDataLabel: true
chartOrientation: horizontal
---
xychart-beta
title "Sales Revenue"
x-axis Months [jan]
y-axis "Revenue (in $)" 3000 --> 12000
bar [4000]
`,
{}
);
cy.get('g.bar-plot-0').within(() => {
cy.get('rect').each(($rect, index) => {
// Extract bar properties
const barProps = {
x: parseFloat($rect.attr('x')),
y: parseFloat($rect.attr('y')),
width: parseFloat($rect.attr('width')),
height: parseFloat($rect.attr('height')),
};
// Get the text element corresponding to this bar by index.
cy.get('text')
.eq(index)
.then(($text) => {
const bbox = $text[0].getBBox();
const textProps = {
x: bbox.x,
y: bbox.y,
width: bbox.width,
height: bbox.height,
};
// Verify that the text label is positioned within the boundaries of the bar.
expect(textProps.x).to.be.greaterThan(barProps.x);
expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
expect(textProps.y).to.be.greaterThan(barProps.y);
expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
expect(textProps.y + textProps.height / 2).to.be.closeTo(
barProps.y + barProps.height / 2,
5
);
});
});
});
});
});

20
cypress/platform/ashish2.html
View File

@@ -60,7 +60,7 @@
<pre id="diagram" class="mermaid2">
timeline
title My day
section section with no tasks
section Section with no tasks
section Go to work at the dog office
1930 : first step : second step is a long step
: third step
@@ -70,18 +70,18 @@
1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
1970 : Green Revolution comes to india
section Another section with no tasks
I am a big big big tasks
I am not so big tasks
I am a very, very big task
I am not so big task
</pre>
<pre id="diagram" class="mermaid">
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Buttet 1 : sub-point 1a : sub-point 1b
Bullet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Buttet 3 : sub-point <br> 3a : sub-point 3b
Bullet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
@@ -93,7 +93,7 @@
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
section Broze Age
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
@@ -106,7 +106,7 @@
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google : Pixar
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008s : Instagram
@@ -122,7 +122,7 @@
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google : Pixar
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008s : Instagram
@@ -139,7 +139,7 @@
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
@@ -152,7 +152,7 @@
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008s : Instagram

4
cypress/platform/class.html
View File

@@ -37,7 +37,7 @@
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
+withdrawal(amount) int
}
cssClass "BankAccount" customCss
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
+withdrawal(amount) int
}
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~

2
cypress/platform/click_security_other.html
View File

@@ -77,7 +77,7 @@
document.getElementsByTagName('body')[0].appendChild(div);
}
mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', logLevel: 1 });
</script>
</body>
</html>

8
cypress/platform/current.html
View File

@@ -31,7 +31,7 @@
flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
</div>
<div class="mermaid2" style="width: 50%; height: 200px">
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
though
</div>
@@ -61,9 +61,9 @@
#quot;elit#quot;."}}
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
flowchart TB internet nat router lb1 lb2 compute1 compute2 subgraph project router nat
subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> router
router --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
</div>
<div class="mermaid2" style="width: 50%; height: 50%">
flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]

0
cypress/platform/flowchart-sate.html → cypress/platform/flowchart-state.html
View File

2
cypress/platform/git-graph.html
View File

@@ -38,7 +38,7 @@
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
+withdrawal(amount) int
}
cssClass "BankAccount" customCss
</pre>

2
cypress/platform/knsv2.html
View File

@@ -386,7 +386,7 @@ kanban
[Create Documentation]
docs[Create Blog about the new diagram]
id7[In progress]
id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]

2
cypress/platform/xss7.html
View File

@@ -105,7 +105,7 @@
let diagram = 'graph LR\n';
diagram += " B(<a href='<";
diagram += 'script></';
diagram += "script>Javascript:xssAttack`1`'>Click)";
diagram += "script>JavaScript:xssAttack`1`'>Click)";
// diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
console.log(diagram);
// document.querySelector('#diagram').innerHTML = diagram;

10
cypress/platform/yari.html
View File

@@ -50,7 +50,7 @@
setPoints(List~int~ points)
getPoints() List~int~
}
Square : -List~string~ messages
Square : +setMessages(List~string~ messages)
Square : +getMessages() List~string~
@@ -88,7 +88,7 @@
---
classDiagram
class Duck {
}
</pre>
</div>
@@ -127,8 +127,8 @@
-attribute:type
- attribute : type
test
+ GetAttribute() type
+ GetAttribute() type
+ GetAttribute() type
}
</pre>
@@ -449,7 +449,7 @@
---
config:
theme: forest
look: handDrawns
look: handDrawn
layout: elk
---
classDiagram

8
cypress/platform/yari2.html
View File

@@ -41,7 +41,7 @@
CAR:::someclass
PERSON:::anotherclass,someclass
classDef someclass fill:#f96
classDef anotherclass color:blue
</pre>
@@ -90,7 +90,7 @@
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
test test PK "comment"
text text PK "comment"
string make
string model
string[] parts
@@ -108,7 +108,7 @@
string carRegistrationNumber PK, FK
string driverLicence PK, FK
}
MANUFACTURER only one to zero or more CAR : makes
MANUFACTURER only one to zero or more CAR : makes
</pre>
</div>
<div class="test">
@@ -129,7 +129,7 @@
string email
}
p ||--o| a : has
</pre>
</div>
<div class="test">

104
cypress/timings.json
View File

@@ -2,211 +2,211 @@
"durations": [
{
"spec": "cypress/integration/other/configuration.spec.js",
"duration": 5475
"duration": 5450
},
{
"spec": "cypress/integration/other/external-diagrams.spec.js",
"duration": 2037
"duration": 2004
},
{
"spec": "cypress/integration/other/ghsa.spec.js",
"duration": 3207
"duration": 3183
},
{
"spec": "cypress/integration/other/iife.spec.js",
"duration": 1915
"duration": 1913
},
{
"spec": "cypress/integration/other/interaction.spec.js",
"duration": 10952
"duration": 10944
},
{
"spec": "cypress/integration/other/rerender.spec.js",
"duration": 1872
"duration": 1938
},
{
"spec": "cypress/integration/other/xss.spec.js",
"duration": 26686
"duration": 26753
},
{
"spec": "cypress/integration/rendering/appli.spec.js",
"duration": 2629
"duration": 2571
},
{
"spec": "cypress/integration/rendering/architecture.spec.ts",
"duration": 104
"duration": 110
},
{
"spec": "cypress/integration/rendering/block.spec.js",
"duration": 14765
"duration": 14697
},
{
"spec": "cypress/integration/rendering/c4.spec.js",
"duration": 4913
"duration": 4705
},
{
"spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
"duration": 36667
"duration": 35841
},
{
"spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
"duration": 33813
"duration": 34279
},
{
"spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
"duration": 20441
"duration": 20641
},
{
"spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
"duration": 32504
"duration": 33020
},
{
"spec": "cypress/integration/rendering/classDiagram.spec.js",
"duration": 13772
"duration": 13546
},
{
"spec": "cypress/integration/rendering/conf-and-directives.spec.js",
"duration": 7978
"duration": 8072
},
{
"spec": "cypress/integration/rendering/current.spec.js",
"duration": 2101
"duration": 2083
},
{
"spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
"duration": 76556
"duration": 78269
},
{
"spec": "cypress/integration/rendering/erDiagram.spec.js",
"duration": 12756
"duration": 12578
},
{
"spec": "cypress/integration/rendering/errorDiagram.spec.js",
"duration": 2766
"duration": 2784
},
{
"spec": "cypress/integration/rendering/flowchart-elk.spec.js",
"duration": 35641
"duration": 36205
},
{
"spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
"duration": 26915
"duration": 26627
},
{
"spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
"duration": 21171
"duration": 21332
},
{
"spec": "cypress/integration/rendering/flowchart-v2.spec.js",
"duration": 37844
"duration": 37328
},
{
"spec": "cypress/integration/rendering/flowchart.spec.js",
"duration": 26254
"duration": 25914
},
{
"spec": "cypress/integration/rendering/gantt.spec.js",
"duration": 15149
"duration": 15383
},
{
"spec": "cypress/integration/rendering/gitGraph.spec.js",
"duration": 45049
"duration": 45226
},
{
"spec": "cypress/integration/rendering/iconShape.spec.ts",
"duration": 250225
"duration": 251094
},
{
"spec": "cypress/integration/rendering/imageShape.spec.ts",
"duration": 51531
"duration": 50916
},
{
"spec": "cypress/integration/rendering/info.spec.ts",
"duration": 2455
"duration": 2489
},
{
"spec": "cypress/integration/rendering/journey.spec.js",
"duration": 3181
"duration": 5988
},
{
"spec": "cypress/integration/rendering/kanban.spec.ts",
"duration": 6298
"duration": 6225
},
{
"spec": "cypress/integration/rendering/katex.spec.js",
"duration": 3065
"duration": 3009
},
{
"spec": "cypress/integration/rendering/marker_unique_id.spec.js",
"duration": 2521
"duration": 2426
},
{
"spec": "cypress/integration/rendering/mindmap.spec.ts",
"duration": 9341
"duration": 9306
},
{
"spec": "cypress/integration/rendering/newShapes.spec.ts",
"duration": 132809
"duration": 134419
},
{
"spec": "cypress/integration/rendering/oldShapes.spec.ts",
"duration": 101299
"duration": 102434
},
{
"spec": "cypress/integration/rendering/packet.spec.ts",
"duration": 3481
"duration": 3373
},
{
"spec": "cypress/integration/rendering/pie.spec.ts",
"duration": 4878
"duration": 4898
},
{
"spec": "cypress/integration/rendering/quadrantChart.spec.js",
"duration": 7416
"duration": 7578
},
{
"spec": "cypress/integration/rendering/radar.spec.js",
"duration": 4554
"duration": 4526
},
{
"spec": "cypress/integration/rendering/requirement.spec.js",
"duration": 2068
"duration": 2172
},
{
"spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
"duration": 47583
"duration": 47175
},
{
"spec": "cypress/integration/rendering/sankey.spec.ts",
"duration": 5792
"duration": 5717
},
{
"spec": "cypress/integration/rendering/sequencediagram.spec.js",
"duration": 33035
"duration": 32556
},
{
"spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
"duration": 22716
"duration": 22572
},
{
"spec": "cypress/integration/rendering/stateDiagram.spec.js",
"duration": 13868
"duration": 14064
},
{
"spec": "cypress/integration/rendering/theme.spec.js",
"duration": 26376
"duration": 26565
},
{
"spec": "cypress/integration/rendering/timeline.spec.ts",
"duration": 5872
"duration": 6233
},
{
"spec": "cypress/integration/rendering/xyChart.spec.js",
"duration": 9469
"duration": 17750
},
{
"spec": "cypress/integration/rendering/zenuml.spec.js",
"duration": 2742
"duration": 2696
}
]
}