marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-02 13:49:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge from upstream

Browse Source
This commit is contained in:
Ashish Jain
2024-09-03 11:55:46 +02:00
parent 0764dca3ce f7e4ee61c7
commit 11bb1a4a17
70 changed files with 846 additions and 4471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/helpers/util.ts
View File

@@ -73,7 +73,7 @@ export const imgSnapshotTest = (
export const urlSnapshotTest = (
url: string,
options: CypressMermaidConfig,
options: CypressMermaidConfig = {},
_api = false,
validation?: any
): void => {

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

@@ -1,9 +1,9 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
describe('architecture diagram', () => {
describe.skip('architecture diagram', () => {
it('should render a simple architecture diagram with groups', () => {
imgSnapshotTest(
`architecture
`architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
@@ -21,7 +21,7 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with groups within groups', () => {
imgSnapshotTest(
`architecture
`architecture-beta
group api[API]
group public[Public API] in api
group private[Private API] in api
@@ -41,14 +41,14 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with the fallback icon', () => {
imgSnapshotTest(
`architecture
`architecture-beta
service unknown(iconnamedoesntexist)[Unknown Icon]
`
);
});
it('should render an architecture diagram with split directioning', () => {
imgSnapshotTest(
`architecture
`architecture-beta
service db(database)[Database]
service s3(disk)[Storage]
service serv1(server)[Server 1]
@@ -64,7 +64,7 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with directional arrows', () => {
imgSnapshotTest(
`architecture
`architecture-beta
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
@@ -85,7 +85,7 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with group edges', () => {
imgSnapshotTest(
`architecture
`architecture-beta
group left_group(cloud)[Left]
group right_group(cloud)[Right]
group top_group(cloud)[Top]
@@ -107,7 +107,7 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with edge labels', () => {
imgSnapshotTest(
`architecture
`architecture-beta
service servC(server)[Server 1]
service servL(server)[Server 2]
service servR(server)[Server 3]
@@ -128,7 +128,7 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with simple junction edges', () => {
imgSnapshotTest(
`architecture
`architecture-beta
service left_disk(disk)[Disk]
service top_disk(disk)[Disk]
service bottom_disk(disk)[Disk]
@@ -148,7 +148,7 @@ describe('architecture diagram', () => {
});
it('should render an architecture diagram with complex junction edges', () => {
imgSnapshotTest(
`architecture
`architecture-beta
group left
group right
service left_disk(disk)[Disk] in left
@@ -172,3 +172,9 @@ describe('architecture diagram', () => {
);
});
});
describe('architecture - external', () => {
it('should allow adding external icons', () => {
urlSnapshotTest('http://localhost:9000/architecture-external.html');
});
});

35
cypress/integration/rendering/newShapes.spec.ts
View File

@@ -18,9 +18,9 @@ const newShapesSet2 = [
] as const;
const newShapesSet3 = [
'halfRoundedRectangle',
'curvedTrapezoid',
'bowTieRect',
'waveEdgedRectangle',
'dividedRectangle',
'crossedCircle',
] as const;
@@ -29,38 +29,16 @@ const newShapesSet4 = [
'waveRectangle',
'trapezoidalPentagon',
'linedCylinder',
'waveEdgedRectangle',
'multiWaveEdgedRectangle',
'halfRoundedRectangle',
] as const;
const newShapesSet5 = [
'linedWaveEdgedRect',
'taggedWaveEdgedRectangle',
'text',
'card',
'shadedProcess',
] as const;
const newShapesSet6 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const;
const newShapesSet7 = ['forkJoin', 'choice', 'note', 'stadium'] as const;
const newShapesSet8 = [
'question',
'hexagon',
'curlyBraces',
'multiRect',
'waveEdgedRectangle',
] as const;
const newShapesSet9 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const;
const newShapesSet10 = [
'subroutine',
'cylinder',
'circle',
'doublecircle',
'rect_left_inv_arrow',
'curvedTrapezoid',
'waveRectangle',
] as const;
// Aggregate all shape sets into a single array
@@ -70,11 +48,6 @@ const newShapesSets = [
newShapesSet3,
newShapesSet4,
newShapesSet5,
newShapesSet6,
newShapesSet7,
newShapesSet8,
newShapesSet9,
newShapesSet10,
] as const;
looks.forEach((look) => {

101
cypress/integration/rendering/oldShapes.spec.ts Normal file
View File

@@ -0,0 +1,101 @@
import { imgSnapshotTest } from '../../helpers/util';
const looks = ['classic', 'handDrawn'] as const;
const directions = ['TB', 'BT', 'LR', 'RL'] as const;
const shapesSet1 = ['text', 'card', 'shadedProcess', 'diamond', 'hexagon'] as const;
const shapesSet2 = ['roundedRect', 'squareRect', 'stateStart', 'stateEnd', 'labelRect'] as const;
const shapesSet3 = ['forkJoin', 'choice', 'note', 'stadium', 'odd'] as const;
const shapesSet4 = ['subroutine', 'cylinder', 'circle', 'doublecircle', 'odd'] as const;
const shapesSet5 = ['anchor', 'lean_right', 'lean_left', 'trapezoid', 'inv_trapezoid'] as const;
// Aggregate all shape sets into a single array
const shapesSets = [shapesSet1, shapesSet2, shapesSet3, shapesSet4, shapesSet5] as const;
looks.forEach((look) => {
directions.forEach((direction) => {
shapesSets.forEach((shapesSet) => {
describe(`Test ${shapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
it(`without label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape} }@\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
it(`with label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
it(`connect all shapes with each other`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }@\n`;
});
for (let i = 0; i < shapesSet.length; i++) {
for (let j = i + 1; j < shapesSet.length; j++) {
flowchartCode += ` n${i}${i} --> n${j}${j}\n`;
}
}
imgSnapshotTest(flowchartCode, { look });
});
it(`with very long label`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }@\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
it(`with markdown htmlLabels:true`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
it(`with markdown htmlLabels:false`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }@\n`;
});
imgSnapshotTest(flowchartCode, {
look,
htmlLabels: false,
flowchart: { htmlLabels: false },
});
});
it(`with styles`, () => {
let flowchartCode = `flowchart ${direction}\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
});
imgSnapshotTest(flowchartCode, { look });
});
it(`with classDef`, () => {
let flowchartCode = `flowchart ${direction}\n`;
flowchartCode += ` classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
shapesSet.forEach((newShape, index) => {
flowchartCode += ` n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }@\n`;
flowchartCode += ` n${index}${index}:::customClazz\n`;
});
imgSnapshotTest(flowchartCode, { look });
});
});
});
});
});

52
cypress/platform/architecture-external.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Architecture Mermaid Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h2>External Icons Demo</h2>
<pre class="mermaid">
architecture-beta
service s3(logos:aws-s3)[Cloud Store]
service ec2(logos:aws-ec2)[Server]
service api(logos:aws-api-gateway)[Api Gateway]
service fa(fa:image)[Font Awesome Icon]
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({
startOnLoad: false,
logLevel: 0,
});
mermaid.registerIconPacks([
{
name: 'logos',
loader: () =>
fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
},
{
name: 'fa',
loader: () =>
fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
res.json()
),
},
]);
await mermaid.run();
if (window.Cypress) {
window.rendered = true;
}
</script>
</body>
</html>