Merge branch 'master' into develop

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');

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
+      `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -126,6 +126,17 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'left' } }
       );
     });
+    it('should render multi-line notes aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am left aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'left' } }
+      );
+    });
     it('should render notes aligned to the right when configured', () => {
       imgSnapshotTest(
         `
@@ -137,6 +148,37 @@ context('Sequence diagram', () => {
         { sequence: { noteAlign: 'right' } }
       );
     });
+    it('should render multi-line notes aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am right aligned<br>but also<br>multiline
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'right' } }
+      );
+    });
+    it('should render multi-line messages aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'left' } }
+      );
+    });
+    it('should render multi-line messages aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short<br>but also<br>multiline
+        Bob->>Alice: Short as well<br>and also<br>multiline
+      `,
+        { sequence: { messageAlign: 'right' } }
+      );
+    });
   });
   context('auth width scaling', () => {
     it('should render long actor descriptions', () => {

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' }
+    );
+  });
 });

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).<br/>
  <br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[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)
 

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)
 

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  `<title>` and `<desc>` tag in the SVG.**
+
+Let us take a look at the following example with a flowchart diagram:
+
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+      accDescr: Flow chart of the decision making process
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
+
+
+### Multi-line Accessibility title/description
+You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then mutltile lines, followed by a closing `}`.
+
+`accTitle: My single line title value` (***single line format***)
+
+vs
+
+`accDescr: {
+  My multi-line description
+  of the diagram
+}` (***multi-line format***)
+
+Let us look at it in the following example, with same flowchart:
+```mermaid-example
+   graph LR
+      accTitle: Big decisions
+
+      accDescr {
+        My multi-line description
+        of the diagram
+      }
+
+      A[Hard] -->|Text| B(Round)
+      B --> C{Decision}
+      C -->|One| D[Result 1]
+
+```
+See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+
+![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
+
+### Sample Code Snippet for other diagram types
+
+#### Sequence Diagram
+
+```mermaid-example
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+#### Class Diagram
+
+```mermaid-example
+   classDiagram
+      accTitle: My Class Diagram
+      accDescr: My Class Diagram Description
+
+      Vehicle <|-- Car
+```
+
+#### State Diagram
+
+```mermaid-example
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
+
+       s1 --> s2
+
+```
+
+#### Entity Relationship Diagram
+
+```mermaid-example
+   erDiagram
+      accTitle: My Entity Relationship Diagram
+      accDescr: My Entity Relationship Diagram Description
+
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+#### User Journey Diagram
+
+  ```mermaid-example
+    journey
+        accTitle: My User Journey Diagram
+        accDescr: My User Journey Diagram Description
+
+        title My working day
+        section Go to work
+          Make tea: 5: Me
+          Go upstairs: 3: Me
+          Do work: 1: Me, Cat
+        section Go home
+          Go downstairs: 5: Me
+          Sit down: 5: Me
+
+  ```
+
+#### Gantt Chart
+
+```mermaid-example
+   gantt
+      accTitle: My Gantt Chart Accessibility Title
+      accDescr: My Gantt Chart Accessibility Description
+
+    title A Gantt Diagram
+    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
+
+```
+
+#### Pie Chart
+
+```mermaid-example
+   pie
+      accTitle: My Pie Chart Accessibility Title
+      accDescr: My Pie Chart Accessibility Description
+
+    title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
+
+```
+#### Requirement Diagram
+
+  ```mermaid-example
+    requirementDiagram
+        accTitle: My Requirement Diagram
+        accDescr: My Requirement Diagram Description
+
+         requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req
+
+  ```
+
+#### Gitgraph
+
+  ```mermaid-example
+    gitGraph
+        accTitle: My Gitgraph Accessibility Title
+        accDescr: My Gitgraph Accessibility Description
+
+       commit
+       commit
+       branch develop
+       checkout develop
+       commit
+       commit
+       checkout main
+       merge develop
+       commit
+       commit
+
+  ```
+
+
+
+
+
+
+

docs/c4c.md

@@ -260,7 +260,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 
     Container_Boundary(api, "API Application") {
-        Component(sign, "Sign In Controller", "MVC Rest Controlle", "Allows users to sign in to the internet banking system")
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
         Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
         Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
         Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
@@ -364,4 +364,4 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     UpdateRelStyle(api, db2, $offsetX="-40", $offsetY="-20")
     UpdateRelStyle(db, db2, $offsetY="-10")
 
-```
+```

docs/flowchart.md

@@ -612,12 +612,14 @@ The icons are accessed via the syntax fa:#icon class name#.
 
 ```mermaid-example
 flowchart TD
-    B["fa:fa-twitter for peace"]
+    B["fab:fa-twitter for peace"]
     B-->C[fa:fa-ban forbidden]
     B-->D(fa:fa-spinner);
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
+?> Mermaid is now only compatible with Font Awesome versions 4 and 5. Check that you are using the correct version of Font Awesome.
+
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 

docs/index.html

@@ -17,6 +17,7 @@
     />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
     <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.3/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>

docs/stateDiagram.md

@@ -249,3 +249,13 @@ stateDiagram-v2
 ## Styling
 
 Styling of the a state diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/state.scss
+
+## Spaces in state names
+
+Spaces can be added to a state by defining it at the top and referencing the acronym later.
+
+```mermaid-example
+stateDiagram-v2
+    Yswsii: Your state with spaces in it
+    [*] --> Yswsii
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.1.3",
+  "version": "9.1.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",
@@ -62,7 +62,7 @@
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
-    "dompurify": "2.3.8",
+    "dompurify": "2.3.10",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
     "moment-mini": "^2.24.0",
@@ -87,11 +87,11 @@
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-jsdoc": "^39.1.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-markdown": "^2.2.1",
+    "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",

src/dagre-wrapper/createLabel.js

@@ -2,6 +2,7 @@ import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
 import { sanitizeText, evaluate } from '../diagrams/common/common';
+import { decodeEntities } from '../mermaidAPI';
 
 const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
 
@@ -52,7 +53,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
     log.info('vertexText' + vertexText);
     const node = {
       isNode,
-      label: vertexText.replace(
+      label: decodeEntities(vertexText).replace(
         /fa[lrsb]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),

src/diagrams/git/gitGraphRenderer.js

@@ -15,6 +15,8 @@ const commitType = {
   CHERRY_PICK: 4,
 };
 
+const THEME_COLOR_LIMIT = 8;
+
 let branchPos = {};
 let commitPos = {};
 let lanes = [];
@@ -117,13 +119,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
         circle.attr('width', 20);
         circle.attr(
           'class',
-          'commit ' +
-            commit.id +
-            ' commit-highlight' +
-            branchPos[commit.branch].index +
-            ' ' +
-            typeClass +
-            '-outer'
+          `commit ${commit.id} commit-highlight${
+            branchPos[commit.branch].index % THEME_COLOR_LIMIT
+          } ${typeClass}-outer`
         );
         gBullets
           .append('rect')
@@ -133,13 +131,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('width', 12)
           .attr(
             'class',
-            'commit ' +
-              commit.id +
-              ' commit' +
-              branchPos[commit.branch].index +
-              ' ' +
-              typeClass +
-              '-inner'
+            `commit ${commit.id} commit${
+              branchPos[commit.branch].index % THEME_COLOR_LIMIT
+            } ${typeClass}-inner`
           );
       } else if (commit.type === commitType.CHERRY_PICK) {
         gBullets
@@ -147,21 +141,21 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('cx', x)
           .attr('cy', y)
           .attr('r', 10)
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('circle')
           .attr('cx', x - 3)
           .attr('cy', y + 2)
           .attr('r', 2.75)
           .attr('fill', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('circle')
           .attr('cx', x + 3)
           .attr('cy', y + 2)
           .attr('r', 2.75)
           .attr('fill', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('line')
           .attr('x1', x + 3)
@@ -169,7 +163,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('x2', x)
           .attr('y2', y - 5)
           .attr('stroke', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
         gBullets
           .append('line')
           .attr('x1', x - 3)
@@ -177,13 +171,16 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('x2', x)
           .attr('y2', y - 5)
           .attr('stroke', '#fff')
-          .attr('class', 'commit ' + commit.id + ' ' + typeClass);
+          .attr('class', `commit ${commit.id} ${typeClass}`);
       } else {
         const circle = gBullets.append('circle');
         circle.attr('cx', x);
         circle.attr('cy', y);
         circle.attr('r', commit.type === commitType.MERGE ? 9 : 10);
-        circle.attr('class', 'commit ' + commit.id + ' commit' + branchPos[commit.branch].index);
+        circle.attr(
+          'class',
+          `commit ${commit.id} commit${branchPos[commit.branch].index % THEME_COLOR_LIMIT}`
+        );
         if (commit.type === commitType.MERGE) {
           const circle2 = gBullets.append('circle');
           circle2.attr('cx', x);
@@ -191,7 +188,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
           circle2.attr('r', 6);
           circle2.attr(
             'class',
-            'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index
+            `commit ${typeClass} ${commit.id} commit${
+              branchPos[commit.branch].index % THEME_COLOR_LIMIT
+            }`
           );
         }
         if (commit.type === commitType.REVERSE) {
@@ -200,7 +199,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
             .attr('d', `M ${x - 5},${y - 5}L${x + 5},${y + 5}M${x - 5},${y + 5}L${x + 5},${y - 5}`)
             .attr(
               'class',
-              'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index
+              `commit ${typeClass} ${commit.id} commit${
+                branchPos[commit.branch].index % THEME_COLOR_LIMIT
+              }`
             );
         }
       }
@@ -430,7 +431,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
   const arrow = svg
     .append('path')
     .attr('d', lineDef)
-    .attr('class', 'arrow arrow' + colorClassNum);
+    .attr('class', 'arrow arrow' + (colorClassNum % THEME_COLOR_LIMIT));
 };
 
 const drawArrows = (svg, commits) => {
@@ -460,7 +461,7 @@ const drawBranches = (svg, branches) => {
   const gitGraphConfig = getConfig().gitGraph;
   const g = svg.append('g');
   branches.forEach((branch, index) => {
-    let adjustIndexForTheme = index >= 8 ? index - 8 : index;
+    const adjustIndexForTheme = index % THEME_COLOR_LIMIT;
 
     const pos = branchPos[branch.name].pos;
     const line = g.append('line');

src/diagrams/sequence/sequenceRenderer.js

@@ -229,7 +229,7 @@ const drawNote = function (elem, noteModel) {
   textObj.fontWeight = conf.noteFontWeight;
   textObj.anchor = conf.noteAlign;
   textObj.textMargin = conf.noteMargin;
-  textObj.valign = conf.noteAlign;
+  textObj.valign = 'center';
 
   let textElem = drawText(g, textObj);
 
@@ -342,7 +342,7 @@ const drawMessage = function (diagram, msgModel, lineStarty, diagObj) {
   textObj.fontSize = conf.messageFontSize;
   textObj.fontWeight = conf.messageFontWeight;
   textObj.anchor = conf.messageAlign;
-  textObj.valign = conf.messageAlign;
+  textObj.valign = 'center';
   textObj.textMargin = conf.wrapPadding;
   textObj.tspan = false;
 

src/diagrams/sequence/svgDraw.js

@@ -193,7 +193,7 @@ export const drawText = function (elem, textData) {
       case 'start':
         textData.x = Math.round(textData.x + textData.textMargin);
         textData.anchor = 'start';
-        textData.dominantBaseline = 'text-after-edge';
+        textData.dominantBaseline = 'middle';
         textData.alignmentBaseline = 'middle';
         break;
       case 'middle':
@@ -207,7 +207,7 @@ export const drawText = function (elem, textData) {
       case 'end':
         textData.x = Math.round(textData.x + textData.width - textData.textMargin);
         textData.anchor = 'end';
-        textData.dominantBaseline = 'text-before-edge';
+        textData.dominantBaseline = 'middle';
         textData.alignmentBaseline = 'middle';
         break;
     }

src/utils.spec.js

@@ -1,7 +1,9 @@
 import utils from './utils';
 import assignWithDepth from './assignWithDepth';
 import detectType from './diagram-api/detectType';
-import './diagram-api/diagram-orchestration';
+import addDiagrams from './diagram-api/diagram-orchestration';
+
+addDiagrams();
 
 describe('when assignWithDepth: should merge objects within objects', function () {
   it('should handle simple, depth:1 types (identity)', function () {