diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/integration/rendering/conf-and-directives.spec.js index 401a24894b..d447ea9937 100644 --- a/cypress/integration/rendering/conf-and-directives.spec.js +++ b/cypress/integration/rendering/conf-and-directives.spec.js @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.ts'; +import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts'; describe('Configuration and directives - nodes should be light blue', () => { it('No config - use default', () => { @@ -206,8 +206,7 @@ graph TD describe('when rendering several diagrams', () => { it('diagrams should not taint later diagrams', () => { const url = 'http://localhost:9000/theme-directives.html'; - cy.visit(url); - cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1'); + urlSnapshotTest(url, {}); }); }); }); diff --git a/cypress/platform/marker_unique_id.html b/cypress/platform/marker_unique_id.html index e49169c556..98c2c7f4df 100644 --- a/cypress/platform/marker_unique_id.html +++ b/cypress/platform/marker_unique_id.html @@ -42,7 +42,8 @@

Example

diff --git a/package.json b/package.json index 9f60ee14a8..f551fc5d81 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@8.7.5", + "packageManager": "pnpm@8.7.6", "keywords": [ "diagram", "markdown", diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 85ec80dc6b..737b492fb3 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -569,8 +569,9 @@ export const addEdges = function (edges, diagObj, graph, svg) { * @param edgeData * @param diagramType * @param arrowMarkerAbsolute + * @param id */ -const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute) { +const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute, id) { let url = ''; // Check configuration for absolute path if (arrowMarkerAbsolute) { @@ -587,61 +588,103 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb // look in edge data and decide which marker to use switch (edgeData.arrowTypeStart) { case 'arrow_cross': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')' + ); break; case 'arrow_point': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')' + ); break; case 'arrow_barb': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')' + ); break; case 'arrow_circle': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')' + ); break; case 'aggregation': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')' + ); break; case 'extension': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')' + ); break; case 'composition': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')' + ); break; case 'dependency': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')' + ); break; case 'lollipop': - svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-lollipopStart' + ')'); + svgPath.attr( + 'marker-start', + 'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')' + ); break; default: } switch (edgeData.arrowTypeEnd) { case 'arrow_cross': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')'); + svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')'); break; case 'arrow_point': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')'); + svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')'); break; case 'arrow_barb': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')'); + svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')'); break; case 'arrow_circle': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')'); + svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')'); break; case 'aggregation': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')'); + svgPath.attr( + 'marker-end', + 'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')' + ); break; case 'extension': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')'); + svgPath.attr( + 'marker-end', + 'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')' + ); break; case 'composition': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')'); + svgPath.attr( + 'marker-end', + 'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')' + ); break; case 'dependency': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')'); + svgPath.attr( + 'marker-end', + 'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')' + ); break; case 'lollipop': - svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-lollipopEnd' + ')'); + svgPath.attr( + 'marker-end', + 'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')' + ); break; default: } @@ -692,7 +735,7 @@ const calcOffset = function (src, dest, parentLookupDb) { return { x: ancestorOffset.posX, y: ancestorOffset.posY }; }; -const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) { +const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, id) { const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb); const src = edge.sections[0].startPoint; @@ -723,7 +766,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb) { 'transform', `translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})` ); - addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute); + addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute, id); }; /** @@ -816,7 +859,7 @@ export const draw = async function (text, id, _version, diagObj) { const markers = ['point', 'circle', 'cross']; // Add the marker definitions to the svg as marker tags - insertMarkers(svg, markers, diagObj.type, diagObj.arrowMarkerAbsolute); + insertMarkers(svg, markers, diagObj.type, id); // Fetch the vertices/nodes and edges/links from the parsed graph definition const vert = diagObj.db.getVertices(); @@ -895,7 +938,7 @@ export const draw = async function (text, id, _version, diagObj) { drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0); log.info('after layout', g); g.edges?.map((edge) => { - insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb); + insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id); }); setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth); // Remove element after layout diff --git a/packages/mermaid/src/docs/package.json b/packages/mermaid/src/docs/package.json index 759d1ffb17..9d8912b04b 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -32,7 +32,7 @@ "unplugin-vue-components": "^0.25.0", "vite": "^4.3.9", "vite-plugin-pwa": "^0.16.0", - "vitepress": "1.0.0-rc.12", + "vitepress": "1.0.0-rc.14", "workbox-window": "^7.0.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9cf6ff7ee3..e9e542291e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -475,8 +475,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.12 - version: 1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.7.0) + specifier: 1.0.0-rc.14 + version: 1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -15775,9 +15775,14 @@ packages: - universal-cookie dev: true - /vitepress@1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.7.0): - resolution: {integrity: sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg==} + /vitepress@1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.0): + resolution: {integrity: sha512-yChIeXOAcNvVnSVjhziH1vte0uhKb00PuZf7KdIMfx3ixTMAz73Nn+6gREvCv0SdH+anteGUKz5eljv0ygcgGQ==} hasBin: true + peerDependencies: + markdown-it-mathjax3: ^4.3.2 + peerDependenciesMeta: + markdown-it-mathjax3: + optional: true dependencies: '@docsearch/css': 3.5.2 '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)