marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-22 17:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'mermaid-js:develop' into feature/3250/add_vertline_to_gantt_plot

Browse Source
This commit is contained in:
Megan Triplett
2025-04-22 15:16:18 -04:00
committed by GitHub
parent e49911e748 1c1d7d0300
commit 566b3db15f
162 changed files with 2200 additions and 611 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}}}%%

28
cypress/integration/rendering/flowchart-icon.spec.js Normal file
View File

@@ -0,0 +1,28 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
const themes = ['default', 'forest', 'dark', 'base', 'neutral'];
describe('when rendering flowchart with icons', () => {
for (const theme of themes) {
it(`should render icons from fontawesome library on theme ${theme}`, () => {
imgSnapshotTest(
`flowchart TD
A("fab:fa-twitter Twitter") --> B("fab:fa-facebook Facebook")
B --> C("fa:fa-coffee Coffee")
C --> D("fa:fa-car Car")
D --> E("fab:fa-github GitHub")
`,
{ theme }
);
});
it(`should render registered icons on theme ${theme}`, () => {
imgSnapshotTest(
`flowchart TD
A("fa:fa-bell Bell")
`,
{ theme }
);
});
}
});

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05);
});
});
it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(417 * 0.95, 417 * 1.05);
expect(width).to.be.within(440 * 0.95, 440 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
@@ -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
@@ -590,7 +590,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
@@ -601,7 +601,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
@@ -688,7 +688,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

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

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]

2
cypress/platform/e2e.html
View File

@@ -7,7 +7,7 @@
rel="stylesheet"
/>
<style>
svg {
svg:not(svg svg) {
border: 2px solid darkred;
}
.exClass2 > rect,

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]

23
cypress/platform/viewer.js
View File

@@ -14,12 +14,28 @@ function markRendered() {
}
}
function loadFontAwesomeCSS() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';
document.head.appendChild(link);
return new Promise((resolve, reject) => {
link.onload = resolve;
link.onerror = () => reject(new Error('Failed to load FontAwesome'));
});
}
/**
* ##contentLoaded Callback function that is called when page is loaded. This functions fetches
* configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
* page.
*/
const contentLoaded = async function () {
await loadFontAwesomeCSS();
await Promise.all(Array.from(document.fonts, (font) => font.load()));
let pos = document.location.href.indexOf('?graph=');
if (pos > 0) {
pos = pos + 7;
@@ -50,8 +66,13 @@ const contentLoaded = async function () {
mermaid.registerLayoutLoaders(layouts);
mermaid.initialize(graphObj.mermaid);
/**
* CC-BY-4.0
* Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
* https://fontawesome.com/icons/bell?f=classic&s=regular
*/
const staticBellIconPack = {
prefix: 'fa6-regular',
prefix: 'fa',
icons: {
bell: {
body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',

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">