Merge pull request #14 from mermaid-js/develop

merge from

cypress/integration/rendering/flowchart.spec.js

@@ -374,6 +374,7 @@ describe('Flowchart', () => {
  click B testClick "click test"
  classDef someclass fill:#f96;
  class A someclass;
+ class C someclass;
  `,
  {
  listUrl: false,
@@ -396,6 +397,7 @@ describe('Flowchart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('16: Render Stadium shape', () => {
  imgSnapshotTest(
  ` graph TD
@@ -408,10 +410,13 @@ describe('Flowchart', () => {
  click A "index.html#link-clicked" "link test"
  click B testClick "click test"
  classDef someclass fill:#f96;
- class A someclass;`,
+ class A someclass;
+ class C someclass;
+ `,
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('17: Render multiline texts', () => {
  imgSnapshotTest(
  `graph LR
@@ -428,6 +433,7 @@ describe('Flowchart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('18: Chaining of nodes', () => {
  imgSnapshotTest(
  `graph LR
@@ -436,6 +442,7 @@ describe('Flowchart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('19: Multiple nodes and chaining in one statement', () => {
  imgSnapshotTest(
  `graph LR
@@ -444,6 +451,7 @@ describe('Flowchart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('20: Multiple nodes and chaining in one statement', () => {
  imgSnapshotTest(
  `graph TD
@@ -453,6 +461,7 @@ describe('Flowchart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('21: Render cylindrical shape', () => {
  imgSnapshotTest(
  `graph LR
@@ -474,6 +483,7 @@ describe('Flowchart', () => {
  { flowchart: { htmlLabels: false } }
  );
  });
+
  it('22: Render a simple flowchart with nodeSpacing set to 100', () => {
  imgSnapshotTest(
  `graph TD
@@ -487,6 +497,7 @@ describe('Flowchart', () => {
  { flowchart: { nodeSpacing: 50 } }
  );
  });
+
  it('23: Render a simple flowchart with rankSpacing set to 100', () => {
  imgSnapshotTest(
  `graph TD
@@ -500,4 +511,17 @@ describe('Flowchart', () => {
  { flowchart: { rankSpacing: '100' } }
  );
  });
+
+ it('24: Keep node label text (if already defined) when a style is applied', () => {
+ imgSnapshotTest(
+ `graph LR
+ A(( )) -->|step 1| B(( ))
+ B(( )) -->|step 2| C(( ))
+ C(( )) -->|step 3| D(( ))
+ linkStyle 1 stroke:greenyellow,stroke-width:2px
+ style C fill:greenyellow,stroke:green,stroke-width:4px
+ `,
+ { flowchart: { htmlLabels: false } }
+ );
+ });
 });

cypress/integration/rendering/stateDiagram.spec.js

@@ -121,6 +121,18 @@ describe('State diagram', () => {
  {}
  );
  });
+ it('should handle multiline notes with different line breaks', () => {
+ imgSnapshotTest(
+ `
+ stateDiagram
+ State1
+ note right of State1
+ Line1<br>Line2<br/>Line3<br />Line4<br />Line5
+ end note
+ `,
+ {}
+ );
+ });
 
  it('should render a states with descriptions including multi-line descriptions', () => {
  imgSnapshotTest(

dist/index.html

@@ -289,16 +289,17 @@
  style 456ac9b0d15a8b7f1e71073221059886 fill:#f9f,stroke:#333,stroke-width:4px
  </div>
  <div class="mermaid">
-graph TD
-A[Christmas] -->|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]
-click A "index.html#link-clicked" "link test"
-click B testClick "click test"
-classDef someclass fill:#f96;
-class A someclass;
+ graph TD
+ A[Christmas] -->|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]
+ click A "index.html#link-clicked" "link test"
+ click B testClick "click test"
+ classDef someclass fill:#f96;
+ class A someclass;
+ class C someclass;
  </div>
  <div class="mermaid">
  graph TD
@@ -312,6 +313,7 @@
  click B testClick "click test"
  classDef someclass fill:#f96;
  class A someclass;
+ class C someclass;
  </div>
  <div class="mermaid">
  graph LR
@@ -343,6 +345,14 @@
  linkStyle 1 stroke:DarkGray,stroke-width:2px
  linkStyle 2 stroke:DarkGray,stroke-width:2px
  </div>
+ <div class="mermaid">
+ graph LR
+ A(( )) -->|step 1| B(( ))
+ B(( )) -->|step 2| C(( ))
+ C(( )) -->|step 3| D(( ))
+ linkStyle 1 stroke:greenyellow,stroke-width:2px
+ style C fill:greenyellow,stroke:green,stroke-width:4px
+ </div>
 
  <hr/>
 
@@ -519,45 +529,46 @@
  int id
  size()
  }
-  </div>
+ </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">
+ 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
- </div>
+ </div>
+
+ <hr>
 
- <hr>
- <div class="mermaid">
- stateDiagram
- [*] --> First
- state First {
- [*] --> second
- second --> [*]
- }
- </div>
+ <div class="mermaid">
+ stateDiagram
+ [*] --> First
+ state First {
+ [*] --> second
+ second --> [*]
+ }
+ </div>
  <div class="mermaid">
  stateDiagram
  State1: The state with a note
@@ -567,8 +578,14 @@
  end note
  State1 --> State2
  note left of State2 : This is the note to the left.
- </div>
-
+ </div>
+ <div class="mermaid">
+ stateDiagram
+ State1
+ note right of State1
+ Line1<br>Line2<br/>Line3<br />Line4<br />Line5
+ end note
+ </div>
 
  <script src="./mermaid.js"></script>
  <script>

docs/flowchart.md

@@ -314,6 +314,37 @@ graph LR
  A -- text --> B -- text2 --> C
 ```
 
+It is also possible to declare multiple nodes links in the same line as per below:
+```
+graph LR
+ a --> b & c--> d
+```
+```mermaid
+graph LR
+ a --> b & c--> d
+```
+
+You can then describe dependencies in a very expressive way. Like the onliner below:
+```
+graph TB
+ A & B--> C & D
+```
+```mermaid
+graph TB
+ A & B--> C & D
+```
+If you describe the same diagram using the the basic syntax, it will take four lines. A
+word of warning, one could go overboard with this making the graph harder to read in
+markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little.
+This goes for expressive syntaxes as well.
+```
+graph TB
+ A --> C
+ A --> D
+ B --> C
+ B --> D
+```
+
 
 ## Special characters that break syntax
 
@@ -512,6 +543,19 @@ It is also possible to attach a class to a list of nodes in one statement:
  class nodeId1,nodeId2 className;
 ```
 
+A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
+
+```
+graph LR
+ A:::someclass --> B
+ classDef someclass fill:#f96;
+```
+```mermaid
+graph LR
+ A:::someclass --> B
+ classDef someclass fill:#f96;
+```
+
 
 ### Css classes
 

docs/mermaidAPI.md

@@ -19,15 +19,15 @@ These are the default options which can be overridden with the initialization ca
 <pre>
 mermaid.initialize({
  flowchart:{
-  htmlLabels: false
+ htmlLabels: false
  }
 });
 </pre>
 
 **Example 2:**
 
 <pre>
- <script>
+&lt;script>
  var config = {
  startOnLoad:true,
  flowchart:{
@@ -39,10 +39,10 @@ mermaid.initialize({
  securityLevel:'loose',
  };
  mermaid.initialize(config);
-</script>
-
+&lt;/script>
 </pre>
-A summary of all options and their defaults is found [here](https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults). A description of each option follows below.
+
+A summary of all options and their defaults is found [here][2]. A description of each option follows below.
 
 ## theme
 
@@ -333,3 +333,5 @@ mermaidAPI.initialize({
 </pre>
 
 [1]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#render
+
+[2]: https://github.com/knsv/mermaid/blob/master/docs/mermaidAPI.md#mermaidapi-configuration-defaults

package.json

@@ -1,6 +1,6 @@
 {
  "name": "mermaid",
- "version": "8.4.5",
+ "version": "8.4.6",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "main": "dist/mermaid.core.js",
  "keywords": [

src/diagrams/class/classDb.js

@@ -140,7 +140,7 @@ export const addMembers = function(className, members) {
 
 export const cleanupLabel = function(label) {
  if (label.substring(0, 1) === ':') {
- return label.substr(2).trim();
+ return label.substr(1).trim();
  } else {
  return label.trim();
  }