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

Feature/issue 1146 dashed line for class diagram

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');
   });

docs/classDiagram.md

@@ -174,17 +174,21 @@ Type | Description
 *--   | Composition
 o--   | Aggregation
 -->   | Association
---   | Link 
+--    | Link (Solid) 
+..>   | Dependency
+..\|> | Realization
+..    | Link (Dashed)
 
-<!--- TODO ..>  Dependency--->
 ```
 classDiagram
 classA <|-- classB
 classC *-- classD
 classE o-- classF
 classG <-- classH
-classI <.. classJ
+classI -- classJ
-classK .. classL
+classK <.. classL
+classM <|.. classN
+classO .. classP
 
 ```
 
@@ -194,30 +198,36 @@ classA <|-- classB
 classC *-- classD
 classE o-- classF
 classG <-- classH
-classI <.. classJ
+classI -- classJ
-classK .. classL
+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
+classA --|> classB : Inheritance
-classC --* classD
+classC --* classD : Composition
-classE --o classF
+classE --o classF : Aggregation
-classG <--> classH
+classG --> classH : Association
-classI ..> classJ
+classI -- classJ : Link(Solid)
-classK .. classL
+classK ..> classL : Dependency
+classM ..|> classN : Realization
+classO .. classP : Link(Dashed)
 
 ```
 
 ```mermaid
 classDiagram
-classA --|> classB
+classA --|> classB : Inheritance
-classC --* classD
+classC --* classD : Composition
-classE --o classF
+classE --o classF : Aggregation
-classG <--> classH
+classG --> classH : Association
-classI ..> classJ
+classI -- classJ : Link(Solid)
-classK .. classL
+classK ..> classL : Dependency
+classM ..|> classN : Realization
+classO .. classP : Link(Dashed)
 
 
 ```

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 () {

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',

src/themes/class.scss

@@ -38,6 +38,10 @@ g.classGroup line {
   fill: none;
 }
 
+.dashed-line{
+  stroke-dasharray: 3;
+}
+
 @mixin composition {
   fill: $nodeBorder;
   stroke: $nodeBorder;