Merge pull request #8 from mermaid-js/develop

merge from base

.github/pull_request_template.md

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

cypress/integration/rendering/classDiagram.spec.js

@@ -164,7 +164,31 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('5: should render a simple class diagram with Generic class', () => {
+  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
@@ -184,7 +208,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('6: should render a simple class diagram with Generic class and relations', () => {
+  it('8: should render a simple class diagram with Generic class and relations', () => {
     imgSnapshotTest(
       `
     classDiagram

cypress/integration/rendering/flowchart.spec.js

@@ -396,4 +396,61 @@ 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 } }
+    );
+  });
+  it('17: Chaining of nodes', () => {
+    imgSnapshotTest(
+      `graph LR
+        a --> b --> c
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+  it('18: Multiple nodes and chaining in one statement', () => {
+    imgSnapshotTest(
+      `graph LR
+        a --> b c--> d
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
+  it('19: Multiple nodes and chaining in one statement', () => {
+    imgSnapshotTest(
+      `graph TD
+      A[ h ] -- hello --> B[" test "]:::exClass C --> D;
+      classDef exClass background:#bbb,border:1px solid red;
+      `,
+      { 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/integration/rendering/sequencediagram.spec.js

@@ -2,8 +2,8 @@
 
 import { imgSnapshotTest } from '../../helpers/util';
 
-context('Aliasing', () => {
-  it('should render a simple sequence diagrams', () => {
+context('Sequence diagram', () => {
+  it('should render a simple sequence diagram', () => {
     imgSnapshotTest(
       `
       sequenceDiagram
@@ -32,6 +32,23 @@ context('Aliasing', () => {
       {}
     );
   });
+  it('should handle different line breaks', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      participant 1 as multiline<br>using #lt;br#gt;
+      participant 2 as multiline<br/>using #lt;br/#gt;
+      participant 3 as multiline<br />using #lt;br /#gt;
+      1->>2: multiline<br>using #lt;br#gt;
+      note right of 2: multiline<br>using #lt;br#gt;
+      2->>3: multiline<br/>using #lt;br/#gt;
+      note right of 3: multiline<br/>using #lt;br/#gt;
+      3->>1: multiline<br />using #lt;br /#gt;
+      note right of 1: multiline<br />using #lt;br /#gt;
+    `,
+      {}
+    );
+  });
   context('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(

cypress/platform/current.html

@@ -16,11 +16,16 @@
   </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%">
+        graph TB
+          A --> B
+          A ==> C
+          A .-> D
+          A === E
+          A -.- F
+          D -- Hello --> a
+          D-- text including R TD space --xb
       </div>
 </div>
   <script src="./mermaid.js"></script>
@@ -29,9 +34,9 @@ <h1>info below</h1>
         theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 3,
+        logLevel: 0,
         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

@@ -300,6 +300,31 @@
 classDef someclass fill:#f96;
 class A someclass;
   </div>
+  <div class="mermaid">
+    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;
+  </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/>
 
@@ -331,6 +356,18 @@
 Alice -->> John: Parallel message 2
 end
   </div>
+  <div class="mermaid">
+    sequenceDiagram
+    participant 1 as multiline<br>using #lt;br#gt;
+    participant 2 as multiline<br/>using #lt;br/#gt;
+    participant 3 as multiline<br />using #lt;br /#gt;
+    1->>2: multiline<br>using #lt;br#gt;
+    note right of 2: multiline<br>using #lt;br#gt;
+    2->>3: multiline<br/>using #lt;br/#gt;
+    note right of 3: multiline<br/>using #lt;br/#gt;
+    3->>1: multiline<br />using #lt;br /#gt;
+    note right of 1: multiline<br />using #lt;br /#gt;
+  </div>
 
   <hr/>
 

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/flowchart.md

@@ -78,6 +78,17 @@ graph LR
     id1(This is the text in the box)
 ```
 
+### A stadium-shaped node
+
+```
+graph LR
+    id1([This is the text in the box])
+```
+```mermaid
+graph LR
+    id1([This is the text in the box])
+```
+
 ### A node in the form of a circle
 
 ```

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/mermaid@8.4.3/dist/mermaid.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/mermaid@8.4.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),

docs/usage.md

@@ -159,14 +159,13 @@ The main idea of the API is to be able to call a render function with the graph
 will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
 fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
 
-To do this, include mermaidAPI on your web website instead of mermaid.js. The example below show an outline of how this
-could be used. The example just logs the resulting svg to the javascript console.
+The example below show an outline of how this could be used. The example just logs the resulting svg to the javascript console.
 
 ```html
-<script src="mermaidAPI.js"></script>
+<script src="mermaid.js"></script>
 
 <script>
-    mermaidAPI.initialize({
+    mermaid.mermaidAPI.initialize({
         startOnLoad:false
     });
     $(function(){
@@ -178,7 +177,7 @@ could be used. The example just logs the resulting svg to the javascript console
         };
 
         var graphDefinition = 'graph TB\na-->b';
-        var graph = mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
+        var graph = mermaid.mermaidAPI.render('graphDiv', graphDefinition, insertSvg);
     });
 </script>
 ```

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": [