mermaid-js · Bunker-D · Aug 23, 2024 · Aug 23, 2024 · Aug 23, 2024 · Aug 23, 2024
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1 +1 @@
-./packages/mermaid/src/docs/community/contributing.md
+./packages/mermaid/src/docs/community/contributing.md
diff --git a/cypress/integration/rendering/marker_unique_id_c4.spec.js b/cypress/integration/rendering/marker_unique_id_c4.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('Should show an arrow on each and of the link', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id_c4.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/integration/rendering/marker_unique_id_er.spec.js b/cypress/integration/rendering/marker_unique_id_er.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('Should show a marker on each end of each link', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id_er.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/integration/rendering/marker_unique_id_journey.spec.js b/cypress/integration/rendering/marker_unique_id_journey.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('Should show the arrow pointer (pointing right)', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id_journey.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/integration/rendering/marker_unique_id_requirement.spec.js b/cypress/integration/rendering/marker_unique_id_requirement.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('Should show an arrow and a cross markers on the links', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id_requirement.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/integration/rendering/marker_unique_id_sequence.spec.js b/cypress/integration/rendering/marker_unique_id_sequence.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('Should show circles behind the sequence numbers, and three types of pointers (▶, ≻, ×)', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id_sequence.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/integration/rendering/marker_unique_id_timeline.spec.js b/cypress/integration/rendering/marker_unique_id_timeline.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('Should show the arrow pointers (pointing right and down)', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id_timeline.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/platform/marker_unique_id_c4.html b/cypress/platform/marker_unique_id_c4.html
@@ -0,0 +1,27 @@
+<html>
+  <head></head>
+  <body>
+    <div style="visibility: hidden; height: 0">
+      <pre class="mermaid">
+        C4Context
+        Person(A, "A")
+        System(B, "B")
+        BiRel(A, B, "")
+      </pre>
+    </div>
+    <pre class="mermaid">
+      C4Context
+      Person(A, "A")
+      System(B, "B")
+      BiRel(A, B, "")
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/marker_unique_id_er.html b/cypress/platform/marker_unique_id_er.html
@@ -0,0 +1,29 @@
+<html>
+  <head></head>
+  <body>
+    <div style="visibility: hidden; height: 0">
+      <pre class="mermaid">
+        erDiagram
+        START_OO ||--|| END_OO : ONLY_ONE
+        START_ZOO |o--o| END_ZOO : ZERO_OR_ONE
+        START_ZOM }o--o{ END_ZOM : ZERO_OR_MORE
+        START_OOM }|--|{ END_OOM : ONE_OR_MORE
+      </pre>
+    </div>
+    <pre class="mermaid">
+      erDiagram
+      START_OO ||--|| END_OO : ONLY_ONE
+      START_ZOO |o--o| END_ZOO : ZERO_OR_ONE
+      START_ZOM }o--o{ END_ZOM : ZERO_OR_MORE
+      START_OOM }|--|{ END_OOM : ONE_OR_MORE
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/marker_unique_id_journey.html b/cypress/platform/marker_unique_id_journey.html
@@ -0,0 +1,27 @@
+<html>
+  <head></head>
+  <body>
+    <div style="visibility: hidden; height: 0">
+      <pre class="mermaid">
+        journey
+        title My working day
+        section Go to work
+        Make tea: 5: Me
+      </pre>
+    </div>
+    <pre class="mermaid">
+      journey
+      title My working day
+      section Go to work
+      Make tea: 5: Me
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/marker_unique_id_requirement.html b/cypress/platform/marker_unique_id_requirement.html
@@ -0,0 +1,37 @@
+<html>
+  <head></head>
+  <body>
+    <div style="visibility: hidden; height: 0">
+      <pre class="mermaid">
+        requirementDiagram
+        element test_entity {
+        }
+        requirement test_req {
+        }
+        performanceRequirement test_req_perf {
+        }
+        test_entity - satisfies -> test_req
+        test_req - contains -> test_req_perf
+      </pre>
+    </div>
+    <pre class="mermaid">
+      requirementDiagram
+      element test_entity {
+      }
+      requirement test_req {
+      }
+      performanceRequirement test_req_perf {
+      }
+      test_entity - satisfies -> test_req
+      test_req - contains -> test_req_perf
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/marker_unique_id_sequence.html b/cypress/platform/marker_unique_id_sequence.html
@@ -0,0 +1,29 @@
+<html>
+  <head></head>
+  <body>
+    <div style="visibility: hidden; height: 0">
+      <pre class="mermaid">
+        sequenceDiagram
+        autonumber
+        A ->> B: arrowhead
+        A -) B: filled-head
+        A -x B: crosshead
+      </pre>
+    </div>
+    <pre class="mermaid">
+      sequenceDiagram
+      autonumber
+      A ->> B: arrowhead
+      A -) B: filled-head
+      A -x B: crosshead
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/marker_unique_id_timeline.html b/cypress/platform/marker_unique_id_timeline.html
@@ -0,0 +1,23 @@
+<html>
+  <head></head>
+  <body>
+    <div style="visibility: hidden; height: 0">
+      <pre class="mermaid">
+        timeline
+        2000 : Event
+      </pre>
+    </div>
+    <pre class="mermaid">
+      timeline
+      2000 : Event
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js
@@ -406,7 +406,7 @@ let getIntersectPoints = function (fromNode, endNode) {
   return { startPoint: startPoint, endPoint: endPoint };
 };
 
-export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {
+export const drawRels = function (diagram, id, rels, getC4ShapeObj, diagObj) {
   let i = 0;
   for (let rel of rels) {
     i = i + 1;
@@ -435,7 +435,7 @@ export const drawRels = function (diagram, rels, getC4ShapeObj, diagObj) {
     rel.startPoint = points.startPoint;
     rel.endPoint = points.endPoint;
   }
-  svgDraw.drawRels(diagram, rels, conf);
+  svgDraw.drawRels(diagram, id, rels, conf);
 };
 
 /**
@@ -604,9 +604,9 @@ export const draw = function (_text, id, _version, diagObj) {
   const diagram =
     securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : select(`[id="${id}"]`);
 
-  svgDraw.insertComputerIcon(diagram);
-  svgDraw.insertDatabaseIcon(diagram);
-  svgDraw.insertClockIcon(diagram);
+  svgDraw.insertComputerIcon(diagram, id);
+  svgDraw.insertDatabaseIcon(diagram, id);
+  svgDraw.insertClockIcon(diagram, id);
 
   let screenBounds = new Bounds(diagObj);
 
@@ -630,12 +630,12 @@ export const draw = function (_text, id, _version, diagObj) {
   // }
 
   // The arrow head definition is attached to the svg once
-  svgDraw.insertArrowHead(diagram);
-  svgDraw.insertArrowEnd(diagram);
-  svgDraw.insertArrowCrossHead(diagram);
-  svgDraw.insertArrowFilledHead(diagram);
+  svgDraw.insertArrowHead(diagram, id);
+  svgDraw.insertArrowEnd(diagram, id);
+  svgDraw.insertArrowCrossHead(diagram, id);
+  svgDraw.insertArrowFilledHead(diagram, id);
 
-  drawRels(diagram, diagObj.db.getRels(), diagObj.db.getC4Shape, diagObj);
+  drawRels(diagram, id, diagObj.db.getRels(), diagObj.db.getC4Shape, diagObj);
 
   screenBounds.data.stopx = globalBoundaryMaxX;
   screenBounds.data.stopy = globalBoundaryMaxY;