diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
index d7fe3cd57..3f022b55d 100644
--- 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
index dc61f79cf..67a83bda0 100644
--- 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
index e5ef55d7a..89bfdc01b 100644
--- 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
index 89096d95f..30e4ae5c4 100644
--- 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
index 90ac82da1..76ae5a972 100644
--- 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;