     @data_relations_visibles.forEach (link) =>
       @context.strokeStyle = link.color
       @context.beginPath()
-      @context.moveTo link.source.x|0, link.source.y|0
-      @context.lineTo link.target.x|0, link.target.y|0
+      if link.direction
+        @drawRelationArrow link.source, link.target
+      else
+        @drawRelation link.source, link.target
       @context.stroke()
       @context.closePath()
+
+  drawRelation: (source, target) ->
+    @context.moveTo source.x|0, source.y|0
+    @context.lineTo target.x|0, target.y|0
+
+  drawRelationArrow: (source, target) ->
+    # vector auxiliar methods from https://stackoverflow.com/questions/13165913/draw-an-arrow-between-two-circles
+    length  = ({x,y}) -> Math.sqrt(x*x + y*y)
+    sum     = ({x:x1,y:y1}, {x:x2,y:y2}) -> {x:x1+x2, y:y1+y2}
+    diff    = ({x:x1,y:y1}, {x:x2,y:y2}) -> {x:x1-x2, y:y1-y2}
+    prod    = ({x,y}, scalar) -> {x:x*scalar, y:y*scalar}
+    div     = ({x,y}, scalar) -> {x:x/scalar, y:y/scalar}
+    unit    = (vector) -> div(vector, length(vector))
+    scale   = (vector, scalar) -> prod(unit(vector), scalar)
+    free    = ([coord1, coord2]) -> diff(coord2, coord1)
+
+    v2 = scale free([source, target]), target.size
+    p2 = diff target, v2
+  
+    dx = p2.x-source.x
+    dy = p2.y-source.y
+    angle = Math.atan2 dy, dx
+    @context.moveTo source.x|0, source.y|0
+    @context.lineTo p2.x, p2.y
+    @context.lineTo p2.x-6*Math.cos(angle-@SIXTH_PI), p2.y-6*Math.sin(angle-@SIXTH_PI)
+    @context.moveTo p2.x, p2.y
+    @context.lineTo p2.x-6*Math.cos(angle+@SIXTH_PI), p2.y-6*Math.sin(angle+@SIXTH_PI)
 
   drawRelationsLabels: ->
     @context.textBaseline = 'bottom'


  drawNodes: ->
    @data_nodes.forEach (d) =>
      # set styles
      @context.fillStyle = d.fill
      # draw node
      @context.beginPath()
      @context.moveTo d.x|0, d.y|0
      @context.arc d.x|0, d.y|0, d.size|0, 0, @TWO_PI, true
      @context.fill()
      @context.closePath()
      # draw image
      if d.img
        @context.save()
        @context.clip()
        @context.drawImage d.imgObj, (d.x-d.size)|0, (d.y-d.size)|0, (2*d.size)|0, (2*d.size)|0
        @context.restore()

  drawNodesActive: ->
    @data_nodes.forEach (d) =>
      # set styles
      @context.lineWidth = d.strokeWidth
      @context.strokeStyle = d.stroke
      @context.fillStyle = d.fill
      # draw node
      @context.beginPath()
      @context.moveTo d.x|0, d.y|0
      @context.arc d.x|0, d.y|0, d.size|0, 0, @TWO_PI, true
      @context.fill()
      @context.stroke()
      @context.closePath()
      # draw image
      if d.img
        @context.save()
        @context.clip()
        @context.drawImage d.imgObj, (d.x-d.size)|0, (d.y-d.size)|0, (2*d.size)|0, (2*d.size)|0
        @context.restore()

  drawNodesLabels: ->
    # set styles

    @context.strokeStyle = '#cccccc'
    @context.beginPath()
    @data_relations_visibles.forEach (link) =>
      if link.direction
        @drawRelationArrow link.source, link.target
      else
        @drawRelation link.source, link.target
    @context.stroke()
    @context.closePath()

