Merge pull request #17 from mermaid-js/develop

Merge

.github/workflows/build.yml

@@ -30,11 +30,11 @@ jobs:
         yarn config set cache-folder $GITHUB_WORKSPACE/.cache/yarn
         yarn install --frozen-lockfile
       env:
-        CYPRESS_CACHE_FOLDER: ../../.cache/Cypress
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
 
     - name: Run Build
       run: yarn build
-      
+
     - name: Upload Build as Artifact
       uses: actions/upload-artifact@v1
       with:
@@ -44,21 +44,21 @@ jobs:
     - name: Run Unit Tests
       run: |
         yarn test --coverage
-        
+
     - 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: 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
+        parallel-finished: true

cypress/integration/rendering/flowchart.spec.js

@@ -512,7 +512,7 @@ describe('Flowchart', () => {
     );
   });
 
-  it('24.1: Keep node label text (if already defined) when a style is applied', () => {
+  it('24: Keep node label text (if already defined) when a style is applied', () => {
     imgSnapshotTest(
       `graph LR
       A(( )) -->|step 1| B(( ))
@@ -524,7 +524,7 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
-it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
+it('25: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
     imgSnapshotTest(
       `graph TB
       TITLE["Link Click Events<br>(click the nodes below)"]
@@ -544,11 +544,15 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
       );
   });
 
-  it('25: Set node text color according to style when html labels are enabled', () => {
+  it('26: Set text color of nodes and links according to styles when html labels are enabled', () => {
     imgSnapshotTest(
       `graph LR
-      A[red<br>text] --> B(blue<br>text)
-      C[/red<br/>text/] --> D{blue<br/>text}
+      A[red<br>text] -->|red<br>text| B(blue<br>text)
+      C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+      E{{default<br />style}} -->|default<br />style| F([default<br />style])
+      linkStyle default color:Sienna;
+      linkStyle 0 color:red;
+      linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
       style A color:red;
       style B color:blue;
       style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
@@ -560,11 +564,15 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
     );
   });
 
-  it('26: Set node text color according to style when html labels are disabled', () => {
+  it('27: Set text color of nodes and links according to styles when html labels are disabled', () => {
     imgSnapshotTest(
       `graph LR
-      A[red<br>text] --> B(blue<br>text)
-      C[/red<br/>text/] --> D{blue<br/>text}
+      A[red<br>text] -->|red<br>text| B(blue<br>text)
+      C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+      E{{default<br />style}} -->|default<br />style| F([default<br />style])
+      linkStyle default color:Sienna;
+      linkStyle 0 color:red;
+      linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
       style A color:red;
       style B color:blue;
       style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
@@ -575,4 +583,27 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
       { flowchart: { htmlLabels: false } }
     );
   });
+  it('30: Possibility to style text color of nodes and subgraphs as well as apply classes to subgraphs', () => {
+    imgSnapshotTest(
+      `graph LR
+      subgraph id1 [title is set]
+        A-->B
+      end
+      subgraph id2 [title]
+        E
+      end
+
+      B-->C
+
+      subgraph id3
+      C-->D
+      end
+      class id3,id2,A redBg;
+      class id3,A whiteTxt;
+      classDef redBg fill:#622;
+      classDef whiteTxt color: white;
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -96,36 +96,36 @@ describe('Sequencediagram', () => {
       gantt
       excludes weekdays 2017-01-10
       title Projects Timeline
-  
+
       section asdf
           specs :done, :ps, 2019-05-10, 50d
           Plasma      :pc, 2019-06-20, 60d
           Rollup  :or, 2019-08-20, 50d
-      
+
       section CEL
-              
+
           plasma-chamber      :done, :pc, 2019-05-20, 60d
           Plasma Implementation (Rust)      :por, 2019-06-20, 120d
           Predicates (Atomic Swap)      :pred, 2019-07-20, 60d
-      
-      section DEX 💰
-          
+
+      section DEX
+
           History zkSNARK  :hs, 2019-08-10, 40d
           Exit           :vs, after hs, 60d
           PredicateSpec          :ps, 2019-09-1, 20d
           PlasmaIntegration     :pi, after ps,40d
-      
-      
-      section Events 🏁
-      
+
+
+      section Events
+
       ETHBoston :done, :eb, 2019-09-08, 3d
       DevCon :active, :dc, 2019-10-08, 3d
-      
-      section Plasma Calls & updates ✨
+
+      section Plasma Calls & updates
           OVM      :ovm, 2019-07-12, 120d
       Plasma call 26 :pc26, 2019-08-21, 1d
       Plasma call 27 :pc27, 2019-09-03, 1d
-      Plasma call 28 :pc28, 2019-09-17, 1d 
+      Plasma call 28 :pc28, 2019-09-17, 1d
         `,
       {}
     );

cypress/integration/rendering/sequencediagram.spec.js

@@ -149,5 +149,38 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render autonumber when configured with such', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>John: Hello John, how are you?
+        loop Healthcheck
+            John->>John: Fight against hypochondria
+        end
+        Note right of John: Rational thoughts!
+        John-->>Alice: Great!
+        John->>Bob: How about you?
+        Bob-->>John: Jolly good!
+      `,
+      {sequence: { actorMargin: 50, showSequenceNumbers: true }}
+      );
+    });
+    it('should render autonumber when autonumber keyword is used', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        autonumber
+        Alice->>John: Hello John, how are you?
+        loop Healthcheck
+            John->>John: Fight against hypochondria
+        end
+        Note right of John: Rational thoughts!
+        John-->>Alice: Great!
+        John->>Bob: How about you?
+        Bob-->>John: Jolly good!
+      `,
+      {}
+      );
+    });
   });
 });

cypress/platform/current.html

@@ -4,8 +4,12 @@
       href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
       rel="stylesheet"
     />
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
-      body {background: white}
+      body {
+        background: white;
+        font-family: 'Noto Sans SC', sans-serif;
+        }
       h1 { color: white;}
       .arrowheadPath {fill: red;}
 
@@ -16,10 +20,15 @@
     <h1>info below</h1>
     <div style="display: flex;width: 100%; height: 100%">
       <div class="mermaid" style="width: 100%; height: 100%">
-        stateDiagram
-
-        NotFound --> NotFound: Status
-              NotFound --> NotFound: Stop
+        sequenceDiagram
+        Alice->>John: Hello John, how are you?
+        loop Healthcheck
+            John->>John: Fight against hypochondria
+        end
+        Note right of John: Rational thoughts!
+        John-->>Alice: Great!
+        John->>Bob: How about you?
+        Bob-->>John: Jolly good!
 
       </div>
 </div>
@@ -32,8 +41,9 @@ <h1>info below</h1>
         logLevel: 0,
         flowchart: { curve: 'linear', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorMargin: 50 },
+        sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
+        fontFamily: '"Noto Sans SC", sans-serif'
       });
     </script>
     </script>

cypress/platform/e2e.html

@@ -2,6 +2,7 @@
   <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=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* font-family: 'Mansalva', cursive;*/
@@ -32,7 +33,8 @@
         // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
         // fontFamily: '\"trebuchet ms\", verdana, arial;'
         // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
-        fontFamily: '"Mansalva", cursive'
+        // fontFamily: '"Mansalva", cursive',
+        fontFamily: '"Noto Sans SC", sans-serif'
       });
     </script>
   </body>

dist/index.html

@@ -371,8 +371,12 @@
   <hr/>
   <div class="mermaid">
     graph LR
-    A[red<br>text] --> B(blue<br>text)
-    C[/red<br/>text/] --> D{blue<br/>text}
+    A[red<br>text] -->|red<br>text| B(blue<br>text)
+    C[/red<br/>text/] -->|blue<br/>text| D{blue<br/>text}
+    E{{default<br />style}} -->|default<br />style| F([default<br />style])
+    linkStyle default color:Sienna;
+    linkStyle 0 color:red;
+    linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
     style A color:red;
     style B color:blue;
     style C stroke:#ff0000,fill:#ffcccc,color:#ff0000

docs/flowchart.md

@@ -497,7 +497,7 @@ Instead of ids, the order number of when the link was defined in the graph is us
 defined in the linkStyle statement will belong to the fourth link in the graph:
 
 ```
-linkStyle 3 stroke:#ff3,stroke-width:4px;
+linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 ```
 
 

docs/index.html

@@ -7,7 +7,7 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.6/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.7/dist/mermaid.min.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

docs/sequenceDiagram.md

@@ -282,9 +282,46 @@ sequenceDiagram
     John-->>Alice: Great!
 ```
 
+## sequenceNumbers
+
+It is possiebl to get a sequence number attached to each arrow in a sequence diagram. This can be configured when adding mermaid to the website as shown below:
+```
+    <script>
+      mermaid.initialize({
+        sequence: { showSequenceNumbers: true },
+      });
+    </script>
+```
+
+It can also be be turned on via the diagram code as in the diagram:
+```
+sequenceDiagram
+    autonumber
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+```mermaid
+sequenceDiagram
+    autonumber
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
 ## Styling
 
-Styling of the a sequence diagram is done by defining a number of css classes.  During rendering these classes are extracted from the file located at src/themes/sequence.scss
+Styling of a sequence diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/sequence.scss
 
 ### Classes used
 
@@ -414,5 +451,5 @@ mermaid.sequenceConfig = {
 Param | Description | Default value
 --- | --- | ---
 mirrorActor | Turns on/off the rendering of actors below the diagram as well as above it | false
-bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists. | 1
+bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.6",
+  "version": "8.4.7",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -60,16 +60,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
-    "@babel/preset-env": "^7.2.0",
+    "@babel/preset-env": "^7.8.4",
     "@babel/register": "^7.0.0",
-    "@percy/cypress": "^2.0.1",
+    "@percy/cypress": "*",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.4",
     "coveralls": "^3.0.2",
     "css-loader": "^2.0.1",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "3.4.0",
+    "cypress": "4.0.1",
     "documentation": "^12.0.1",
     "eslint": "^6.3.0",
     "eslint-config-prettier": "^6.3.0",