diff --git a/cypress/integration/other/interaction.spec.js b/cypress/integration/other/interaction.spec.js
index 692a07880..b253d0389 100644
--- a/cypress/integration/other/interaction.spec.js
+++ b/cypress/integration/other/interaction.spec.js
@@ -4,7 +4,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-Function-2').click();
+ cy.get('body').find('g#flowchart-Function-4').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
@@ -12,7 +12,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-FunctionArg-18').click();
+ cy.get('body').find('g#flowchart-FunctionArg-28').click();
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
});
@@ -20,7 +20,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-FunctionArg-22"]').click();
+ cy.get('body').find('g[id="flowchart-FunctionArg-34"]').click();
cy.get('.created-by-click-2').should('have.text', 'Clicked By Flow: ARGUMENT');
});
@@ -28,7 +28,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('#flowchart-URL-3').click();
+ cy.get('body').find('#flowchart-URL-5').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+ cy.get('body').find('g[id="flowchart-2URL-11"]').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -49,7 +49,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-Function-10').click();
+ cy.get('body').find('g#flowchart-Function-16').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
@@ -57,7 +57,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-1Function-14"]').click();
+ cy.get('body').find('g[id="flowchart-1Function-22"]').click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
@@ -65,7 +65,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('#flowchart-URL-11').click();
+ cy.get('body').find('#flowchart-URL-17').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -75,7 +75,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-2URL-15"]').click();
+ cy.get('body').find('g[id="flowchart-2URL-23"]').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -142,7 +142,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-Function-2').click();
+ cy.get('body').find('g#flowchart-Function-4').click();
cy.get('.created-by-click').should('not.exist');
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -151,7 +151,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+ cy.get('body').find('g[id="flowchart-1Function-10"]').click();
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
cy.get('.created-by-click').should('not.exist');
@@ -160,7 +160,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-URL-3').click();
+ cy.get('body').find('g#flowchart-URL-5').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -170,7 +170,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_strict.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-2URL-7"]').click();
+ cy.get('body').find('g[id="flowchart-2URL-11"]').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
@@ -222,7 +222,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-Function-2').click();
+ cy.get('body').find('g#flowchart-Function-4').click();
// cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
cy.get('.created-by-click').should('not.exist');
@@ -231,7 +231,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g[id="flowchart-1Function-6"]').click();
+ cy.get('body').find('g[id="flowchart-1Function-10"]').click();
cy.get('.created-by-click').should('not.exist');
cy.get('.created-by-click').should('not.exist');
@@ -240,7 +240,7 @@ describe('Interaction', () => {
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
- cy.get('body').find('g#flowchart-URL-3').click();
+ cy.get('body').find('g#flowchart-URL-5').click();
cy.location().should((location) => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 4dda2c16e..283a52c67 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -207,4 +207,50 @@ describe('Git Graph diagram', () => {
{}
);
});
+
+ it('12: should render commits for more than 8 branches', () => {
+ imgSnapshotTest(
+ `
+ gitGraph
+ checkout main
+ commit
+ checkout main
+ branch branch1
+ commit
+ checkout main
+ merge branch1
+ branch branch2
+ commit
+ checkout main
+ merge branch2
+ branch branch3
+ commit
+ checkout main
+ merge branch3
+ branch branch4
+ commit
+ checkout main
+ merge branch4
+ branch branch5
+ commit
+ checkout main
+ merge branch5
+ branch branch6
+ commit
+ checkout main
+ merge branch6
+ branch branch7
+ commit
+ checkout main
+ merge branch7
+ branch branch8
+ commit
+ checkout main
+ merge branch8
+ branch branch9
+ commit
+ `,
+ {}
+ );
+ });
});
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index b5ab86440..946b5d31e 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -509,4 +509,16 @@ stateDiagram-v2
expect(svg).to.not.have.attr('style');
});
});
+
+ it('v2 should render a state diagram and set the correct length of the labels', () => {
+ imgSnapshotTest(
+ `
+ stateDiagram-v2
+ [*] --> 1
+ 1 --> 2: test({ foo#colon; 'far' })
+ 2 --> [*]
+ `,
+ { logLevel: 0, fontFamily: 'courier' }
+ );
+ });
});
diff --git a/docs/README.md b/docs/README.md
index 374a54ad9..0ad50e013 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -27,10 +27,11 @@ 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 and 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).
+[Tutorials](./Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md) and [Usage](./docs/usage.md).
+
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index fbb9822ca..09a0fc022 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -25,6 +25,7 @@
- [Mermaid API Configuration](Setup.md)
- [Directives](directives.md)
- [Theming](theming.md)
+ - [Accessibility](accessibility.md)
- [Mermaid CLI](mermaidCLI.md)
- [Advanced usage](n00b-advanced.md)
diff --git a/docs/accessibility.md b/docs/accessibility.md
new file mode 100644
index 000000000..9bac6d836
--- /dev/null
+++ b/docs/accessibility.md
@@ -0,0 +1,214 @@
+# Accessibility Options
+
+**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/accessibility.md)
+
+## Accessibility
+Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.
+
+TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
+
+This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+
+
+## Defining Accessibility Options
+
+### Single line accessibility values
+The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+- `accTitle: "Your Accessibility Title"` or
+- `accDescr: "Your Accessibility Description"`
+
+**When these two options are defined, they will add a coressponding `