Merge branch 'release/8.4.1'

.eslintignore

@@ -0,0 +1 @@
+**/*.spec.js

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "node": true
   },
   "parserOptions": {
       "ecmaFeatures": {
@@ -10,7 +11,7 @@
       },
       "sourceType": "module"
   },
-  "extends": ["prettier"],
+  "extends": ["prettier", "eslint:recommended"],
   "plugins": ["prettier"],
   "rules": {
     "prettier/prettier": ["error"]

.github/workflows/release-preview-publish.yml

@@ -33,8 +33,8 @@ jobs:
         echo $VERSION
         npm version --no-git-tag-version --allow-same-version $VERSION
         npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
-        npm set registry https://npm.pkg.github.com/knsv
-        json -I -f package.json -e 'this.name="@knsv/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
-        json -I -f package.json -e 'this.repository="git://github.com/knsv/mermaid"' # Repo url needs to have a specific format too
+        npm set registry https://npm.pkg.github.com/mermaid-js
+        json -I -f package.json -e 'this.name="@mermaid-js/mermaid"' # Package name needs to be set to a scoped one because GitHub registry requires this
+        json -I -f package.json -e 'this.repository="git://github.com/mermaid-js/mermaid"' # Repo url needs to have a specific format too
         npm publish
 

.gitignore

@@ -10,3 +10,5 @@ dist/*.map
 yarn-error.log
 .npmrc
 token
+
+package-lock.json

CONTRIBUTING.md

@@ -86,7 +86,7 @@ Finally, if it is not in the documentation, no one will know about it and then *
 
 The docs are located in the docs folder and are ofc written in markdown. Just pick the right section and start typing. If you want to add to the structure as in adding a new section and new file you do that via the _navbar.md.
 
-The changes in master is reflected in http://knsv.github.io/mermaid/ once released the updates are commited to https://mermaidjs.github.io/#/
+The changes in master is reflected in http://mermaid-js.github.io/mermaid/ once released the updates are commited to https://mermaid-js.github.io/#/
 
 ## Last words
 

cypress/integration/rendering/current.spec.js

@@ -0,0 +1,20 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('State diagram', () => {
+  it('should render a flowchart full of circles', () => {
+    imgSnapshotTest(
+      `
+    stateDiagram
+    State1: The state with a note
+    note right of State1
+      Important information! You\ncan write
+      notes with multiple lines...
+      Here is another line...
+      And another line...
+    end note
+    `,
+      {}
+    );
+  });
+});

cypress/integration/rendering/flowchart.spec.js

@@ -2,7 +2,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('Flowcart', () => {
-  it('should render a simple flowchart no htmlLabels', () => {
+  it('1: should render a simple flowchart no htmlLabels', () => {
     imgSnapshotTest(
       `graph TD
       A[Christmas] -->|Get money| B(Go shopping)
@@ -14,7 +14,7 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
-  it('should render a simple flowchart with htmlLabels', () => {
+  it('2: should render a simple flowchart with htmlLabels', () => {
     imgSnapshotTest(
       `graph TD
       A[Christmas] -->|Get money| B(Go shopping)
@@ -26,7 +26,7 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: true } }
     );
   });
-  it('should render a simple flowchart with line breaks', () => {
+  it('3: should render a simple flowchart with line breaks', () => {
     imgSnapshotTest(
       `
     graph TD
@@ -40,7 +40,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => {
+  it('4: should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => {
     imgSnapshotTest(
       `
     graph TD
@@ -55,7 +55,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should style nodes via a class.', () => {
+  it('4: should style nodes via a class.', () => {
     imgSnapshotTest(
       `
     graph TD
@@ -71,7 +71,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render a flowchart full of circles', () => {
+  it('5: should render a flowchart full of circles', () => {
     imgSnapshotTest(
       `
     graph LR
@@ -99,7 +99,7 @@ describe('Flowcart', () => {
       {}
     );
   });
-  it('should render a flowchart full of icons', () => {
+  it('6: should render a flowchart full of icons', () => {
     imgSnapshotTest(
       `
     graph TD
@@ -170,15 +170,15 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render labels with numbers at the start', () => {
+  it('7: should render labels with numbers at the start', () => {
     imgSnapshotTest(
       `
     graph TB;subgraph "number as labels";1;end;
       `,
       {}
     );
   });
-  it('should render subgraphs', () => {
+  it('8: should render subgraphs', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -190,7 +190,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render subgraphs with a title startign with a digit', () => {
+  it('9: should render subgraphs with a title startign with a digit', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -202,7 +202,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render styled subgraphs', () => {
+  it('10: should render styled subgraphs', () => {
     imgSnapshotTest(
       `
     graph TB
@@ -237,7 +237,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render a flowchart with ling sames and class definitoins', () => {
+  it('11: should render a flowchart with ling sames and class definitoins', () => {
     imgSnapshotTest(
       `graph LR
       sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@@ -339,7 +339,7 @@ describe('Flowcart', () => {
     );
   });
 
-  it('should render color of styled nodes', () => {
+  it('12: should render color of styled nodes', () => {
     imgSnapshotTest(
       `
       graph LR

cypress/integration/rendering/pie.spec.js

@@ -12,5 +12,29 @@ describe('Pie Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
+  });
+  it('should render a simple pie diagram with long labels', () => {
+    imgSnapshotTest(
+      `
+      pie title NETFLIX
+         "Time spent looking for movie" : 90
+         "Time spent watching it" : 10
+        `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple pie diagram with capital letters for labels', () => {
+    imgSnapshotTest(
+      `
+      pie title What Voldemort doesn't have?
+         "FRIENDS" : 2
+         "FAMILY" : 3
+         "NOSE" : 45
+        `,
+      {}
+    );
+    cy.get('svg');
   });
 });

cypress/integration/rendering/stateDiagram.spec.js

@@ -13,6 +13,30 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a long descriptions instead of id when available', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+
+      [*] --> S1
+      state "Some long name" as S1
+      `,
+      { logLevel: 0 }
+    );
+    cy.get('svg');
+  });
+  it('should render a long descriptions with additional descriptions', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+
+      [*] --> S1
+      state "Some long name" as S1: The description
+      `,
+      { logLevel: 0 }
+    );
+    cy.get('svg');
+  });
   it('should render a single state with short descr', () => {
     imgSnapshotTest(
       `
@@ -24,6 +48,20 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render a transition descrions with new lines', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram
+
+      [*] --> S1
+      S1 --> S2: long line using<br/>should work
+      S1 --> S3: long line using <br>should work
+      S1 --> S4: long line using \\nshould work
+      `,
+      { logLevel: 0 }
+    );
+    cy.get('svg');
+  });
   it('should render a state with a note', () => {
     imgSnapshotTest(
       `

cypress/platform/e2e.html

@@ -1,7 +1,7 @@
 <html>
   <head>
     <script src="/e2e.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
     <style>
       body {
         /* font-family: 'Mansalva', cursive;
@@ -17,6 +17,9 @@
         --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
         --mermaid-font-family: '"Lucida Console", Monaco, monospace';
       } */
+      svg {
+        border: 2px solid darkred;
+      }
     </style>
   </head>
   <body>

docs/examples.md

@@ -1,3 +1,27 @@
+## Basic Pie Chart
+
+```
+pie title NETFLIX
+         "Time spent looking for movie" : 90
+         "Time spent watching it" : 10
+```
+``` mermaid
+pie title NETFLIX
+         "Time spent looking for movie" : 90
+         "Time spent watching it" : 10
+```
+```
+pie title What Voldemort doesn't have?
+         "FRIENDS" : 2
+         "FAMILY" : 3
+         "NOSE" : 45
+```
+```mermaid
+pie title What Voldemort doesn't have?
+         "FRIENDS" : 2
+         "FAMILY" : 3
+         "NOSE" : 45
+```         
 ## Basic sequence diagram
 
 ```

docs/pie.md

@@ -1,11 +1,12 @@
 # Pie chart diagrams
 
 > A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
+-Wikipedia
 
 Mermaid can render Pie Chart diagrams.
 
 ```
-pie
+pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15 
@@ -19,17 +20,34 @@ pie title Pets adopted by volunteers
 
 
 ## Syntax
+Drawing a pie chart is really simple in mermaid. 
+- Start with `pie` keyword to begin the diagram
+- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
+- Followed by dataSet
+    - `label` for a section in the pie diagram within `" "` quotes.
+    - Followed by `:` semi-colon as separator
+    - Followed by `positive numeric value` (supported upto two decimal places) 
+
+[pie]
+     [title] [titlevalue]  (OPTIONAL)  
+      "[datakey1]" : [dataValue1]  
+      "[datakey2]" : [dataValue2]  
+      "[datakey3]" : [dataValue3]  
+      .  
+      .
 
+## Example 
 ```
 pie
-    "DataKey1" : Positive numeric value (upto two decimal places)
+    title Key elements in Product X
     "Calcium" : 42.96
     "Potassium" : 50.05
     "Magnesium" : 10.01
     "Iron" :  5
 ```
 ```mermaid
-pie title Key elements in Product X
+pie 
+title Key elements in Product X
     "Calcium" : 42.96
     "Potassium" : 50.05
     "Magnesium" : 25.01