diff --git a/.eslintrc.json b/.eslintrc.json
index dc5adb6f2..9c755a0e2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,9 +15,9 @@
},
"extends": [
"eslint:recommended",
- //"plugin:jsdoc/recommended",
+ "plugin:jsdoc/recommended",
"plugin:json/recommended",
- // "plugin:markdown/recommended",
+ "plugin:markdown/recommended",
"plugin:prettier/recommended"
],
"plugins": ["html", "jest", "jsdoc", "json", "prettier"],
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 74e02e6cb..f8e453bd3 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -24,7 +24,7 @@ A clear and concise description of what you expected to happen.
If applicable, add screenshots to help explain your problem.
**Code Sample**
-If applicable, add the code sample or a link to the [live editor](https://mermaid-js.github.io/mermaid-live-editor).
+If applicable, add the code sample or a link to the [live editor](https://mermaid.live).
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index dbce0a441..0e0744404 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -12,6 +12,7 @@ jobs:
test:
runs-on: ubuntu-latest
name: check tests
+ if: github.repository_owner == 'mermaid'
steps:
- uses: actions/checkout@v2
with:
@@ -19,6 +20,6 @@ jobs:
- uses: testomatio/check-tests@stable
with:
framework: cypress
- tests: "./cypress/integration/**/**.spec.js"
+ tests: "./cypress/e2e/**/**.spec.js"
token: ${{ secrets.GITHUB_TOKEN }}
has-tests-label: true
diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml
index 0e72a00ef..845c763e8 100644
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -17,4 +17,4 @@ jobs:
- name: 'Checkout Repository'
uses: actions/checkout@v3
- name: 'Dependency Review'
- uses: actions/dependency-review-action@v1
+ uses: actions/dependency-review-action@v2
diff --git a/README.md b/README.md
index 5c2eefa8c..4d86b6a43 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).
-Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/).
+Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
[Tutorials](./docs/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
@@ -51,7 +51,7 @@ In our release process we rely heavily on visual regression tests using [applito
__The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here jump into the [text syntax](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference).__
-### Flowchart [docs - live editor]
+### Flowchart [docs - live editor]
```
flowchart LR
@@ -71,7 +71,7 @@ C -->|Two| E[Result 2]
```
-### Sequence diagram [docs - live editor]
+### Sequence diagram [docs - live editor]
```
sequenceDiagram
@@ -96,7 +96,7 @@ John->>Bob: How about you?
Bob-->>John: Jolly good!
```
-### Gantt chart [docs - live editor]
+### Gantt chart [docs - live editor]
```
gantt
@@ -119,7 +119,7 @@ gantt
Parallel 4 : des6, after des4, 1d
```
-### Class diagram [docs - live editor]
+### Class diagram [docs - live editor]
```
classDiagram
@@ -158,7 +158,7 @@ class Class10 {
}
```
-### State diagram [docs - live editor]
+### State diagram [docs - live editor]
```
stateDiagram-v2
[*] --> Still
@@ -178,24 +178,24 @@ Moving --> Crash
Crash --> [*]
```
-### Pie chart [docs - live editor]
+### Pie chart [docs - live editor]
```
pie
"Dogs" : 386
-"Cats" : 85
+"Cats" : 85.9
"Rats" : 15
```
```mermaid
pie
"Dogs" : 386
-"Cats" : 85
+"Cats" : 85.9
"Rats" : 15
```
-### Git graph [experimental - live editor]
+### Git graph [experimental - live editor]
-### User Journey diagram [docs - live editor]
+### User Journey diagram [docs - live editor]
```
journey
title My working day
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 63a3ee4aa..91297c323 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -20,7 +20,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
绘图和编写文档花费了开发者宝贵的开发时间，而且随着业务的变更，它很快就会过期。 但是如果缺少了图表或文档，对于生产力和团队新人的业务学习都会产生巨大的阻碍。
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。
-Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor/) 轻松创建详细的图表。
+Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。
你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
@@ -139,7 +139,7 @@ class Class10 {
}
```
-### 状态图 [[docs - live editor]
+### 状态图 [[docs - live editor]
```
stateDiagram-v2
diff --git a/cypress.config.js b/cypress.config.js
new file mode 100644
index 000000000..044c5d523
--- /dev/null
+++ b/cypress.config.js
@@ -0,0 +1,20 @@
+const { defineConfig } = require('cypress');
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
+
+module.exports = defineConfig({
+ e2e: {
+ specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+ setupNodeEvents(on, config) {
+ addMatchImageSnapshotPlugin(on, config);
+ // copy any needed variables from process.env to config.env
+ config.env.useAppli = process.env.USE_APPLI ? true : false;
+ config.env.codeBranch = process.env.APPLI_BRANCH;
+
+ // do not forget to return the changed config object!
+ return config;
+ },
+ supportFile: 'cypress/support/index.js',
+ },
+ video: false,
+});
diff --git a/cypress.json b/cypress.json
deleted file mode 100644
index 5e0725b20..000000000
--- a/cypress.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "video": false
-}
\ No newline at end of file
diff --git a/cypress/integration/other/configuration.spec.js b/cypress/e2e/other/configuration.spec.js
similarity index 100%
rename from cypress/integration/other/configuration.spec.js
rename to cypress/e2e/other/configuration.spec.js
diff --git a/cypress/integration/other/interaction.spec.js b/cypress/e2e/other/interaction.spec.js
similarity index 100%
rename from cypress/integration/other/interaction.spec.js
rename to cypress/e2e/other/interaction.spec.js
diff --git a/cypress/integration/other/rerender.spec.js b/cypress/e2e/other/rerender.spec.js
similarity index 100%
rename from cypress/integration/other/rerender.spec.js
rename to cypress/e2e/other/rerender.spec.js
diff --git a/cypress/integration/other/webpackUsage.spec.js b/cypress/e2e/other/webpackUsage.spec.js
similarity index 100%
rename from cypress/integration/other/webpackUsage.spec.js
rename to cypress/e2e/other/webpackUsage.spec.js
diff --git a/cypress/integration/other/xss.spec.js b/cypress/e2e/other/xss.spec.js
similarity index 100%
rename from cypress/integration/other/xss.spec.js
rename to cypress/e2e/other/xss.spec.js
diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/e2e/rendering/appli.spec.js
similarity index 100%
rename from cypress/integration/rendering/appli.spec.js
rename to cypress/e2e/rendering/appli.spec.js
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/e2e/rendering/classDiagram-v2.spec.js
similarity index 100%
rename from cypress/integration/rendering/classDiagram-v2.spec.js
rename to cypress/e2e/rendering/classDiagram-v2.spec.js
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/e2e/rendering/classDiagram.spec.js
similarity index 96%
rename from cypress/integration/rendering/classDiagram.spec.js
rename to cypress/e2e/rendering/classDiagram.spec.js
index 99fd6fb81..8cf410d05 100644
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/e2e/rendering/classDiagram.spec.js
@@ -1,410 +1,410 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
-
-describe('Class diagram', () => {
- it('1: should render a simple class diagram', () => {
- imgSnapshotTest(
- `
- classDiagram
- 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()
- }
- `,
- { logLevel: 1 }
- );
- cy.get('svg');
- });
-
- it('2: should render a simple class diagrams with cardinality', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 "1" <|--|> "*" AveryLongClass : Cool
- <<interface>> Class01
- Class03 "1" *-- "*" Class04
- Class05 "1" o-- "many" Class06
- Class07 "1" .. "*" Class08
- Class09 "1" --> "*" C2 : Where am i?
- Class09 "*" --* "*" C3
- Class09 "1" --|> "1" Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 "1" <--> "*" C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('3: should render a simple class diagram with different visibilities', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- <<interface>> Class01
- Class01 : -privateMethod()
- Class01 : +publicMethod()
- Class01 : #protectedMethod()
- Class01 : -int privateChimp
- Class01 : +int publicGorilla
- Class01 : #int protectedMarmoset
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('4: should render a simple class diagram with comments', () => {
- imgSnapshotTest(
- `
- classDiagram
- %% this is a comment
- Class01 <|-- AveryLongClass : Cool
- <<interface>> Class01
- Class03 *-- Class04
- Class05 o-- Class06
- Class07 .. Class08
- Class09 --> C2 : Where am i?
- Class09 --* C3
- Class09 --|> Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('5: should render a simple class diagram with abstract method', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class01 : someMethod()*
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('6: should render a simple class diagram with static method', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01 <|-- AveryLongClass : Cool
- Class01 : someMethod()$
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('7: should render a simple class diagram with Generic class', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class01~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('8: should render a simple class diagram with Generic class and relations', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01~T~ <|-- AveryLongClass : Cool
- Class03~T~ *-- Class04~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('9: should render a simple class diagram with clickable link', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01~T~ <|-- AveryLongClass : Cool
- Class03~T~ *-- Class04~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- link Class01 "google.com" "A Tooltip"
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('10: should render a simple class diagram with clickable callback', () => {
- imgSnapshotTest(
- `
- classDiagram
- Class01~T~ <|-- AveryLongClass : Cool
- Class03~T~ *-- Class04~T~
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 <--> C2: Cool label
- class Class10~T~ {
- <<service>>
- int id
- test()
- }
- callback Class01 "functionCall" "A Tooltip"
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('11: should render a simple class diagram with return type on method', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10~T~ {
- int[] id
- test(int[] ids) bool
- testArray() bool[]
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('12: should render a simple class diagram with generic types', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10~T~ {
- int[] id
- List~int~ ids
- test(List~int~ ids) List~bool~
- testArray() bool[]
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('13: should render a simple class diagram with css classes applied', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10 {
- int[] id
- List~int~ ids
- test(List~int~ ids) List~bool~
- testArray() bool[]
- }
-
- class Class10:::exClass2
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('14: should render a simple class diagram with css classes applied directly', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10:::exClass2 {
- int[] id
- List~int~ ids
- test(List~int~ ids) List~bool~
- testArray() bool[]
- }
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
- imgSnapshotTest(
- `
- classDiagram
- class Class10
- class Class20
-
- cssClass "Class10, Class20" exClass2
- class Class20:::exClass2
- `,
- {}
- );
- cy.get('svg');
- });
-
- it('16: should render multiple class diagrams', () => {
- imgSnapshotTest(
- [
- `
- classDiagram
- Class01 "1" <|--|> "*" AveryLongClass : Cool
- <<interface>> Class01
- Class03 "1" *-- "*" Class04
- Class05 "1" o-- "many" Class06
- Class07 "1" .. "*" Class08
- Class09 "1" --> "*" C2 : Where am i?
- Class09 "*" --* "*" C3
- Class09 "1" --|> "1" Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 "1" <--> "*" C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- `
- classDiagram
- Class01 "1" <|--|> "*" AveryLongClass : Cool
- <<interface>> Class01
- Class03 "1" *-- "*" Class04
- Class05 "1" o-- "many" Class06
- Class07 "1" .. "*" Class08
- Class09 "1" --> "*" C2 : Where am i?
- Class09 "*" --* "*" C3
- Class09 "1" --|> "1" Class07
- Class07 : equals()
- Class07 : Object[] elementData
- Class01 : size()
- Class01 : int chimp
- Class01 : int gorilla
- Class08 "1" <--> "*" C2: Cool label
- class Class10 {
- <<service>>
- int id
- test()
- }
- `,
- ],
- {}
- );
- cy.get('svg');
- });
-
- // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
- // renderGraph(
- // `
- // classDiagram
- // Class01 <|-- AveryLongClass : Cool
- // Class01 : size()
- // Class01 : int chimp
- // Class01 : int gorilla
- // Class01 : -int privateChimp
- // Class01 : +int publicGorilla
- // Class01 : #int protectedMarmoset
- // `,
- // { class: { useMaxWidth: true } }
- // );
- // cy.get('svg')
- // .should((svg) => {
- // expect(svg).to.have.attr('width', '100%');
- // const height = parseFloat(svg.attr('height'));
- // expect(height).to.be.within(332, 333);
- // // expect(svg).to.have.attr('height', '218');
- // const style = svg.attr('style');
- // expect(style).to.match(/^max-width: [\d.]+px;$/);
- // const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
- // // use within because the absolute value can be slightly different depending on the environment ±5%
- // expect(maxWidthValue).to.be.within(203, 204);
- // });
- // });
-
- // it('18: should render a class diagram when useMaxWidth is false', () => {
- // renderGraph(
- // `
- // classDiagram
- // Class01 <|-- AveryLongClass : Cool
- // Class01 : size()
- // Class01 : int chimp
- // Class01 : int gorilla
- // Class01 : -int privateChimp
- // Class01 : +int publicGorilla
- // Class01 : #int protectedMarmoset
- // `,
- // { class: { useMaxWidth: false } }
- // );
- // cy.get('svg')
- // .should((svg) => {
- // const width = parseFloat(svg.attr('width'));
- // // use within because the absolute value can be slightly different depending on the environment ±5%
- // expect(width).to.be.within(100, 101);
- // const height = parseFloat(svg.attr('height'));
- // expect(height).to.be.within(332, 333);
- // // expect(svg).to.have.attr('height', '332');
- // // expect(svg).to.not.have.attr('style');
- // });
- // });
-});
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe('Class diagram', () => {
+ it('1: should render a simple class diagram', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ 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()
+ }
+ `,
+ { logLevel: 1 }
+ );
+ cy.get('svg');
+ });
+
+ it('2: should render a simple class diagrams with cardinality', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 "1" <|--|> "*" AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 "1" *-- "*" Class04
+ Class05 "1" o-- "many" Class06
+ Class07 "1" .. "*" Class08
+ Class09 "1" --> "*" C2 : Where am i?
+ Class09 "*" --* "*" C3
+ Class09 "1" --|> "1" Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 "1" <--> "*" C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('3: should render a simple class diagram with different visibilities', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ <<interface>> Class01
+ Class01 : -privateMethod()
+ Class01 : +publicMethod()
+ Class01 : #protectedMethod()
+ Class01 : -int privateChimp
+ Class01 : +int publicGorilla
+ Class01 : #int protectedMarmoset
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('4: should render a simple class diagram with comments', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ %% this is a comment
+ Class01 <|-- AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 *-- Class04
+ Class05 o-- Class06
+ Class07 .. Class08
+ Class09 --> C2 : Where am i?
+ Class09 --* C3
+ Class09 --|> Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('5: should render a simple class diagram with abstract method', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class01 : someMethod()*
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('6: should render a simple class diagram with static method', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ Class01 : someMethod()$
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('7: should render a simple class diagram with Generic class', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class01~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('8: should render a simple class diagram with Generic class and relations', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01~T~ <|-- AveryLongClass : Cool
+ Class03~T~ *-- Class04~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('9: should render a simple class diagram with clickable link', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01~T~ <|-- AveryLongClass : Cool
+ Class03~T~ *-- Class04~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ link Class01 "google.com" "A Tooltip"
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('10: should render a simple class diagram with clickable callback', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01~T~ <|-- AveryLongClass : Cool
+ Class03~T~ *-- Class04~T~
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 <--> C2: Cool label
+ class Class10~T~ {
+ <<service>>
+ int id
+ test()
+ }
+ callback Class01 "functionCall" "A Tooltip"
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('11: should render a simple class diagram with return type on method', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10~T~ {
+ int[] id
+ test(int[] ids) bool
+ testArray() bool[]
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('12: should render a simple class diagram with generic types', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10~T~ {
+ int[] id
+ List~int~ ids
+ test(List~int~ ids) List~bool~
+ testArray() bool[]
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('13: should render a simple class diagram with css classes applied', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10 {
+ int[] id
+ List~int~ ids
+ test(List~int~ ids) List~bool~
+ testArray() bool[]
+ }
+
+ class Class10:::exClass2
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('14: should render a simple class diagram with css classes applied directly', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10:::exClass2 {
+ int[] id
+ List~int~ ids
+ test(List~int~ ids) List~bool~
+ testArray() bool[]
+ }
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ class Class10
+ class Class20
+
+ cssClass "Class10, Class20" exClass2
+ class Class20:::exClass2
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('16: should render multiple class diagrams', () => {
+ imgSnapshotTest(
+ [
+ `
+ classDiagram
+ Class01 "1" <|--|> "*" AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 "1" *-- "*" Class04
+ Class05 "1" o-- "many" Class06
+ Class07 "1" .. "*" Class08
+ Class09 "1" --> "*" C2 : Where am i?
+ Class09 "*" --* "*" C3
+ Class09 "1" --|> "1" Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 "1" <--> "*" C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ `
+ classDiagram
+ Class01 "1" <|--|> "*" AveryLongClass : Cool
+ <<interface>> Class01
+ Class03 "1" *-- "*" Class04
+ Class05 "1" o-- "many" Class06
+ Class07 "1" .. "*" Class08
+ Class09 "1" --> "*" C2 : Where am i?
+ Class09 "*" --* "*" C3
+ Class09 "1" --|> "1" Class07
+ Class07 : equals()
+ Class07 : Object[] elementData
+ Class01 : size()
+ Class01 : int chimp
+ Class01 : int gorilla
+ Class08 "1" <--> "*" C2: Cool label
+ class Class10 {
+ <<service>>
+ int id
+ test()
+ }
+ `,
+ ],
+ {}
+ );
+ cy.get('svg');
+ });
+
+ // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
+ // renderGraph(
+ // `
+ // classDiagram
+ // Class01 <|-- AveryLongClass : Cool
+ // Class01 : size()
+ // Class01 : int chimp
+ // Class01 : int gorilla
+ // Class01 : -int privateChimp
+ // Class01 : +int publicGorilla
+ // Class01 : #int protectedMarmoset
+ // `,
+ // { class: { useMaxWidth: true } }
+ // );
+ // cy.get('svg')
+ // .should((svg) => {
+ // expect(svg).to.have.attr('width', '100%');
+ // const height = parseFloat(svg.attr('height'));
+ // expect(height).to.be.within(332, 333);
+ // // expect(svg).to.have.attr('height', '218');
+ // const style = svg.attr('style');
+ // expect(style).to.match(/^max-width: [\d.]+px;$/);
+ // const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
+ // // use within because the absolute value can be slightly different depending on the environment ±5%
+ // expect(maxWidthValue).to.be.within(203, 204);
+ // });
+ // });
+
+ // it('18: should render a class diagram when useMaxWidth is false', () => {
+ // renderGraph(
+ // `
+ // classDiagram
+ // Class01 <|-- AveryLongClass : Cool
+ // Class01 : size()
+ // Class01 : int chimp
+ // Class01 : int gorilla
+ // Class01 : -int privateChimp
+ // Class01 : +int publicGorilla
+ // Class01 : #int protectedMarmoset
+ // `,
+ // { class: { useMaxWidth: false } }
+ // );
+ // cy.get('svg')
+ // .should((svg) => {
+ // const width = parseFloat(svg.attr('width'));
+ // // use within because the absolute value can be slightly different depending on the environment ±5%
+ // expect(width).to.be.within(100, 101);
+ // const height = parseFloat(svg.attr('height'));
+ // expect(height).to.be.within(332, 333);
+ // // expect(svg).to.have.attr('height', '332');
+ // // expect(svg).to.not.have.attr('style');
+ // });
+ // });
+});
diff --git a/cypress/integration/rendering/conf-and-directives.spec.js b/cypress/e2e/rendering/conf-and-directives.spec.js
similarity index 100%
rename from cypress/integration/rendering/conf-and-directives.spec.js
rename to cypress/e2e/rendering/conf-and-directives.spec.js
diff --git a/cypress/integration/rendering/current.spec.js b/cypress/e2e/rendering/current.spec.js
similarity index 100%
rename from cypress/integration/rendering/current.spec.js
rename to cypress/e2e/rendering/current.spec.js
diff --git a/cypress/integration/rendering/debug.spec.js b/cypress/e2e/rendering/debug.spec.js
similarity index 100%
rename from cypress/integration/rendering/debug.spec.js
rename to cypress/e2e/rendering/debug.spec.js
diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/e2e/rendering/erDiagram.spec.js
similarity index 100%
rename from cypress/integration/rendering/erDiagram.spec.js
rename to cypress/e2e/rendering/erDiagram.spec.js
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/e2e/rendering/flowchart-v2.spec.js
similarity index 100%
rename from cypress/integration/rendering/flowchart-v2.spec.js
rename to cypress/e2e/rendering/flowchart-v2.spec.js
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/e2e/rendering/flowchart.spec.js
similarity index 100%
rename from cypress/integration/rendering/flowchart.spec.js
rename to cypress/e2e/rendering/flowchart.spec.js
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/e2e/rendering/gantt.spec.js
similarity index 100%
rename from cypress/integration/rendering/gantt.spec.js
rename to cypress/e2e/rendering/gantt.spec.js
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/e2e/rendering/gitGraph.spec.js
similarity index 100%
rename from cypress/integration/rendering/gitGraph.spec.js
rename to cypress/e2e/rendering/gitGraph.spec.js
diff --git a/cypress/integration/rendering/info.spec.js b/cypress/e2e/rendering/info.spec.js
similarity index 100%
rename from cypress/integration/rendering/info.spec.js
rename to cypress/e2e/rendering/info.spec.js
diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/e2e/rendering/journey.spec.js
similarity index 100%
rename from cypress/integration/rendering/journey.spec.js
rename to cypress/e2e/rendering/journey.spec.js
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/e2e/rendering/pie.spec.js
similarity index 100%
rename from cypress/integration/rendering/pie.spec.js
rename to cypress/e2e/rendering/pie.spec.js
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/e2e/rendering/requirement.spec.js
similarity index 100%
rename from cypress/integration/rendering/requirement.spec.js
rename to cypress/e2e/rendering/requirement.spec.js
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/e2e/rendering/sequencediagram.spec.js
similarity index 100%
rename from cypress/integration/rendering/sequencediagram.spec.js
rename to cypress/e2e/rendering/sequencediagram.spec.js
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/e2e/rendering/stateDiagram-v2.spec.js
similarity index 100%
rename from cypress/integration/rendering/stateDiagram-v2.spec.js
rename to cypress/e2e/rendering/stateDiagram-v2.spec.js
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/e2e/rendering/stateDiagram.spec.js
similarity index 100%
rename from cypress/integration/rendering/stateDiagram.spec.js
rename to cypress/e2e/rendering/stateDiagram.spec.js
diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/e2e/rendering/theme.spec.js
similarity index 100%
rename from cypress/integration/rendering/theme.spec.js
rename to cypress/e2e/rendering/theme.spec.js
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
deleted file mode 100644
index 2c98a54ad..000000000
--- a/cypress/plugins/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-// module.exports = (on, config) => {
-// // `on` is used to hook into various events Cypress emits
-// // `config` is the resolved Cypress config
-// }
-
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-require('@applitools/eyes-cypress')(module);
-
-module.exports = (on, config) => {
- addMatchImageSnapshotPlugin(on, config);
- // copy any needed variables from process.env to config.env
- config.env.useAppli = process.env.USE_APPLI ? true : false;
- config.env.codeBranch = process.env.APPLI_BRANCH;
-
- // do not forget to return the changed config object!
- return config;
-};
-
-require('@applitools/eyes-cypress')(module);
diff --git a/docs/Configuration.md b/docs/Configuration.md
index b121f3a06..dcb50a5a9 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -5,7 +5,7 @@ Configuration is the second half of Mermaid, after deployment. Together Deployme
This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
-## Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
+## Configuration Section in the [Live Editor](https://mermaid.live/).
## The `initialize()` call, for when Mermaid is called via an API, or through a