+
## 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/cSpell.json b/cSpell.json
index 45e7fe99a..49cb8ada1 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -14,6 +14,7 @@
"bilkent",
"bisheng",
"braintree",
+ "brkt",
"brolin",
"brotli",
"classdef",
@@ -60,12 +61,14 @@
"mindmaps",
"mitigations",
"mkdocs",
+ "mult",
"orlandoni",
"phpbb",
"plantuml",
"playfair",
"pnpm",
"podlite",
+ "quence",
"ranksep",
"rect",
"rects",
@@ -80,7 +83,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 --