Merge pull request #4 from mermaid-js/develop

sync my fork

.github/pull_request_template.md

@@ -0,0 +1,7 @@
+## Summary
+Brief description about the content of your PR.
+
+## Design Descisions
+Describe the way your implementation works or what design descisions you made if applicable.
+
+Resolves #<your issue id here>

.github/release-drafter.yml

@@ -10,6 +10,8 @@ categories:
   - title: '🧰 Maintenance'
     label: 'Type: Other'
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
+sort-by: title
+sort-direction: ascending
 branches:
   - develop
 exclude-labels:

cypress/integration/rendering/classDiagram.spec.js

@@ -163,4 +163,69 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('5: should render a simple class diagram with abstract method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()*
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('6: should render a simple class diagram with static method', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : someMethod()$
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('7: should render a simple class diagram with Generic class', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    class Class01~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('8: should render a simple class diagram with Generic class and relations', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+    Class01~T~ <|-- AveryLongClass : Cool
+    Class03~T~ *-- Class04~T~
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class08 <--> C2: Cool label
+      class Class10~T~ {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -396,4 +396,36 @@ describe('Flowcart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+  it('15: Render Stadium shape', () => {
+    imgSnapshotTest(
+      ` graph TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;`,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+  it('16: Render Stadium shape', () => {
+    imgSnapshotTest(
+      `graph LR
+        A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
+        C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
+        E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
+        A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
+        C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
+        E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
+        linkStyle 0 stroke:DarkGray,stroke-width:2px
+        linkStyle 1 stroke:DarkGray,stroke-width:2px
+        linkStyle 2 stroke:DarkGray,stroke-width:2px
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -38,4 +38,20 @@ describe('Sequencediagram', () => {
       {}
     );
   });
+  it('Multiple dependencies syntax', () => {
+    imgSnapshotTest(
+      `
+      gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title Adding GANTT diagram to mermaid
+      excludes weekdays 2014-01-10
+
+      apple :a, 2017-07-20, 1w
+      banana :crit, b, 2017-07-23, 1d
+      cherry :active, c, after b a, 1d
+      `,
+      {}
+    );
+  });
 });

cypress/platform/current.html

@@ -5,7 +5,7 @@
       rel="stylesheet"
     />
     <style>
-      body {background: black}
+      body {background: white}
       h1 { color: white;}
       .arrowheadPath {fill: red;}
 
@@ -16,22 +16,29 @@
   </head>
   <body>
     <h1>info below</h1>
-    <div style="display: flex;">
-      <div class="mermaid">graph TD
-        A ==> B
-        A --> C
-        A -.-> D
+    <div style="display: flex;width: 100%; height: 100%">
+      <div class="mermaid" style="width: 100%; height: 100%">gantt
+        dateFormat  YYYY-MM-DD
+        axisFormat  %d/%m
+        title Adding GANTT diagram to mermaid
+        excludes weekdays 2014-01-10
+
+        apple :a, 2017-07-20, 1w
+        banana :crit, b, 2017-07-23, 1d
+        cherry :active, c, after b a, 1d
+
+
       </div>
 </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        theme: 'dark',
+        // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 3,
         flowchart: { curve: 'linear', "htmlLabels": false },
-        gantt: { axisFormat: '%m/%d/%Y' },
+        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
       });

dist/index.html

@@ -313,6 +313,18 @@
     classDef someclass fill:#f96;
     class A someclass;
   </div>
+  <div class="mermaid">
+    graph LR
+    A1[Multi<br>Line] -->|Multi<br>Line| B1(Multi<br>Line)
+    C1[Multi<br/>Line] -->|Multi<br/>Line| D1(Multi<br/>Line)
+    E1[Multi<br />Line] -->|Multi<br />Line| F1(Multi<br />Line)
+    A2[Multi<br>Line] -->|Multi<br>Line| B2(Multi<br>Line)
+    C2[Multi<br/>Line] -->|Multi<br/>Line| D2(Multi<br/>Line)
+    E2[Multi<br />Line] -->|Multi<br />Line| F2(Multi<br />Line)
+    linkStyle 0 stroke:DarkGray,stroke-width:2px
+    linkStyle 1 stroke:DarkGray,stroke-width:2px
+    linkStyle 2 stroke:DarkGray,stroke-width:2px
+  </div>
 
   <hr/>
 
@@ -431,6 +443,43 @@
   size()
 }
   </div>
+
+  <div class="mermaid">
+    classDiagram
+    class Class01~T~
+    Class01 : #size()
+    Class01 : -int chimp
+    Class01 : +int gorilla
+    class Class10~T~ {
+      &lt;&lt;service&gt;&gt;
+      int id
+      size()
+    }
+      </div>
+
+      <div class="mermaid">
+        classDiagram
+        Class01~T~ <|-- AveryLongClass : Cool
+        &lt;&lt;interface&gt;&gt; Class01
+        Class03~T~ "0" *-- "0..n" Class04
+        Class05 "1" o-- "many" Class06
+        Class07~T~ .. Class08
+        Class09 "many" --> "1" C2  : Where am i?
+        Class09 "0" --* "1..n" C3
+        Class09 --|> Class07
+        Class07 : equals()
+        Class07 : Object[] elementData
+        Class01 : #size()
+        Class01 : -int chimp
+        Class01 : +int gorilla
+        Class08 <--> C2: Cool label
+        class Class10 {
+          &lt;&lt;service&gt;&gt;
+          int id
+          size()
+        }
+          </div>
+
   <div class="mermaid">
     stateDiagram
       State1

docs/README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/knsv/mermaid.svg?branch=master)](https://travis-ci.org/knsv/mermaid)
+[![Build Status](https://travis-ci.org/mermaid-js/mermaid.svg?branch=master)](https://travis-ci.org/mermaid-js/mermaid)
 [![Coverage Status](https://coveralls.io/repos/github/knsv/mermaid/badge.svg?branch=master)](https://coveralls.io/github/knsv/mermaid?branch=master)
 [![Join the chat at https://gitter.im/knsv/mermaid](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/knsv/mermaid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 

docs/classDiagram.md

@@ -105,17 +105,10 @@ Naming convention: a class name should be composed of alphanumeric (unicode allo
 
 UML provides mechanisms to represent class members, such as attributes and methods, and additional information about them.
 
-#### Visibility
-To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member's name, but is it optional:
+Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The ones with `()` are treated as functions/methods, and others as attributes.
 
-- `+`	Public
-- `-`	Private
-- `#`	Protected
-- `~`	Package
 
-Mermaid distinguishes between attributes and functions/methods based on if the **parenthesis** `()` are present or not. The one with `()` are treated as functions/methods, and others as attributes.
-
-There are two ways to define the members of a class, and regardless of the whichever syntax is used to define the members, the output will still be same. The two different ways are :
+There are two ways to define the members of a class, and regardless of whichever syntax is used to define the members, the output will still be same. The two different ways are :
 - Associate a member of a class using **:** (colon) followed by member name, useful to define one member at a time. For example: 
 
  ```
@@ -125,7 +118,7 @@ There are two ways to define the members of a class, and regardless of the which
   BankAccount : +deposit(amount)
   BankAccount : +withdrawl(amount)
   ```
-  ```mermaid
+  ```  mermaid
     classDiagram
     class BankAccount
     BankAccount : +String owner
@@ -150,7 +143,22 @@ class BankAccount{
         +BigDecimal balance
         +deposit(amount)
         +withdrawl(amount)
-}```
+}
+```
+
+
+#### Visibility
+To specify the visibility of a class member (i.e. any attribute or method), these notations may be placed before the member's name, but it is optional:
+
+- `+`	Public
+- `-`	Private
+- `#`	Protected
+- `~`	Package
+
+>_note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
+> - `*` Abstract e.g.: `someAbstractMethod()*`
+> - `$` Static e.g.: `someStaticMethod()$`
+
 
 ## Defining Relationship
 A relationship is a general term covering the specific types of logical connections found on class and object diagrams. 

docs/gantt.md

@@ -87,6 +87,20 @@ gantt
        Add another diagram to demo page    :48h
    ```
 
+It is possible to set multiple depenendenies separated by space:
+```
+    gantt
+        apple :a, 2017-07-20, 1w
+        banana :crit, b, 2017-07-23, 1d
+        cherry :active, c, after b a, 1d
+```
+```
+    gantt
+        apple :a, 2017-07-20, 1w
+        banana :crit, b, 2017-07-23, 1d
+        cherry :active, c, after b a, 1d
+```
+
 ### Title
 
 Tbd

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/[email protected].3/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/[email protected].4/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),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.4.3",
+  "version": "8.4.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [
@@ -84,7 +84,8 @@
     "puppeteer": "^1.17.0",
     "sass-loader": "^7.1.0",
     "start-server-and-test": "^1.10.6",
-    "webpack": "^4.27.1",
+    "terser-webpack-plugin": "^2.2.2",
+    "webpack": "^4.41.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.4.1",
     "webpack-node-externals": "^1.7.2",