From 9a6b07e1e1e157325c35efad2e80fcf00dcfc50b Mon Sep 17 00:00:00 2001 From: Florian Grandel Date: Thu, 9 Jan 2020 16:24:47 +0100 Subject: [PATCH 01/13] fix(#1192): relation got cut off --- src/diagrams/class/classDb.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js index a20bdd0758..dcb62164c9 100644 --- a/src/diagrams/class/classDb.js +++ b/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(); } From 75890f88fa00e3dd97aeda05805c248059777a97 Mon Sep 17 00:00:00 2001 From: Florian Grandel Date: Thu, 9 Jan 2020 16:44:27 +0100 Subject: [PATCH 02/13] fix(#1193): render multiple relations --- src/diagrams/class/classRenderer.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js index ca4bfba782..072a42e634 100644 --- a/src/diagrams/class/classRenderer.js +++ b/src/diagrams/class/classRenderer.js @@ -505,9 +505,14 @@ export const draw = function(text, id) { logger.info( 'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation) ); - g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { - relation: relation - }); + g.setEdge( + getGraphId(relation.id1), + getGraphId(relation.id2), + { + relation: relation + }, + relation.title || 'DEFAULT' + ); }); dagre.layout(g); g.nodes().forEach(function(v) { From 4dd90e56b186d396bb5d230793ef34140e9b8091 Mon Sep 17 00:00:00 2001 From: Marc Faber Date: Sun, 12 Jan 2020 14:09:24 +0100 Subject: [PATCH 03/13] Add docs and default values for node spacing in mermaidAPI --- docs/mermaidAPI.md | 12 ++++++++++++ src/mermaidAPI.js | 14 ++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md index ce11e5c589..e962ffc705 100644 --- a/docs/mermaidAPI.md +++ b/docs/mermaidAPI.md @@ -105,6 +105,18 @@ Flag for setting whether or not a html tag should be used for rendering labels on the edges. **Default value true**. +### nodeSpacing + +Defines the spacing between nodes on the same level (meaning horizontal spacing for +TB or BT graphs, and the vertical spacing for LR as well as RL graphs). +**Default value 50**. + +### rankSpacing + +Defines the spacing between nodes on different levels (meaning vertical spacing for +TB or BT graphs, and the horizontal spacing for LR as well as RL graphs). +**Default value 50**. + ### curve How mermaid renders curves for flowcharts. Possible values are diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 975b382993..5dfd112776 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -142,6 +142,20 @@ const config = { */ htmlLabels: true, + /** + * Defines the spacing between nodes on the same level (meaning horizontal spacing for + * TB or BT graphs, and the vertical spacing for LR as well as RL graphs). + * **Default value 50**. + */ + nodeSpacing: 50, + + /** + * Defines the spacing between nodes on different levels (meaning vertical spacing for + * TB or BT graphs, and the horizontal spacing for LR as well as RL graphs). + * **Default value 50**. + */ + rankSpacing: 50, + /** * How mermaid renders curves for flowcharts. Possible values are * * basis From 36f9eca33e9de901b10d5c5ee8293df867395c82 Mon Sep 17 00:00:00 2001 From: Marc Faber Date: Sun, 12 Jan 2020 14:38:57 +0100 Subject: [PATCH 04/13] Example 2 is not shown in mermaidAPI configuration section of the docs --- docs/mermaidAPI.md | 12 +++++++----- src/mermaidAPI.js | 6 +++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md index e962ffc705..7fa5304063 100644 --- a/docs/mermaidAPI.md +++ b/docs/mermaidAPI.md @@ -19,7 +19,7 @@ These are the default options which can be overridden with the initialization ca 
 mermaid.initialize({
   flowchart:{
-     htmlLabels: false
+    htmlLabels: false
   }
 });
@@ -27,7 +27,7 @@ mermaid.initialize({ **Example 2:** 
- 
-
+</script>
-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({ [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 diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 5dfd112776..08c0902612 100644 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -52,14 +52,14 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) { * 
  * mermaid.initialize({
  *   flowchart:{
- *      htmlLabels: false
+ *     htmlLabels: false
  *   }
  * });
  *
* * **Example 2:** * 
- *  
+ * </script>
  *
* 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. * From 5493fadc9e6fdedb0136a71768bf956048820587 Mon Sep 17 00:00:00 2001 From: Marc Faber Date: Mon, 13 Jan 2020 22:04:47 +0100 Subject: [PATCH 05/13] #1200 Unify regex for finding
tags throughout mermaid --- .../rendering/stateDiagram.spec.js | 12 +++ dist/index.html | 77 ++++++++++--------- src/diagrams/flowchart/flowRenderer.js | 4 +- src/diagrams/flowchart/flowRenderer.spec.js | 41 +++++++++- src/diagrams/state/shapes.js | 6 +- src/diagrams/state/stateDiagram.spec.js | 10 +++ src/diagrams/state/stateRenderer.js | 2 +- src/mermaid.js | 2 +- src/utils.js | 3 +- 9 files changed, 112 insertions(+), 45 deletions(-) diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js index 0ab68713ef..3e0bf1e1c7 100644 --- a/cypress/integration/rendering/stateDiagram.spec.js +++ b/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
Line2
Line3
Line4
Line5 + end note + `, + {} + ); + }); it('should render a states with descriptions including multi-line descriptions', () => { imgSnapshotTest( diff --git a/dist/index.html b/dist/index.html index 4acc24c4fb..9f5df50d63 100644 --- a/dist/index.html +++ b/dist/index.html @@ -519,45 +519,46 @@ int id size() } - + -
- classDiagram - Class01~T~ <|-- AveryLongClass : Cool - <<interface>> 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 { - <<service>> - int id - size() - } -
+
+ classDiagram + Class01~T~ <|-- AveryLongClass : Cool + <<interface>> 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 { + <<service>> + int id + size() + } +
stateDiagram State1 -
+ + +
-
-
- stateDiagram - [*] --> First - state First { - [*] --> second - second --> [*] - } -
+
+ stateDiagram + [*] --> First + state First { + [*] --> second + second --> [*] + } +
stateDiagram State1: The state with a note @@ -567,8 +568,14 @@ end note State1 --> State2 note left of State2 : This is the note to the left. -
- + +
+ stateDiagram + State1 + note right of State1 + Line1
Line2
Line3
Line4
Line5 + end note +