Merge pull request #21 from mermaid-js/develop

merge from base

.github/workflows/build.yml

@@ -45,20 +45,20 @@ jobs:
       run: |
         yarn test --coverage
 
-    - name: Upload Test Results
-      uses: coverallsapp/github-action@v1.0.1
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-        parallel: true
+    #- name: Upload Test Results
+    #  uses: coverallsapp/github-action@v1.0.1
+    #  with:
+    #    github-token: ${{ secrets.GITHUB_TOKEN }}
+    #    parallel: true
 
     # - name: Run E2E Tests
     #   run: yarn e2e
     #   env:
     #     PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
     #     CYPRESS_CACHE_FOLDER: .cache/Cypress
 
-    - name: Post Upload Test Results
-      uses: coverallsapp/github-action@master
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-        parallel-finished: true
+    #- name: Post Upload Test Results
+    #  uses: coverallsapp/github-action@master
+    #  with:
+    #    github-token: ${{ secrets.GITHUB_TOKEN }}
+    #    parallel-finished: true

README.md

@@ -12,10 +12,14 @@ __mermaid is a Javascript based diagramming and charting tool. It generates diag
 Check out the list of [Integrations and Usages of Mermaid](https://github.com/mermaid-js/mermaid/blob/develop/docs/integrations.md)
 
 For more information and help in getting started, please view our [documentation](http://mermaid-js.github.io/mermaid/) and start simplifying yours. Alternatively, you can also play with our [live editor](https://mermaidjs.github.io/mermaid-live-editor/).
-<!-- </Main description> --> 
+<!-- </Main description> -->
 
 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
 
+## New diagram
+
+This version comes with a new diagram type, user journey diagrams.
+
 ## New diagrams in 8.4
 
 With version 8.4 class diagrams have got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram type, state diagrams.
@@ -166,7 +170,7 @@ Crash --> [*]
 pie
 "Dogs" : 386
 "Cats" : 85
-"Rats" : 15 
+"Rats" : 15
 </pre></td>
     <td align="center">
         <img src="https://raw.githubusercontent.com/mermaid-js/mermaid/master/img/gray-pie.png" />
@@ -182,9 +186,33 @@ pie
     <td colspan="2" align="center"><i>Coming soon!</i></td>
 </tr>
 <!-- </Git> -->
+<!-- <Journey> -->
+<tr><td colspan=2 align="center">
+    <b>User Journey</b><br />
+    [<a href="http://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+</td></tr>
+<tr>
+  <td>
+  <pre>
+  journey
+    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: 3: Me
+</pre></td>
+  <td align="center">
+    <img alt="User Journey Diagram" src="img/gray-user-journey.png" />
+  </td>
+</tr>
+<!-- </Journey> -->
+
 </table>
 
-## Related projects 
+## Related projects
 
 - [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
 - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)

cypress/integration/rendering/erDiagram.spec.js

@@ -88,4 +88,17 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render an ER diagram with blank or empty labels', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        BOOK }|..|{ AUTHOR : ""
+        BOOK }|..|{ GENRE : " "
+        AUTHOR }|..|{ GENRE : "  "
+      `,
+      {logLevel : 1}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/journey.spec.js

@@ -0,0 +1,31 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('User journey diagram', () => {
+  it('Simple test', () => {
+    imgSnapshotTest(
+      `journey
+title Adding journey diagram functionality to mermaid
+section Order from website
+    `,
+      {}
+    );
+  });
+
+  it('should render a user journey chart', () => {
+    imgSnapshotTest(
+      `
+    journey
+    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: 3: Me
+      `,
+      {}
+    );
+  });
+});

cypress/integration/rendering/sequencediagram.spec.js

@@ -52,6 +52,138 @@ context('Sequence diagram', () => {
       {}
     );
   });
+  it('should render loops with a slight margin', () => {
+    imgSnapshotTest(
+      `
+        sequenceDiagram
+        Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        loop Loopy
+            Bob->>Alice: Pasten
+        end      `,
+      {}
+    );
+  });
+  context('font settings', () => {
+    it('should render different note fonts when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I should have bigger fonts
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteFontSize: 18, noteFontFamily: 'Arial' } }
+      );
+    });
+    it('should render different message fonts when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { messageFontSize: 18, messageFontFamily: 'Arial' } }
+      );
+    });
+    it('should render different actor fonts when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { actorFontSize: 18, actorFontFamily: 'Arial' } }
+      );
+    });
+    it('should render notes aligned to the left when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am left aligned
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'left' } }
+      );
+    });
+    it('should render notes aligned to the right when configured', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        note left of Alice: I am right aligned
+        Bob->>Alice: Short as well
+      `,
+        { sequence: { noteAlign: 'right' } }
+      );
+    });
+  });
+  context('auth width scaling', () => {
+    it('should render long actor descriptions', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
+      `,
+        {}
+      );
+    });
+    it('should render long notes left of actor', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Hola
+        Note left of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
+    it('should render long notes right of actor', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Hola
+        Note right of Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
+    it('should render long notes over actor', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Hola
+        Note over Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
+    it('should render long messages from an actor to the left to one to the right', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
+    it('should render long messages from an actor to the right to one to the left', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        Bob->>Alice: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+      `,
+        {}
+      );
+    });
+  });
   context('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(
@@ -162,7 +294,7 @@ context('Sequence diagram', () => {
         John->>Bob: How about you?
         Bob-->>John: Jolly good!
       `,
-      {sequence: { actorMargin: 50, showSequenceNumbers: true }}
+        { sequence: { actorMargin: 50, showSequenceNumbers: true } }
       );
     });
     it('should render autonumber when autonumber keyword is used', () => {
@@ -179,7 +311,7 @@ context('Sequence diagram', () => {
         John->>Bob: How about you?
         Bob-->>John: Jolly good!
       `,
-      {}
+        {}
       );
     });
     it('should render autonumber with different line breaks', () => {
@@ -192,7 +324,7 @@ context('Sequence diagram', () => {
         John-->>Alice: Hi Alice,<br />I can hear you!
         John-->>Alice: I feel great!
       `,
-      {}
+        {}
       );
     });
   });