diff --git a/cypress/integration/rendering/marker_unique_id.spec.js b/cypress/integration/rendering/marker_unique_id.spec.js
new file mode 100644
index 000000000..617189db0
--- /dev/null
+++ b/cypress/integration/rendering/marker_unique_id.spec.js
@@ -0,0 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.ts';
+
+describe('Marker Unique IDs Per Diagram', () => {
+  it('should render a blue arrow tip in second digram', () => {
+    urlSnapshotTest('http://localhost:9000/marker_unique_id.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+});
diff --git a/cypress/platform/marker_unique_id.html b/cypress/platform/marker_unique_id.html
new file mode 100644
index 000000000..eff04dbb6
--- /dev/null
+++ b/cypress/platform/marker_unique_id.html
@@ -0,0 +1,28 @@
+<html>
+  <head> </head>
+  <body>
+    <h1>Example</h1>
+    <pre class="mermaid">
+      %%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
+      flowchart LR
+      subgraph red
+      A --> B
+      end
+    </pre>
+    <pre class="mermaid">
+      %%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
+      flowchart LR
+      subgraph black
+      A --> B
+      end
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({ startOnLoad: true, logLevel: 0 });
+
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
