Merge branch 'next' into add-pie-langium-parser

mermaid-js · Sep 20, 2023 · 8c31db6 · 8c31db6
2 parents fedbd48 + 91eb824
commit 8c31db6
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 54 deletions.
diff --git 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
@@ -42,7 +42,8 @@ <h1>Example</h1>
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({ startOnLoad: true, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
 
       if (window.Cypress) {
         window.rendered = true;

diff --git a/cypress/platform/theme-directives.html b/cypress/platform/theme-directives.html
@@ -1,15 +1,6 @@
 <html>
   <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -122,26 +113,21 @@ <h1>Nothing set, should be Default</h1>
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
+
       mermaid.initialize({
-        // theme: 'dark',
-        // theme: 'dark',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        // flowchart: { useMaxWidth: true },
         graph: { curve: 'cardinal', htmlLabels: false },
-        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
         securityLevel: 'strict',
+        startOnLoad: false,
       });
-      function callback() {
-        alert('It worked');
+
+      await mermaid.run();
+
+      if (window.Cypress) {
+        window.rendered = true;
       }
     </script>
   </body>

diff --git 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": "[email protected].5",
+  "packageManager": "[email protected].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
@@ -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
@@ -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