:trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/2019) in the category "The most exciting use of technology"!!!**
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
-
+
## About
@@ -36,10 +36,12 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
__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
+title Example flow chart
+accDescripton Flow chart showing examples of node usage
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
@@ -47,6 +49,8 @@ C -->|Two| E[Result 2]
```
```mermaid
flowchart LR
+title Example flow chart
+accDescripton Flow chart showing examples of node usage
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
@@ -54,7 +58,7 @@ C -->|Two| E[Result 2]
```
-## Sequence diagram [docs - live editor]
+### Sequence diagram [docs - live editor]
```
sequenceDiagram
@@ -79,7 +83,7 @@ John->>Bob: How about you?
Bob-->>John: Jolly good!
```
-## Gantt chart [docs - live editor]
+### Gantt chart [docs - live editor]
```
gantt
@@ -102,7 +106,7 @@ gantt
Parallel 4 : des6, after des4, 1d
```
-## Class diagram [docs - live editor]
+### Class diagram [docs - live editor]
```
classDiagram
@@ -141,7 +145,7 @@ class Class10 {
}
```
-## State diagram [docs - live editor]
+### State diagram [docs - live editor]
```
stateDiagram-v2
[*] --> Still
@@ -176,9 +180,9 @@ pie
"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
@@ -202,7 +206,7 @@ pie
Sit down: 3: Me
```
-### Release
+## Release
For those who have the permission to do so:
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index dd521f779..c77c26109 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -291,4 +291,36 @@ describe('Gantt diagram', () => {
{ gantt: { topAxis: true } }
);
});
+
+ it('should render accessibility tags', function () {
+ const expectedTitle = 'Gantt Diagram';
+ const expectedAccDescription = 'Tasks for Q4';
+ renderGraph(
+ `
+ gantt
+ title ${expectedTitle}
+ accDescription ${expectedAccDescription}
+ dateFormat YYYY-MM-DD
+ section Section
+ A task :a1, 2014-01-01, 30d
+ `,
+ {}
+ );
+ cy.get('svg').should((svg) => {
+ const el = svg.get(0);
+ const children = Array.from(el.children);
+
+ const titleEl = children.find(function (node) {
+ return node.tagName === 'title';
+ });
+ const descriptionEl = children.find(function (node) {
+ return node.tagName === 'desc';
+ });
+
+ expect(titleEl).to.exist;
+ expect(titleEl.textContent).to.equal(expectedTitle);
+ expect(descriptionEl).to.exist;
+ expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+ });
+ });
});
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js
index 0bf9014bf..aca990c42 100644
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -46,4 +46,69 @@ describe('Requirement diagram', () => {
);
cy.get('svg');
});
+
+ it('should render accessibility tags', function () {
+ const expectedTitle = 'Gantt Diagram';
+ const expectedAccDescription = 'Tasks for Q4';
+ renderGraph(
+ `
+ requirementDiagram
+ title: ${expectedTitle}
+ accDescription: ${expectedAccDescription}
+
+ requirement test_req {
+ id: 1
+ text: the test text.
+ risk: high
+ verifymethod: test
+ }
+
+ functionalRequirement test_req2 {
+ id: 1.1
+ text: the second test text.
+ risk: low
+ verifymethod: inspection
+ }
+
+ performanceRequirement test_req3 {
+ id: 1.2
+ text: the third test text.
+ risk: medium
+ verifymethod: demonstration
+ }
+
+ element test_entity {
+ type: simulation
+ }
+
+ element test_entity2 {
+ type: word doc
+ docRef: reqs/test_entity
+ }
+
+
+ test_entity - satisfies -> test_req2
+ test_req - traces -> test_req2
+ test_req - contains -> test_req3
+ test_req <- copies - test_entity2
+ `,
+ {}
+ );
+ cy.get('svg').should((svg) => {
+ const el = svg.get(0);
+ const children = Array.from(el.children);
+
+ const titleEl = children.find(function (node) {
+ return node.tagName === 'title';
+ });
+ const descriptionEl = children.find(function (node) {
+ return node.tagName === 'desc';
+ });
+
+ expect(titleEl).to.exist;
+ expect(titleEl.textContent).to.equal(expectedTitle);
+ expect(descriptionEl).to.exist;
+ expect(descriptionEl.textContent).to.equal(expectedAccDescription);
+ });
+ });
});
diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html
index 89689d86e..4bcd10f5d 100644
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -26,24 +26,28 @@