+
## About
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 4bdbc4ae7..6b3e28b19 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -10,7 +10,7 @@
**感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
-
+
## 关于 Mermaid
diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js
new file mode 100644
index 000000000..576d5d863
--- /dev/null
+++ b/__mocks__/c4Renderer.js
@@ -0,0 +1,21 @@
+/**
+ * Mocked C4Context diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const drawPersonOrSystemArray = vi.fn();
+export const drawBoundary = vi.fn();
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ drawPersonOrSystemArray,
+ drawBoundary,
+ setConf,
+ draw,
+};
diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js
new file mode 100644
index 000000000..1ad95806f
--- /dev/null
+++ b/__mocks__/classRenderer-v2.js
@@ -0,0 +1,16 @@
+/**
+ * Mocked class diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ setConf,
+ draw,
+};
diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js
new file mode 100644
index 000000000..1c20de4b1
--- /dev/null
+++ b/__mocks__/classRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked class diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ draw,
+};
diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index f90d93557..af35020c5 100644
--- a/__mocks__/d3.ts
+++ b/__mocks__/d3.ts
@@ -1,79 +1,14 @@
// @ts-nocheck TODO: Fix TS
-import { vi } from 'vitest';
-
-const NewD3 = function () {
- /**
- *
- */
- function returnThis() {
- return this;
- }
- return {
- append: function () {
- return NewD3();
- },
- lower: returnThis,
- attr: returnThis,
- style: returnThis,
- text: returnThis,
- 0: {
- 0: {
- getBBox: function () {
- return {
- height: 10,
- width: 20,
- };
- },
- },
- },
- };
-};
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
export const select = function () {
- return new NewD3();
+ return new MockedD3();
};
export const selectAll = function () {
- return new NewD3();
+ return new MockedD3();
};
export const curveBasis = 'basis';
export const curveLinear = 'linear';
export const curveCardinal = 'cardinal';
-
-export const MockD3 = (name, parent) => {
- const children = [];
- const elem = {
- get __children() {
- return children;
- },
- get __name() {
- return name;
- },
- get __parent() {
- return parent;
- },
- node() {
- return {
- getBBox() {
- return {
- x: 5,
- y: 10,
- height: 15,
- width: 20,
- };
- },
- };
- },
- };
- elem.append = (name) => {
- const mockElem = MockD3(name, elem);
- children.push(mockElem);
- return mockElem;
- };
- elem.lower = vi.fn(() => elem);
- elem.attr = vi.fn(() => elem);
- elem.text = vi.fn(() => elem);
- elem.style = vi.fn(() => elem);
- return elem;
-};
diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js
new file mode 100644
index 000000000..845d641f7
--- /dev/null
+++ b/__mocks__/erRenderer.js
@@ -0,0 +1,16 @@
+/**
+ * Mocked er diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ setConf,
+ draw,
+};
diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js
new file mode 100644
index 000000000..89cc86031
--- /dev/null
+++ b/__mocks__/flowRenderer-v2.js
@@ -0,0 +1,24 @@
+/**
+ * Mocked flow (flowchart) diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+export const addVertices = vi.fn();
+export const addEdges = vi.fn();
+export const getClasses = vi.fn().mockImplementation(() => {
+ return {};
+});
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ setConf,
+ addVertices,
+ addEdges,
+ getClasses,
+ draw,
+};
diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js
new file mode 100644
index 000000000..957249832
--- /dev/null
+++ b/__mocks__/ganttRenderer.js
@@ -0,0 +1,16 @@
+/**
+ * Mocked gantt diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ setConf,
+ draw,
+};
diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js
new file mode 100644
index 000000000..1daa82ca4
--- /dev/null
+++ b/__mocks__/gitGraphRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked git (graph) diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ draw,
+};
diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js
new file mode 100644
index 000000000..2bc77c0b1
--- /dev/null
+++ b/__mocks__/journeyRenderer.js
@@ -0,0 +1,15 @@
+/**
+ * Mocked pie (picChart) diagram renderer
+ */
+
+import { vi } from 'vitest';
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ setConf,
+ draw,
+};
diff --git a/__mocks__/pieRenderer.js b/__mocks__/pieRenderer.js
new file mode 100644
index 000000000..317c69901
--- /dev/null
+++ b/__mocks__/pieRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked pie (picChart) diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ draw,
+};
diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js
new file mode 100644
index 000000000..48d8997ac
--- /dev/null
+++ b/__mocks__/requirementRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked requirement diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ draw,
+};
diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js
new file mode 100644
index 000000000..11080c6bb
--- /dev/null
+++ b/__mocks__/sequenceRenderer.js
@@ -0,0 +1,23 @@
+/**
+ * Mocked sequence diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const bounds = vi.fn();
+export const drawActors = vi.fn();
+export const drawActorsPopup = vi.fn();
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ bounds,
+ drawActors,
+ drawActorsPopup,
+ setConf,
+ draw,
+};
diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js
new file mode 100644
index 000000000..a2d103b50
--- /dev/null
+++ b/__mocks__/stateRenderer-v2.js
@@ -0,0 +1,22 @@
+/**
+ * Mocked state diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+export const getClasses = vi.fn().mockImplementation(() => {
+ return {};
+});
+export const stateDomId = vi.fn().mockImplementation(() => {
+ return 'mocked-stateDiagram-stateDomId';
+});
+export const draw = vi.fn().mockImplementation(() => {
+ return '';
+});
+
+export default {
+ setConf,
+ getClasses,
+ draw,
+};
diff --git a/cSpell.json b/cSpell.json
index cfffbcdb7..c6660c4dc 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -14,6 +14,7 @@
"bilkent",
"bisheng",
"braintree",
+ "brkt",
"brolin",
"brotli",
"classdef",
@@ -62,14 +63,20 @@
"mindmaps",
"mitigations",
"mkdocs",
+ "mult",
"orlandoni",
"phpbb",
"plantuml",
"playfair",
+ "pnpm",
"podlite",
+ "quence",
"radious",
"ranksep",
+ "rect",
+ "rects",
"redmine",
+ "roledescription",
"sandboxed",
"setupgraphviewbox",
"shiki",
@@ -79,7 +86,10 @@
"stylis",
"substate",
"sveidqvist",
+ "swimm",
"techn",
+ "teststr",
+ "textlength",
"treemap",
"ts-nocheck",
"tuleap",
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
index 3a6c37e88..be69dfc98 100644
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,13 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util';
+
describe('mermaid', () => {
describe('registerDiagram', () => {
it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
const url = 'http://localhost:9000/external-diagrams-mindmap.html';
- cy.visit(url);
-
- cy.get('svg', {
- // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
- timeout: 10000,
- }).matchImageSnapshot();
+ urlSnapshotTest(url, {}, false, false);
});
});
});
diff --git a/cypress/integration/other/ghsa.spec.js b/cypress/integration/other/ghsa.spec.js
index 5b168a8a8..4fadc7855 100644
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -7,4 +7,10 @@ describe('CSS injections', () => {
flowchart: { htmlLabels: false },
});
});
+ it('should not allow adding styletags affecting the page', () => {
+ urlSnapshotTest('http://localhost:9000/ghsa3.html', {
+ logLevel: 1,
+ flowchart: { htmlLabels: false },
+ });
+ });
});
diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js
new file mode 100644
index 000000000..0cf128ff6
--- /dev/null
+++ b/cypress/integration/rendering/c4.spec.js
@@ -0,0 +1,122 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('C4 diagram', () => {
+ it('should render a simple C4Context diagram', () => {
+ imgSnapshotTest(
+ `
+ C4Context
+ accTitle: C4 context demo
+ accDescr: Many large C4 diagrams
+
+ title System Context diagram for Internet Banking System
+
+ Enterprise_Boundary(b0, "BankBoundary0") {
+ Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+
+ System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+ Enterprise_Boundary(b1, "BankBoundary") {
+ System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+ }
+ }
+
+ BiRel(customerA, SystemAA, "Uses")
+ Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+ Rel(SystemC, customerA, "Sends e-mails to")
+
+ UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+ UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+ UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ it('should render a simple C4Container diagram', () => {
+ imgSnapshotTest(
+ `
+ C4Container
+ title Container diagram for Internet Banking System
+
+ System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+ Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+ Container_Boundary(c1, "Internet Banking") {
+ Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
+ }
+
+ Rel(customer, spa, "Uses", "HTTPS")
+ Rel(email_system, customer, "Sends e-mails to")
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ it('should render a simple C4Component diagram', () => {
+ imgSnapshotTest(
+ `
+ C4Component
+ title Component diagram for Internet Banking System - API Application
+
+ Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+
+ Container_Boundary(api, "API Application") {
+ Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+ }
+
+ Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+ UpdateRelStyle(spa, sign, $offsetY="-40")
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ it('should render a simple C4Dynamic diagram', () => {
+ imgSnapshotTest(
+ `
+ C4Dynamic
+ title Dynamic diagram for Internet Banking System - API Application
+
+ ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+ Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+ Container_Boundary(b, "API Application") {
+ Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+ Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+ }
+ Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+ Rel(c2, c3, "Calls isAuthenticated() on")
+ Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+ UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+ UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+ UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ it('should render a simple C4Deployment diagram', () => {
+ imgSnapshotTest(
+ `
+ C4Deployment
+ title Deployment Diagram for Internet Banking System - Live
+
+ Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+ Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+ }
+
+ Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+ Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+ Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+ Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+ }
+ }
+ }
+
+ Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+});
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index f97458857..9536a074d 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -485,8 +485,7 @@ describe('Class diagram V2', () => {
classDiagram-v2
note "I love this diagram!\nDo you love it?"
class Class10 {
- <-flowchart TB;subgraph "number as labels";1;end; --
-flowchart TB;a[APA]; --
-graph TD - work --> sleep - sleep --> work - eat --> sleep - work --> eat --
-flowchart TD - work --> sleep - sleep --> work - eat --> sleep - work --> eat --
- graph TB - A - B - subgraph foo[Foo SubGraph] - C - D - end - subgraph bar[Bar SubGraph] - E - F - end - G - - A-->B - B-->C - C-->D - B-->D - D-->E - E-->A - E-->F - F-->D - F-->G - B-->G - G-->D - - style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred - style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue --
- graph TB
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
- A
- B
- subgraph foo[Foo SubGraph]
- C
- D
- end
- subgraph bar[Bar SubGraph]
- E
- F
- end
- G
-
- A-->B
- B-->C
- C-->D
- B-->D
- D-->E
- E-->A
- E-->F
- F-->D
- F-->G
- B-->G
- G-->D
-
- style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
- style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-
- +Security check+graph TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- graph TD -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- flowchart TD -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C ---flowchart LR - a["Haiya"]---->b ---flowchart LR -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - a["Haiya"]---->b --- flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- flowchart TD -%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C --- %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%% -classDiagram-v2 - Class01 <|-- AveryLongClass : Cool - <<interface>> Class01 - Class03 *-- Class04 - Class05 o-- Class06 - Class07 .. Class08 - Class09 --> C2 : Where am i? - Class09 --* C3 - Class09 --|> Class07 - Class12 <|.. Class08 - Class11 ..>Class12 - Class07 : equals() - Class07 : Object[] elementData - Class01 : size() - Class01 : int chimp - Class01 : int gorilla - Class01 : -int privateChimp - Class01 : +int publicGorilla - Class01 : #int protectedMarmoset - Class08 <--> C2: Cool label - class Class10 { - <<service>> - int id - test() - } ---classDiagram-v2 - Class01 <|-- AveryLongClass : Cool - <<interface>> Class01 - Class03 *-- Class04 - Class05 o-- Class06 - Class07 .. Class08 - Class09 --> C2 : Where am i? - Class09 --* C3 - Class09 --|> Class07 - Class12 <|.. Class08 - Class11 ..>Class12 - Class07 : equals() - Class07 : Object[] elementData - Class01 : size() - Class01 : int chimp - Class01 : int gorilla - Class01 : -int privateChimp - Class01 : +int publicGorilla - Class01 : #int protectedMarmoset - Class08 <--> C2: Cool label - class Class10 { - <<service>> - int id - test() - } ---flowchart BT - subgraph S1 - sub1 -->sub2 - end - subgraph S2 - sub4 - end - S1 --> S2 - sub1 --> sub4 --