](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://discord.gg/wwtabKgp8y)
+[](https://discord.gg/AgrbSrBer3)
[](https://twitter.com/mermaidjs_)
<img src=){kind=link}
diff --git a/cSpell.json b/cSpell.json
index 5566b673f..3f605c6d6 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -28,6 +28,7 @@
"codedoc",
"codemia",
"colour",
+ "colours",
"commitlint",
"cpettitt",
"customizability",
diff --git a/cypress/integration/rendering/block.spec.ts b/cypress/integration/rendering/block.spec.ts
new file mode 100644
index 000000000..9d62c642d
--- /dev/null
+++ b/cypress/integration/rendering/block.spec.ts
@@ -0,0 +1,386 @@
+import { imgSnapshotTest } from '../../helpers/util';
+/* eslint-disable no-useless-escape */
+describe('Block diagram', () => {
+ it('BL1: should calculate the block widths', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 2
+ block
+ id2["I am a wide one"]
+ id1
+ end
+ id["Next row"]
+ `
+ );
+ });
+
+ it('BL2: should handle colums statement in sub-blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ id1["Hello"]
+ block
+ columns 3
+ id2["to"]
+ id3["the"]
+ id4["World"]
+ id5["World"]
+ end
+ `,
+ {}
+ );
+ });
+
+ it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ block
+ columns 1
+ id1
+ id2
+ id2.1
+ end
+ id3
+ id4
+ `,
+ {}
+ );
+ });
+
+ it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 1
+ block
+ columns 1
+ block
+ columns 3
+ id1
+ id2
+ id2.1(("XYZ"))
+ end
+ id48
+ end
+ id3
+ `,
+ {}
+ );
+ });
+
+ it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 1
+ block
+ id1
+ id2
+ block
+ columns 1
+ id3("Wider then")
+ id5(("id5"))
+ end
+ end
+ id4
+ `,
+ {}
+ );
+ });
+
+ it('BL6: should handle block arrows and spece statements', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ space:3
+ ida idb idc
+ id1 id2
+ blockArrowId<["Label"]>(right)
+ blockArrowId2<["Label"]>(left)
+ blockArrowId3<["Label"]>(up)
+ blockArrowId4<["Label"]>(down)
+ blockArrowId5<["Label"]>(x)
+ blockArrowId6<["Label"]>(y)
+ blockArrowId6<["Label"]>(x, down)
+ `,
+ {}
+ );
+ });
+
+ it('BL7: should handle different types of edges', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ A space:5
+ A --o B
+ A --> C
+ A --x D
+ `,
+ {}
+ );
+ });
+
+ it('BL8: should handle sub-blocks without columns statements', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 2
+ C A B
+ block
+ D
+ E
+ end
+ `,
+ {}
+ );
+ });
+
+ it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ B space
+ block
+ D
+ end
+ D --> B
+ `,
+ {}
+ );
+ });
+
+ it('BL10: should handle edges from composite blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ B space
+ block BL
+ D
+ end
+ BL --> B
+ `,
+ {}
+ );
+ });
+
+ it('BL11: should handle edges to composite blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ B space
+ block BL
+ D
+ end
+ B --> BL
+ `,
+ {}
+ );
+ });
+
+ it('BL12: edges should handle labels', () => {
+ imgSnapshotTest(
+ `block-beta
+ A
+ space
+ A -- "apa" --> E
+ `,
+ {}
+ );
+ });
+
+ it('BL13: should handle block arrows in different directions', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ space blockArrowId1<["down"]>(down) space
+ blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
+ space blockArrowId5<["up"]>(up) space
+ blockArrowId6<["x"]>(x) space blockArrowId7<["y"]>(y)
+ `,
+ {}
+ );
+ });
+
+ it('BL14: should style statements and class statements', () => {
+ imgSnapshotTest(
+ `block-beta
+ A
+ B
+ classDef blue fill:#66f,stroke:#333,stroke-width:2px;
+ class A blue
+ style B fill:#f9F,stroke:#333,stroke-width:4px
+ `,
+ {}
+ );
+ });
+
+ it('BL15: width alignment - D and E should share available space', () => {
+ imgSnapshotTest(
+ `block-beta
+ block
+ D
+ E
+ end
+ db("This is the text in the box")
+ `,
+ {}
+ );
+ });
+
+ it('BL16: width alignment - C should be as wide as the composite block', () => {
+ imgSnapshotTest(
+ `block-beta
+ block
+ A("This is the text")
+ B
+ end
+ C
+ `,
+ {}
+ );
+ });
+
+ it('BL16: width alignment - blocks shold be equal in width', () => {
+ imgSnapshotTest(
+ `block-beta
+ A("This is the text")
+ B
+ C
+ `,
+ {}
+ );
+ });
+
+ it('BL17: block types 1 - square, rounded and circle', () => {
+ imgSnapshotTest(
+ `block-beta
+ A["square"]
+ B("rounded")
+ C(("circle"))
+ `,
+ {}
+ );
+ });
+
+ it('BL18: block types 2 - odd, diamond and hexagon', () => {
+ imgSnapshotTest(
+ `block-beta
+ A>"rect_left_inv_arrow"]
+ B{"diamond"}
+ C{{"hexagon"}}
+ `,
+ {}
+ );
+ });
+
+ it('BL19: block types 3 - stadium', () => {
+ imgSnapshotTest(
+ `block-beta
+ A(["stadium"])
+ `,
+ {}
+ );
+ });
+
+ it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+ imgSnapshotTest(
+ `block-beta
+ A[/"lean right"/]
+ B[\"lean left"\]
+ C[/"trapezoid"\]
+ D[\"trapezoid alt"/]
+ `,
+ {}
+ );
+ });
+
+ it('BL21: block types 1 - square, rounded and circle', () => {
+ imgSnapshotTest(
+ `block-beta
+ A["square"]
+ B("rounded")
+ C(("circle"))
+ `,
+ {}
+ );
+ });
+
+ it('BL22: sizing - it should be possible to make a block wider', () => {
+ imgSnapshotTest(
+ `block-beta
+ A("rounded"):2
+ B:2
+ C
+ `,
+ {}
+ );
+ });
+
+ it('BL23: sizing - it should be possible to make a composite block wider', () => {
+ imgSnapshotTest(
+ `block-beta
+ block:2
+ A
+ end
+ B
+ `,
+ {}
+ );
+ });
+
+ it('BL24: block in the middle with space on each side', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ space
+ middle["In the middle"]
+ space
+ `,
+ {}
+ );
+ });
+ it('BL25: space and an edge', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 5
+ A space B
+ A --x B
+ `,
+ {}
+ );
+ });
+ it('BL26: block sizes for regular blocks', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ a["A wide one"] b:2 c:2 d
+ `,
+ {}
+ );
+ });
+ it('BL27: composite block with a set width - f should use the available space', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ a:3
+ block:e:3
+ f
+ end
+ g
+ `,
+ {}
+ );
+ });
+ it('BL23: composite block with a set width - f and g should split the available space', () => {
+ imgSnapshotTest(
+ `block-beta
+ columns 3
+ a:3
+ block:e:3
+ f
+ g
+ end
+ h
+ i
+ j
+ `,
+ {}
+ );
+ });
+});
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 73ff4ee00..4abde9d44 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -583,4 +583,106 @@ describe('Gantt diagram', () => {
{}
);
});
+
+ it("should render when there's a semicolon in the title", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title ;Gantt With a Semicolon in the Title
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a semicolon in a section is true", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section ;Section With a Semicolon
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a semicolon in the task data", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section Section
+ ;A task with a semiclon :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in the title", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title #Gantt With a Hashtag in the Title
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in a section is true", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section #Section With a Hashtag
+ A task :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
+
+ it("should render when there's a hashtag in the task data", () => {
+ imgSnapshotTest(
+ `
+ gantt
+ title Gantt Digram
+ dateFormat YYYY-MM-DD
+ section Section
+ #A task with a hashtag :a1, 2014-01-01, 30d
+ Another task :after a1 , 20d
+ section Another
+ Task in sec :2014-01-12 , 12d
+ another task : 24d
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 27e03da9c..306b6c79f 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -375,6 +375,26 @@ context('Sequence diagram', () => {
{}
);
});
+ it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => {
+ imgSnapshotTest(
+ `
+ sequenceDiagram
+ actor Bob
+ Alice->>Bob: Hi Bob
+ Bob->>Alice: Hi Alice
+ `,
+ {}
+ );
+ cy.get('.actor').should('have.class', 'actor-top');
+ cy.get('.actor-man').should('have.class', 'actor-top');
+ cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom');
+ cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom');
+
+ cy.get('.actor').should('have.class', 'actor-bottom');
+ cy.get('.actor-man').should('have.class', 'actor-bottom');
+ cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top');
+ cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top');
+ });
it('should render long notes left of actor', () => {
imgSnapshotTest(
`
@@ -792,6 +812,34 @@ context('Sequence diagram', () => {
});
});
context('links', () => {
+ it('should support actor links', () => {
+ renderGraph(
+ `
+ sequenceDiagram
+ link Alice: Dashboard @ https://dashboard.contoso.com/alice
+ link Alice: Wiki @ https://wiki.contoso.com/alice
+ link John: Dashboard @ https://dashboard.contoso.com/john
+ link John: Wiki @ https://wiki.contoso.com/john
+ Alice->>John: Hello John+ John-->>Alice: Great
day! + `, + { securityLevel: 'loose' } + ); + cy.get('#actor0_popup').should((popupMenu) => { + const style = popupMenu.attr('style'); + expect(style).to.undefined; + }); + cy.get('#root-0').click(); + cy.get('#actor0_popup').should((popupMenu) => { + const style = popupMenu.attr('style'); + expect(style).to.match(/^display: block;$/); + }); + cy.get('#root-0').click(); + cy.get('#actor0_popup').should((popupMenu) => { + const style = popupMenu.attr('style'); + expect(style).to.match(/^display: none;$/); + }); + }); it('should support actor links and properties EXPERIMENTAL: USE WITH CAUTION', () => { //Be aware that the syntax for "properties" is likely to be changed. imgSnapshotTest( diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 020ea8b48..f77f6b0e7 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -17,24 +17,30 @@