marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-22 16:59:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'minmaps' of github.com:mermaid-js/mermaid into minmaps

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-08-28 14:25:15 +02:00
parent f350ff9852 6ab0eef6f3
commit 4cdc6e4a0d
18 changed files with 155 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cypress/integration/rendering/erDiagram.spec.js
View File

@@ -112,7 +112,7 @@ describe('Entity Relationship Diagram', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height', '465');
// expect(svg).to.have.attr('height', '465');
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -134,7 +134,7 @@ describe('Entity Relationship Diagram', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(140 * 0.95, 140 * 1.05);
expect(svg).to.have.attr('height', '465');
// expect(svg).to.have.attr('height', '465');
expect(svg).to.not.have.attr('style');
});
});
@@ -186,7 +186,7 @@ describe('Entity Relationship Diagram', () => {
renderGraph(
`
erDiagram
PRIVATE_FINANCIAL_INSTITUTION {
PRIVATE_FINANCIAL_INSTITUTION {
string name
int turnover
}
@@ -206,9 +206,9 @@ describe('Entity Relationship Diagram', () => {
string name PK
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
BOOK {
float price
string author FK
string author FK
string title PK
}
`,
@@ -225,8 +225,8 @@ describe('Entity Relationship Diagram', () => {
string name "comment"
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
string author
BOOK {
string author
string title "author comment"
float price "price comment"
}
@@ -244,11 +244,11 @@ describe('Entity Relationship Diagram', () => {
string name PK "comment"
}
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK {
BOOK {
string description
float price "price comment"
string title PK "title comment"
string author FK
string author FK
}
`,
{ logLevel: 1 }

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

@@ -42,7 +42,7 @@ describe('Flowchart v2', () => {
P3 --> P6
P1.5 --> P5
`,
{ flowchart: { diagramPadding: 0 } }
{}
);
});
@@ -60,7 +60,7 @@ describe('Flowchart v2', () => {
C <-...-> E4
C ======> E5
`,
{ flowchart: { diagramPadding: 0 } }
{}
);
});
it('5: should render escaped without html labels', () => {
@@ -92,10 +92,10 @@ describe('Flowchart v2', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
// expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(446 * 0.95, 446 * 1.05);
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -114,10 +114,10 @@ describe('Flowchart v2', () => {
{ flowchart: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
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(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
expect(svg).to.not.have.attr('style');
});
@@ -652,4 +652,15 @@ flowchart RL
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('2824: Clipping of edges', () => {
imgSnapshotTest(
`
flowchart TD
A --> B
A --> C
B --> C
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
});

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

@@ -744,10 +744,10 @@ describe('Graph', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
// expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(446 * 0.95, 446 * 1.05);
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -766,10 +766,10 @@ describe('Graph', () => {
{ flowchart: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
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(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(300 * 0.95, 300 * 1.05);
expect(svg).to.not.have.attr('style');
});

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

@@ -218,10 +218,10 @@ describe('Gantt diagram', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
// expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(484 * 0.95, 484 * 1.05);
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(484 * 0.95, 484 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -265,10 +265,10 @@ describe('Gantt diagram', () => {
{ gantt: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
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(484 * 0.95, 484 * 1.05);
// expect(height).to.be.within(484 * 0.95, 484 * 1.05);
expect(width).to.be.within(984 * 0.95, 984 * 1.05);
expect(svg).to.not.have.attr('style');
});

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

@@ -42,8 +42,8 @@ section Checkout from website
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(565);
// const height = parseFloat(svg.attr('height'));
// expect(height).to.eq(565);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

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

@@ -48,9 +48,9 @@ describe('Pie Chart', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(450);
// expect(svg).to.have.attr('height');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.eq(450);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -68,9 +68,9 @@ describe('Pie Chart', () => {
{ pie: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(450);
// expect(height).to.eq(450);
expect(width).to.eq(984);
expect(svg).to.not.have.attr('style');
});

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

@@ -734,9 +734,9 @@ context('Sequence diagram', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(920, 971);
// expect(svg).to.have.attr('height');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(920, 971);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -773,9 +773,9 @@ context('Sequence diagram', () => {
{ sequence: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.be.within(920, 971);
// expect(height).to.be.within(920, 971);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * 0.95, 820 * 1.05);
expect(svg).to.not.have.attr('style');

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

@@ -480,14 +480,14 @@ stateDiagram-v2
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(177, 178);
// expect(svg).to.have.attr('height');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(177, 178);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(maxWidthValue).to.be.within(135 * 0.95, 135 * 1.05);
expect(maxWidthValue).to.be.within(65, 85);
});
});
it('v2 should render a state diagram when useMaxWidth is false', () => {
@@ -501,11 +501,11 @@ stateDiagram-v2
{ state: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.be.within(177, 178);
// expect(height).to.be.within(177, 178);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(135 * 0.95, 135 * 1.05);
expect(width).to.be.within(65, 85);
expect(svg).to.not.have.attr('style');
});
});

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

@@ -357,16 +357,16 @@ describe('State diagram', () => {
);
cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(176, 178);
// expect(svg).to.have.attr('height');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(176, 178);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
// use within because the absolute value can be slightly different depending on the environment ±5%
// Todo investigate difference
// expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05);
expect(maxWidthValue).to.be.within(130, 140);
expect(maxWidthValue).to.be.within(65, 85);
});
});
it('should render a state diagram when useMaxWidth is false', () => {
@@ -379,13 +379,13 @@ describe('State diagram', () => {
{ state: { useMaxWidth: false } }
);
cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height'));
// const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.be.within(176, 178);
// expect(height).to.be.within(176, 178);
// use within because the absolute value can be slightly different depending on the environment ±5%
// Todo investigate difference
// expect(width).to.be.within(112 * .95, 112 * 1.05);
expect(width).to.be.within(130, 140);
expect(width).to.be.within(65, 85);
expect(svg).to.not.have.attr('style');
});

49
cypress/platform/knsv.html
View File

@@ -23,12 +23,11 @@
.mermaid2,.mermaid3 {
display: none;
}
.mermaid {
border: 1px solid purple;
}
.mermaid svg {
border: 1px solid purple;
/* font-size: 18px !important; */
border: 1px solid red;
fontFamily: 'courier'
}
</style>
</head>
@@ -56,7 +55,7 @@ flowchart LR
O0 -- has type -->O2["Bug"]
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
</div>
<div class="mermaid" style="width: 50%;">
<div class="mermaid2" style="width: 50%;">
flowchart TD
subgraph test
direction TB
@@ -154,7 +153,6 @@ mindmap
GrandChild2
Child5((Child5))
:::disabled
GrandChild7
sc1
sc2
@@ -162,6 +160,17 @@ mindmap
GrandChild7
</div>
<div class="mermaid" style="width: 50%;">
flowchart TD
id
</div>
<div class="mermaid2" style="width: 50%;">
flowchart LR
a["<strong>Haiya</strong>"]===>b
</div>
<div class="mermaid2" style="width: 50%;">
flowchart TD
</div>
<div class="mermaid2" style="width: 50%;">
pie
accTitle: My Pie Chart Accessibility Title
@@ -170,9 +179,20 @@ mindmap
A --> B
A --> C
B --> C
</div>
<div class="mermaid2" style="width: 50%;">
flowchart TD
A([stadium shape test])
A -->|Get money| B([Go shopping])
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
C -->|One| D([Laptop])
C -->|Two| E([iPhone])
C -->|Three| F([Car<br/>wroom wroom])
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
gitGraph TB
commit
commit
@@ -417,16 +437,17 @@ flowchart TD
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
theme: 'base',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
maxTextSize: 900000,
startOnLoad: true,
securityLevel: 'loose',
logLevel: 0,
fontFamily: 'courier',
flowchart: {
curve: 'curveLinear',
// curve: 'curveLinear',
useMaxWidth: true,
htmlLabels: true,
htmlLabels: false,
fontFamily: 'courier',
},
logLevel: 1,
fontSize: 18,
curve: 'cardinal',
// securityLevel: 'sandbox',