Merge pull request mermaid-js#1171 from mermaid-js/feature/Issue-1146…

…_Dashed_Line_For_Class_Diagram Feature/issue 1146 dashed line for class diagram
joebordes · Jan 5, 2020 · f573560 · f573560
2 parents 851d2f2 + 96fc0d0
commit f573560
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
@@ -14,6 +14,8 @@ describe('Class diagram', () => {
       Class09 --> C2 : Where am i?
       Class09 --* C3
       Class09 --|> Class07
+      Class12 <|.. Class08
+      Class11 ..>Class12
       Class07 : equals()
       Class07 : Object[] elementData
       Class01 : size()
@@ -29,7 +31,7 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {}
+      {logLevel : 1}
     );
     cy.get('svg');
   });

diff --git a/docs/classDiagram.md b/docs/classDiagram.md
@@ -169,22 +169,26 @@ A relationship is a general term covering the specific types of logical connecti
 There are different types of relations defined for classes under UML which are currently supported:
 
 Type | Description
----  | ---
-<\|--| Inheritance
-*--  | Composition
-o--  | Aggregation
--->  | Association
---   | Link 
+---   | ---
+<\|-- | Inheritance
+*--   | Composition
+o--   | Aggregation
+-->   | Association
+--    | Link (Solid) 
+..>   | Dependency
+..\|> | Realization
+..    | Link (Dashed)
 
-<!--- TODO ..>  Dependency--->
 ```
 classDiagram
 classA <|-- classB
 classC *-- classD
 classE o-- classF
 classG <-- classH
-classI <.. classJ
-classK .. classL
+classI -- classJ
+classK <.. classL
+classM <|.. classN
+classO .. classP
 
 ```
 
@@ -194,30 +198,36 @@ classA <|-- classB
 classC *-- classD
 classE o-- classF
 classG <-- classH
-classI <.. classJ
-classK .. classL
+classI -- classJ
+classK <.. classL
+classM <|.. classN
+classO .. classP
 
 ```
-We can use the arrowheads in opposite directions as well :
+We can use the labels to describe nature of relation between two classes. Also, arrowheads can be used in opposite directions as well :
 ```
 classDiagram
-classA --|> classB
-classC --* classD
-classE --o classF
-classG <--> classH
-classI ..> classJ
-classK .. classL
+classA --|> classB : Inheritance
+classC --* classD : Composition
+classE --o classF : Aggregation
+classG --> classH : Association
+classI -- classJ : Link(Solid)
+classK ..> classL : Dependency
+classM ..|> classN : Realization
+classO .. classP : Link(Dashed)
 
 ```
 
 ```mermaid
 classDiagram
-classA --|> classB
-classC --* classD
-classE --o classF
-classG <--> classH
-classI ..> classJ
-classK .. classL
+classA --|> classB : Inheritance
+classC --* classD : Composition
+classE --o classF : Aggregation
+classG --> classH : Association
+classI -- classJ : Link(Solid)
+classK ..> classL : Dependency
+classM ..|> classN : Realization
+classO .. classP : Link(Dashed)
 
 
 ```

diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js
@@ -310,6 +310,16 @@ describe('class diagram, ', function () {
 
       parser.parse(str);
     });
+    it('should handle dashed relation definition of different types and directions', function () {
+      const str =
+        'classDiagram\n' +
+        'Class11 <|.. Class12\n' +
+        'Class13 <.. Class14\n' +
+        'Class15 ..|> Class16\n' +
+        'Class17 ..> Class18\n' +
+        'Class19 .. Class20';
+      parser.parse(str);
+    });
   });
 
   describe('when fetching data from a classDiagram graph it', function () {

diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
@@ -183,6 +183,9 @@ const drawEdge = function(elem, path, relation) {
     url = url.replace(/\)/g, '\\)');
   }
 
+  if (relation.relation.lineType == 1) {
+    svgPath.attr('class', 'relation dashed-line');
+  }
   if (relation.relation.type1 !== 'none') {
     svgPath.attr(
       'marker-start',

diff --git a/src/themes/class.scss b/src/themes/class.scss
@@ -38,6 +38,10 @@ g.classGroup line {
   fill: none;
 }
 
+.dashed-line{
+  stroke-dasharray: 3;
+}
+
 @mixin composition {
   fill: $nodeBorder;
   stroke: $nodeBorder;