marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 17:29:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3809 from aloisklink/use-dagre-d3-es

Browse Source 
Replace `dagre`/`dagre-d3` with `dagre-d3-es`
This commit is contained in:
Knut Sveidqvist
2022-11-21 13:31:35 +01:00
committed by GitHub
parent 050574f60f fd76e0e270
commit 29a02d1ab5
19 changed files with 394 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
cypress/integration/rendering/mermaid.spec.js
View File

@@ -1,75 +0,0 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Mindmap', () => {
it('square shape', () => {
imgSnapshotTest(
`
mindmap
root[
The root
]
`,
{}
);
cy.get('svg');
});
it('rounded rect shape', () => {
imgSnapshotTest(
`
mindmap
root((
The root
))
`,
{}
);
cy.get('svg');
});
it('circle shape', () => {
imgSnapshotTest(
`
mindmap
root(
The root
)
`,
{}
);
cy.get('svg');
});
it('default shape', () => {
imgSnapshotTest(
`
mindmap
The root
`,
{}
);
cy.get('svg');
});
it('adding children', () => {
imgSnapshotTest(
`
mindmap
The root
child1
child2
`,
{}
);
cy.get('svg');
});
it('adding grand children', () => {
imgSnapshotTest(
`
mindmap
The root
child1
child2
child3
`,
{}
);
cy.get('svg');
});
});

115
cypress/integration/rendering/mindmap.spec.js
View File

@@ -1,115 +0,0 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Mindmaps', () => {
it('Only a root', () => {
imgSnapshotTest(
`mindmap
root
`,
{}
);
});
it('a root with a shape', () => {
imgSnapshotTest(
`mindmap
root[root]
`,
{}
);
});
it('a root with wrapping text and a shape', () => {
imgSnapshotTest(
`mindmap
root[A root with a long text that wraps to keep the node size in check]
`,
{}
);
});
it('a root with an icon', () => {
imgSnapshotTest(
`mindmap
root[root]
::icon(mdi mdi-fire)
`,
{}
);
});
it('Blang and cloud shape', () => {
imgSnapshotTest(
`mindmap
root))bang((
::icon(mdi mdi-fire)
a))Another bang((
::icon(mdi mdi-fire)
a)A cloud(
::icon(mdi mdi-fire)
`,
{}
);
});
it('Blang and cloud shape with icons', () => {
imgSnapshotTest(
`mindmap
root))bang((
a))Another bang((
a)A cloud(
`,
{}
);
});
it('braches', () => {
imgSnapshotTest(
`mindmap
root
child1
grandchild 1
grandchild 2
child2
grandchild 3
grandchild 4
child3
grandchild 5
grandchild 6
`,
{}
);
});
it('braches with shapes and labels', () => {
imgSnapshotTest(
`mindmap
root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
`,
{}
);
});
it('text shouhld wrap with icon', () => {
imgSnapshotTest(
`mindmap
root
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
`,
{}
);
});
/* The end */
});

233
cypress/integration/rendering/mindmap.spec.ts Normal file
View File

@@ -0,0 +1,233 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
/**
* Check whether the SVG Element has a Mindmap root
*
* Sometimes, Cypress takes a snapshot before the mermaid mindmap has finished
* generating the SVG.
*
* @param $p - The element to check.
*/
function shouldHaveRoot($p: JQuery<SVGSVGElement>) {
// get HTML Element from jquery element
const svgElement = $p[0];
expect(svgElement.nodeName).equal('svg');
const sectionRoots = svgElement.getElementsByClassName('mindmap-node section-root');
// mindmap should have at least one root section
expect(sectionRoots).to.have.lengthOf.at.least(1);
}
describe('Mindmaps', () => {
it('Only a root', () => {
imgSnapshotTest(
`mindmap
root
`,
{},
undefined,
shouldHaveRoot
);
});
it('a root with a shape', () => {
imgSnapshotTest(
`mindmap
root[root]
`,
{},
undefined,
shouldHaveRoot
);
});
it('a root with wrapping text and a shape', () => {
imgSnapshotTest(
`mindmap
root[A root with a long text that wraps to keep the node size in check]
`,
{},
undefined,
shouldHaveRoot
);
});
it('a root with an icon', () => {
imgSnapshotTest(
`mindmap
root[root]
::icon(mdi mdi-fire)
`,
{},
undefined,
shouldHaveRoot
);
});
it('Blang and cloud shape', () => {
imgSnapshotTest(
`mindmap
root))bang((
::icon(mdi mdi-fire)
a))Another bang((
::icon(mdi mdi-fire)
a)A cloud(
::icon(mdi mdi-fire)
`,
{},
undefined,
shouldHaveRoot
);
});
it('Blang and cloud shape with icons', () => {
imgSnapshotTest(
`mindmap
root))bang((
a))Another bang((
a)A cloud(
`,
{},
undefined,
shouldHaveRoot
);
});
it('braches', () => {
imgSnapshotTest(
`mindmap
root
child1
grandchild 1
grandchild 2
child2
grandchild 3
grandchild 4
child3
grandchild 5
grandchild 6
`,
{},
undefined,
shouldHaveRoot
);
});
it('braches with shapes and labels', () => {
imgSnapshotTest(
`mindmap
root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
`,
{},
undefined,
shouldHaveRoot
);
});
it('text shouhld wrap with icon', () => {
imgSnapshotTest(
`mindmap
root
Child3(A node with an icon and with a long text that wraps to keep the node size in check)
`,
{},
undefined,
shouldHaveRoot
);
});
it('square shape', () => {
imgSnapshotTest(
`
mindmap
root[
The root
]
`,
{},
undefined,
shouldHaveRoot
);
cy.get('svg');
});
it('rounded rect shape', () => {
imgSnapshotTest(
`
mindmap
root((
The root
))
`,
{},
undefined,
shouldHaveRoot
);
cy.get('svg');
});
it('circle shape', () => {
imgSnapshotTest(
`
mindmap
root(
The root
)
`,
{},
undefined,
shouldHaveRoot
);
cy.get('svg');
});
it('default shape', () => {
imgSnapshotTest(
`
mindmap
The root
`,
{},
undefined,
shouldHaveRoot
);
cy.get('svg');
});
it('adding children', () => {
imgSnapshotTest(
`
mindmap
The root
child1
child2
`,
{},
undefined,
shouldHaveRoot
);
cy.get('svg');
});
it('adding grand children', () => {
imgSnapshotTest(
`
mindmap
The root
child1
child2
child3
`,
{},
undefined,
shouldHaveRoot
);
cy.get('svg');
});
/* The end */
});

8
cypress/tsconfig.json Normal file
View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"target": "es2020",
"lib": ["es2020", "dom"],
"types": ["cypress", "node"]
},
"include": ["**/*.ts"]
}

3
demos/index.html
View File

@@ -48,6 +48,9 @@
<li> <li>
<h2><a href="./journey.html">Journey</a></h2> <h2><a href="./journey.html">Journey</a></h2>
</li> </li>
<li>
<h2><a href="./mindmap.html">Mindmap</a></h2>
</li>
<li> <li>
<h2><a href="./pie.html">Pie</a></h2> <h2><a href="./pie.html">Pie</a></h2>
</li> </li>

108
demos/mindmap.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mindmap Mermaid Quick 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>
<h1>Mindmap diagram demo</h1>
<pre class="mermaid">
mindmap
root
child1((Circle))
grandchild 1
grandchild 2
child2(Round rectangle)
grandchild 3
grandchild 4
child3[Square]
grandchild 5
::icon(mdi mdi-fire)
gc6((grand<br/>child 6))
::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8))
</pre>
<h2>Mindmap with root wrapping text and a shape</h2>
<pre class="mermaid">
mindmap
root[A root with a long text that wraps to keep the node size in check]
</pre>
<script type="module">
import mermaid from './mermaid.esm.mjs';
import mermaidMindmap from './mermaid-mindmap.esm.mjs';
const ALLOWED_TAGS = [
'a',
'b',
'blockquote',
'br',
'dd',
'div',
'dl',
'dt',
'em',
'foreignObject',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'h7',
'h8',
'hr',
'i',
'li',
'ul',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'table',
'tbody',
'td',
'tfoot',
'th',
'thead',
'tr',
];
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
await mermaid.registerExternalDiagrams([mermaidMindmap]);
mermaid.initialize({
theme: 'base',
startOnLoad: true,
logLevel: 0,
flowchart: {
useMaxWidth: false,
htmlLabels: true,
},
gantt: {
useMaxWidth: false,
},
useMaxWidth: false,
});
function callback() {
alert('It worked');
}
mermaid.parseError = function (err, hash) {
console.error('In parse error:');
console.error(err);
};
</script>
</body>
</html>

3
package.json
View File

@@ -107,9 +107,6 @@
"vitepress-plugin-search": "^1.0.4-alpha.15", "vitepress-plugin-search": "^1.0.4-alpha.15",
"vitest": "^0.25.1" "vitest": "^0.25.1"
}, },
"resolutions": {
"d3": "^7.6.1"
},
"sideEffects": [ "sideEffects": [
"**/*.css", "**/*.css",
"**/*.scss" "**/*.scss"

6
packages/mermaid/package.json
View File

@@ -54,8 +54,7 @@
"dependencies": { "dependencies": {
"@braintree/sanitize-url": "^6.0.0", "@braintree/sanitize-url": "^6.0.0",
"d3": "^7.0.0", "d3": "^7.0.0",
"dagre": "^0.8.5", "dagre-d3-es": "7.0.2",
"dagre-d3": "^0.6.4",
"dompurify": "2.4.1", "dompurify": "2.4.1",
"fast-clone": "^1.5.13", "fast-clone": "^1.5.13",
"graphlib": "^2.1.8", "graphlib": "^2.1.8",
@@ -97,9 +96,6 @@
"typescript": "^4.8.4", "typescript": "^4.8.4",
"unist-util-flatmap": "^1.0.0" "unist-util-flatmap": "^1.0.0"
}, },
"resolutions": {
"d3": "^7.0.0"
},
"files": [ "files": [
"dist", "dist",
"README.md" "README.md"

4
packages/mermaid/src/dagre-wrapper/index.js
View File

@@ -1,4 +1,4 @@
import dagre from 'dagre'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import insertMarkers from './markers'; import insertMarkers from './markers';
import { updateNodeBounds } from './shapes/util'; import { updateNodeBounds } from './shapes/util';
@@ -95,7 +95,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.info('### Layout ###'); log.info('### Layout ###');
log.info('#############################################'); log.info('#############################################');
log.info(graph); log.info(graph);
dagre.layout(graph); dagreLayout(graph);
log.info('Graph after layout:', graphlib.json.write(graph)); log.info('Graph after layout:', graphlib.json.write(graph));
// Move the nodes to the correct place // Move the nodes to the correct place
let diff = 0; let diff = 0;

1
packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
View File

@@ -1,5 +1,4 @@
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import dagre from 'dagre';
import { import {
validate, validate,
adjustClustersAndEdges, adjustClustersAndEdges,

4
packages/mermaid/src/diagrams/class/classRenderer.js
View File

@@ -1,5 +1,5 @@
import { select } from 'd3'; import { select } from 'd3';
import dagre from 'dagre'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import { log } from '../../logger'; import { log } from '../../logger';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
@@ -238,7 +238,7 @@ export const draw = function (text, id, _version, diagObj) {
} }
}); });
dagre.layout(g); dagreLayout(g);
g.nodes().forEach(function (v) { g.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') { if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))); log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));

4
packages/mermaid/src/diagrams/er/erRenderer.js
View File

@@ -1,6 +1,6 @@
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import { line, curveBasis, select } from 'd3'; import { line, curveBasis, select } from 'd3';
import dagre from 'dagre'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { log } from '../../logger'; import { log } from '../../logger';
import utils from '../../utils'; import utils from '../../utils';
@@ -638,7 +638,7 @@ export const draw = function (text, id, _version, diagObj) {
// Add all the relationships to the graph // Add all the relationships to the graph
const relationships = addRelationships(diagObj.db.getRelationships(), g); const relationships = addRelationships(diagObj.db.getRelationships(), g);
dagre.layout(g); // Node and edge positions will be updated dagreLayout(g); // Node and edge positions will be updated
// Adjust the positions of the entities so that they adhere to the layout // Adjust the positions of the entities so that they adhere to the layout
adjustEntities(svg, g); adjustEntities(svg, g);

25
packages/mermaid/src/diagrams/flowchart/flowChartShapes.js
View File

@@ -1,4 +1,5 @@
import dagreD3 from 'dagre-d3'; import { intersectPolygon } from 'dagre-d3-es/src/dagre-js/intersect/intersect-polygon.js';
import { intersectRect } from 'dagre-d3-es/src/dagre-js/intersect/intersect-rect.js';
/** /**
* @param parent * @param parent
@@ -17,7 +18,7 @@ function question(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, s, s, points); const shapeSvg = insertPolygonShape(parent, s, s, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -42,7 +43,7 @@ function hexagon(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -64,7 +65,7 @@ function rect_left_inv_arrow(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -85,7 +86,7 @@ function lean_right(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -106,7 +107,7 @@ function lean_left(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -127,7 +128,7 @@ function trapezoid(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -148,7 +149,7 @@ function inv_trapezoid(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -170,7 +171,7 @@ function rect_right_inv_arrow(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -194,7 +195,7 @@ function stadium(parent, bbox, node) {
.attr('height', h); .attr('height', h);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.rect(node, point); return intersectRect(node, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -221,7 +222,7 @@ function subroutine(parent, bbox, node) {
]; ];
const shapeSvg = insertPolygonShape(parent, w, h, points); const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function (point) { node.intersect = function (point) {
return dagreD3.intersect.polygon(node, points, point); return intersectPolygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;
} }
@@ -270,7 +271,7 @@ function cylinder(parent, bbox, node) {
.attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')'); .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
node.intersect = function (point) { node.intersect = function (point) {
const pos = dagreD3.intersect.rect(node, point); const pos = intersectRect(node, point);
const x = pos.x - node.x; const x = pos.x - node.x;
if ( if (

2
packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -6,7 +6,7 @@ import { getConfig } from '../../config';
import utils from '../../utils'; import utils from '../../utils';
import { render } from '../../dagre-wrapper/index.js'; import { render } from '../../dagre-wrapper/index.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js'; import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
import { log } from '../../logger'; import { log } from '../../logger';
import common, { evaluate } from '../common/common'; import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { interpolateToCurve, getStylesFromArray } from '../../utils';

8
packages/mermaid/src/diagrams/flowchart/flowRenderer.js
View File

@@ -1,8 +1,9 @@
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import { select, curveLinear, selectAll } from 'd3'; import { select, curveLinear, selectAll } from 'd3';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import dagreD3 from 'dagre-d3'; import { render as Render } from 'dagre-d3-es';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js'; import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
import { log } from '../../logger'; import { log } from '../../logger';
import common, { evaluate } from '../common/common'; import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils'; import { interpolateToCurve, getStylesFromArray } from '../../utils';
@@ -370,7 +371,6 @@ export const draw = function (text, id, _version, diagObj) {
addEdges(edges, g, diagObj); addEdges(edges, g, diagObj);
// Create the renderer // Create the renderer
const Render = dagreD3.render;
const render = new Render(); const render = new Render();
// Add custom shapes // Add custom shapes
@@ -390,7 +390,7 @@ export const draw = function (text, id, _version, diagObj) {
.attr('orient', 'auto'); .attr('orient', 'auto');
const path = marker.append('path').attr('d', 'M 0 0 L 0 0 L 0 0 z'); const path = marker.append('path').attr('d', 'M 0 0 L 0 0 L 0 0 z');
dagreD3.util.applyStyle(path, edge[type + 'Style']); applyStyle(path, edge[type + 'Style']);
}; };
// Override normal arrowhead defined in d3. Remove style & add class to allow css styling. // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.

4
packages/mermaid/src/diagrams/requirement/requirementRenderer.js
View File

@@ -1,5 +1,5 @@
import { line, select } from 'd3'; import { line, select } from 'd3';
import dagre from 'dagre'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import { log } from '../../logger'; import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
@@ -348,7 +348,7 @@ export const draw = (text, id, _version, diagObj) => {
drawReqs(requirements, g, svg); drawReqs(requirements, g, svg);
drawElements(elements, g, svg); drawElements(elements, g, svg);
addRelationships(relationships, g); addRelationships(relationships, g);
dagre.layout(g); dagreLayout(g);
adjustEntities(svg, g); adjustEntities(svg, g);
relationships.forEach(function (rel) { relationships.forEach(function (rel) {

4
packages/mermaid/src/diagrams/state/stateRenderer.js
View File

@@ -1,5 +1,5 @@
import { select } from 'd3'; import { select } from 'd3';
import dagre from 'dagre'; import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import { log } from '../../logger'; import { log } from '../../logger';
import common from '../common/common'; import common from '../common/common';
@@ -239,7 +239,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
); );
}); });
dagre.layout(graph); dagreLayout(graph);
log.debug('Graph after layout', graph.nodes()); log.debug('Graph after layout', graph.nodes());
const svgElem = diagram.node(); const svgElem = diagram.node();

2
packages/mermaid/src/tests/setup.ts
View File

@@ -1,3 +1,3 @@
import { vi } from 'vitest'; import { vi } from 'vitest';
vi.mock('d3'); vi.mock('d3');
vi.mock('dagre-d3'); vi.mock('dagre-d3-es');

35
pnpm-lock.yaml generated
View File

@@ -1,8 +1,5 @@
lockfileVersion: 5.4-inlineSpecifiers lockfileVersion: 5.4-inlineSpecifiers
overrides:
d3: ^7.6.1
importers: importers:
.: .:
@@ -173,14 +170,11 @@ importers:
specifier: ^6.0.0 specifier: ^6.0.0
version: 6.0.0 version: 6.0.0
d3: d3:
specifier: ^7.6.1 specifier: ^7.0.0
version: 7.6.1 version: 7.6.1
dagre: dagre-d3-es:
specifier: ^0.8.5 specifier: 7.0.2
version: 0.8.5 version: 7.0.2
dagre-d3:
specifier: ^0.6.4
version: 0.6.4
dompurify: dompurify:
specifier: 2.4.1 specifier: 2.4.1
version: 2.4.1 version: 2.4.1
@@ -321,7 +315,7 @@ importers:
specifier: ^2.1.0 specifier: ^2.1.0
version: 2.1.0_cytoscape@3.23.0 version: 2.1.0_cytoscape@3.23.0
d3: d3:
specifier: ^7.6.1 specifier: ^7.0.0
version: 7.6.1 version: 7.6.1
khroma: khroma:
specifier: ^2.0.0 specifier: ^2.0.0
@@ -4807,20 +4801,11 @@ packages:
d3-zoom: 3.0.0 d3-zoom: 3.0.0
dev: false dev: false
/dagre-d3/0.6.4: /dagre-d3-es/7.0.2:
resolution: {integrity: sha512-e/6jXeCP7/ptlAM48clmX4xTZc5Ek6T6kagS7Oz2HrYSdqcLZFLqpAfh7ldbZRFfxCZVyh61NEPR08UQRVxJzQ==} resolution: {integrity: sha512-m9+5yhzkf9gyklDMdWlQC/8bayGVlTF8GspmN6XC6nnZjas6kAmffvh0c/EcyFhQ+fp4QIl0fMpNdv76AJGlVQ==}
dependencies: dependencies:
d3: 7.6.1 d3: 7.6.1
dagre: 0.8.5 lodash-es: 4.17.21
graphlib: 2.1.8
lodash: 4.17.21
dev: false
/dagre/0.8.5:
resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
dependencies:
graphlib: 2.1.8
lodash: 4.17.21
dev: false dev: false
/dargs/7.0.0: /dargs/7.0.0:
@@ -7912,6 +7897,10 @@ packages:
p-locate: 5.0.0 p-locate: 5.0.0
dev: true dev: true
/lodash-es/4.17.21:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
dev: false
/lodash.merge/4.6.2: /lodash.merge/4.6.2:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: true dev: true