From 4201e4775d9206a5fc44006a2e26747cfc10ef78 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 14:52:39 +0530 Subject: [PATCH 1/5] fix: Arrow markers in flowchart-elk --- .../flowchart/elk/flowRenderer-elk.js | 89 ++++++++++++++----- 1 file changed, 66 insertions(+), 23 deletions(-) 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 From 335ba40dd0d37ba82c265c99104626f4ede1637a Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sat, 16 Sep 2023 00:32:32 +0100 Subject: [PATCH 2/5] test(e2e): wait for marker_unique_id.html e2e test Sometimes, Cypress takes the screenshot for marker_unique_id.html early, before mermaid has finished rendering the diagrams. Fixes: 924c9e913b665f22f9a3401dbf31857579833ca4 Co-authored-by: Sidharth Vinod --- cypress/platform/marker_unique_id.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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

From 17f5052a6f5aee254e8639db6e022349358b862d Mon Sep 17 00:00:00 2001 From: Alois Klink Date: Sat, 16 Sep 2023 00:26:24 +0100 Subject: [PATCH 4/5] test(e2e): wait for theme-directives.html The `theme-directives.html` test currently sometimes takes a screenshot before all of the Mermaid diagrams have completed rendering. We can use the `urlSnapshopTest()` helper function, which waits until a `.rendered` property exists on the page. Co-authored-by: Sidharth Vinod --- cypress/integration/rendering/conf-and-directives.spec.js | 5 ++--- cypress/platform/theme-directives.html | 7 +++++++ 2 files changed, 9 insertions(+), 3 deletions(-) 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/theme-directives.html b/cypress/platform/theme-directives.html index 21711a4fe6..bd91688d79 100644 --- a/cypress/platform/theme-directives.html +++ b/cypress/platform/theme-directives.html @@ -121,7 +121,14 @@

Nothing set, should be Default

fontFamily: '"arial", sans-serif', curve: 'cardinal', securityLevel: 'strict', + startOnLoad: false, }); + + await mermaid.run(); + + if (window.Cypress) { + window.rendered = true; + } From 6bab2f66936b0e5fa4a1cff51b59743d3c42e317 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 19 Sep 2023 11:27:03 +0000 Subject: [PATCH 5/5] chore(deps): update all patch dependencies --- package.json | 2 +- packages/mermaid/src/docs/package.json | 2 +- pnpm-lock.yaml | 13 +++++++++---- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 7a6a032d72..8bdcce0740 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/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 5a04bb353b..ef92c63db8 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.6.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 @@ -15465,9 +15465,14 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.16.0)(search-insights@2.6.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.6.0)