diff --git a/.changeset/deep-times-make.md b/.changeset/deep-times-make.md
new file mode 100644
index 000000000..3f126736f
--- /dev/null
+++ b/.changeset/deep-times-make.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Add IDs in architecture diagrams
diff --git a/.changeset/four-eyes-wish.md b/.changeset/four-eyes-wish.md
new file mode 100644
index 000000000..3bbbc1e47
--- /dev/null
+++ b/.changeset/four-eyes-wish.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Ensure edge label color is applied when using classDef with edge IDs
diff --git a/.changeset/proud-colts-smell.md b/.changeset/proud-colts-smell.md
new file mode 100644
index 000000000..610d69253
--- /dev/null
+++ b/.changeset/proud-colts-smell.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add IDs in architecture diagrams
diff --git a/.changeset/revert-marked-dependency.md b/.changeset/revert-marked-dependency.md
new file mode 100644
index 000000000..aded58871
--- /dev/null
+++ b/.changeset/revert-marked-dependency.md
@@ -0,0 +1,9 @@
+---
+'mermaid': patch
+---
+
+chore: revert marked dependency from ^15.0.7 to ^16.0.0
+
+- Reverted marked package version to ^16.0.0 for better compatibility
+- This is a dependency update that maintains API compatibility
+- All tests pass with the updated version
diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt
index 6900c15b0..45152a0ce 100644
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -8,6 +8,7 @@ compositTitleSize
cose
curv
doublecircle
+elem
elems
gantt
gitgraph
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/integration/other/configuration.spec.js
index b48a197a4..a699e03a7 100644
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -98,12 +98,12 @@ describe('Configuration', () => {
it('should handle arrowMarkerAbsolute set to true', () => {
renderGraph(
`flowchart TD
- A[Christmas] -->|Get money| B(Go shopping)
- B --> C{Let me think}
- C -->|One| D[Laptop]
- C -->|Two| E[iPhone]
- C -->|Three| F[fa:fa-car Car]
- `,
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
{
arrowMarkerAbsolute: true,
}
@@ -113,8 +113,7 @@ describe('Configuration', () => {
cy.get('path')
.first()
.should('have.attr', 'marker-end')
- .should('exist')
- .and('include', 'url(http\\:\\/\\/localhost');
+ .and('include', 'url(http://localhost');
});
});
it('should not taint the initial configuration when using multiple directives', () => {
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index 312e1d5b4..fac4f3b4b 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- verifyNumber(maxWidthValue, 380);
+ verifyNumber(maxWidthValue, 380, 15);
});
});
it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
- verifyNumber(width, 380);
+ verifyNumber(width, 380, 15);
expect(svg).to.not.have.attr('style');
});
});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 8c6cde57a..5ef32c269 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -1186,4 +1186,17 @@ end
imgSnapshotTest(graph, { htmlLabels: false });
});
});
+
+ it('V2 - 17: should apply class def colour to edge label', () => {
+ imgSnapshotTest(
+ ` graph LR
+ id1(Start) link@-- "Label" -->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+
+class id2 myClass
+classDef myClass fill:#bbf,stroke:#f66,stroke-width:2px,color:white,stroke-dasharray: 5 5
+class link myClass
+`
+ );
+ });
});
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fc33a58b4..7ac7aeac8 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -32,26 +32,8 @@
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
-
-
-