diff --git a/docs/network/edges.html b/docs/network/edges.html
index 8efddbc5..da35bed0 100644
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@@ -232,7 +232,7 @@ network.setOptions(options);
             <td class="indent2">arrows.to.type</td>
             <td>String</td>
             <td><code>arrow</code></td>
-            <td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>. The default is <code>arrow</code>.
+            <td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>, <code>box</code>, <code>crow</code>, <code>curve</code>, <code>diamond</code>, <code>inv_curve</code>, <code>triangle</code>, <code>inv_triangle</code>, <code>vee</code>. The default is <code>arrow</code>.
         </tr>
         <tr parent="arrows" class="hidden">
             <td class="indent">arrows.middle</td>
diff --git a/examples/network/data/dotLanguage/dotEdgeStyles.html b/examples/network/data/dotLanguage/dotEdgeStyles.html
index 9d5644b0..a27dac9b 100644
--- a/examples/network/data/dotLanguage/dotEdgeStyles.html
+++ b/examples/network/data/dotLanguage/dotEdgeStyles.html
@@ -36,8 +36,6 @@
 
     #left, #right {
       position: absolute;
-      width: 50%;
-      height: 100%;
       margin: 0;
       padding: 10px;
       box-sizing: border-box;
@@ -45,11 +43,15 @@
     }
 
     #left {
+      width: 40%;
+      height: 80%;
       top: 0;
       left: 0;
     }
 
     #right {
+      width: 60%;
+      height: 100%;
       top: 0;
       right: 0;
     }
@@ -82,7 +84,7 @@
     }
 
   </style>
-  
+
 </head>
 <body>
 
@@ -91,27 +93,43 @@
 
   <div>
     <p>
-      Example of edge styles support
+      Example of edge styles support.
     </p>
 
-    <ul>
-      <li> label: text displayed on the edge</li>
-      <li> color: edge color</li>
-      <li> style: edge style is solid(default), dashed or dotted</li>
-    </ul>
+    <table border=1>
+      <tr>
+        <th>Attributes</th><th>Desriptions</th>
+      </tr>
+      <tr>
+        <td align="center">label</td><td>Text displayed on the edge</td>
+      </tr>
+      <tr>
+        <td align="center">color</td><td>Edge color</td>
+      </tr>
+      <tr>
+        <td align="center">style</td>
+        <td>Edge style (solid, dashed, dotted)</td>
+      </tr>
+      <tr>
+        <td align="center">arrowhead</td>
+        <td>Arrow style (dot, box, crow, curve, icurve, normal, inv, diamond, tee, vee)</td>
+      </tr>
+    </table>
   </div>
 
-  <div>
-    <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
-    <button id="reset" title="Reset the DOT graph">Reset</button>
-    <span id="error"></span>
-  </div>
 </div>
 
 <div id="contents">
   <div id="left">
     <textarea id="data">
     </textarea>
+    <div>
+      <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
+      <button id="reset" title="Reset the DOT graph">Reset</button>
+    </div>
+    <div>
+      <span id="error"></span>
+    </div>
   </div>
   <div id="right">
     <div id="mynetwork"></div>
@@ -119,12 +137,28 @@
 </div>
 
 <script type="text/javascript">
-  var dotDefault = "digraph {\n" +
-    " Parent -> C1[label=\"default\"];  // Default style is solid \n" +
-    " Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
-    " Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
-    " Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
-    "}";
+  var dotDefault = 'digraph {\n' +
+    ' // Parent nodes\n' +
+    ' lines[label="LINES"]; \n' +
+    ' ahs[label="ARROW HEADS"]; \n' +
+    '\n' +
+    ' // Line styles\n' +
+    ' lines -- solid[label="solid pink", color="pink"]; \n' +
+    ' lines -- dashed[label="dashed green", style="dashed", color="green"]; \n' +
+    ' lines -- dotted[label="dotted purple", style="dotted", color="purple"]; \n' +
+    '\n' +
+    ' // Arrowhead styles\n' +
+    ' ahs -> dot[label="dot", arrowhead=dot]; \n' +
+    ' ahs -> box[label="box", arrowhead=box]; \n' +
+    ' ahs -> crow[label="crow", arrowhead=crow]; \n' +
+    ' ahs -> curve[label="curve", arrowhead=curve]; \n' +
+    ' ahs -> icurve[label="icurve", arrowhead=icurve]; \n' +
+    ' ahs -> normal[label="normal", arrowhead=normal]; \n' +
+    ' ahs -> inv[label="inv", arrowhead=inv]; \n' +
+    ' ahs -> diamond[label="diamond", arrowhead=diamond]; \n' +
+    ' ahs -> tee[label="tee", arrowhead=tee]; \n' +
+    ' ahs -> vee[label="vee", arrowhead=vee]; \n' +
+    '}';
 
   // create a network
   var container = document.getElementById('mynetwork');
diff --git a/examples/network/edgeStyles/arrowTypes.html b/examples/network/edgeStyles/arrowTypes.html
index 4adcc1d2..77729ce4 100644
--- a/examples/network/edgeStyles/arrowTypes.html
+++ b/examples/network/edgeStyles/arrowTypes.html
@@ -9,7 +9,7 @@
   <style type="text/css">
     #mynetwork {
       width: 600px;
-      height: 400px;
+      height: 540px;
       border: 1px solid lightgray;
     }
   </style>
@@ -17,37 +17,58 @@
 <body>
 
 <p>
-  The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
+  The types of endpoints.
   The default is <code>'arrow'</code>.
 </p>
+<p id="arrow_type_list"></p>
 
 <div id="mynetwork"></div>
 
 <script type="text/javascript">
+  var arrow_types = [
+    'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve',
+    'diamond', 'triangle', 'inv_triangle', 'vee'
+  ];
+
+  // update list of arrow types in html body
+  var nof_types = arrow_types.length;
+  var list_contents = [];
+  for(var i = 0; i < nof_types; i++) {
+    list_contents.push("<code>'" + arrow_types[i] + "'</code>");
+  }
+  var mylist = document.getElementById("arrow_type_list");
+  mylist.innerHTML = list_contents.join(", ");
+
   // create an array with nodes
-  var nodes = new vis.DataSet([
-    {id: 1, label: 'A'},
-    {id: 2, label: 'B'},
-    {id: 3, label: 'C'},
-    {id: 4, label: 'D'}
-  ]);
+  var node_attrs = new Array();
+  var nodes = arrow_types.slice();
+  nodes.push("end");
+  console.log(nodes);
+  var nof_nodes = nodes.length;
+  for(var i = 0; i < nof_nodes; i++) {
+    node_attrs[i] = {
+      id: i+1,
+      label: nodes[i]
+    };
+  }
+    
+  var nodes = new vis.DataSet(node_attrs);
 
   // create an array with edges
-  var edges = new vis.DataSet([
-    {from: 1, to: 2, arrows:'to'},
-    {from: 2, to: 3, arrows:{
-      to: {
-        enabled: true,
-        type: 'circle'
-      }
-    }},
-    {from: 3, to: 4, arrows:{
-      to: {
-        enabled: true,
-        type: 'bar'
+  var edge_attrs = new Array();
+  var nof_edges = nof_nodes - 1;
+  for(var i = 0; i < nof_edges; i++) {
+    edge_attrs[i] = {
+      from: i+1, to: i+2, arrows: {
+        to: {
+          enabled: true,
+          type: arrow_types[i]
+        }
       }
-    }},
-  ]);
+    }
+  }
+
+  var edges = new vis.DataSet(edge_attrs);
 
   // create a network
   var container = document.getElementById('mynetwork');
diff --git a/lib/network/dotparser.js b/lib/network/dotparser.js
index 6b2740e1..2efd580b 100644
--- a/lib/network/dotparser.js
+++ b/lib/network/dotparser.js
@@ -266,6 +266,14 @@ function createEdge(graph, from, to, type, attr) {
   }
   edge.attr = merge(edge.attr || {}, attr); // merge attributes
 
+  // Move arrows attribute from attr to edge temporally created in
+  // parseAttributeList().
+  if (attr != null) {
+    if (attr.hasOwnProperty('arrows')) {
+      edge['arrows'] = {to: {enabled: true, type: attr.arrows.type}};
+      attr['arrows'] = null;
+    }
+  }
   return edge;
 }
 
@@ -715,6 +723,29 @@ function parseAttributeList() {
         value = edgeStyles[value];
       }
 
+      // Define arrow types.
+      // vis.js currently supports types defined in 'arrowTypes'.
+      // Details of arrow shapes are described in
+      // http://www.graphviz.org/content/arrow-shapes
+      var arrowTypes = {
+        dot: 'circle',
+        box: 'box',
+        crow: 'crow',
+        curve: 'curve',
+        icurve: 'inv_curve',
+        normal: 'triangle',
+        inv: 'inv_triangle',
+        diamond: 'diamond',
+        tee: 'bar',
+        vee: 'vee'
+      };
+
+      if (name === 'arrowhead') {
+        var arrowType = arrowTypes[value];
+        name = 'arrows';
+        value = {to: {enabled:true, type: arrowType}};
+      }
+
       setValue(attr, name, value); // name can be a path
 
       getToken();
@@ -883,7 +914,13 @@ function DOTToGraph (data) {
         to: dotEdge.to
       };
       merge(graphEdge, convertAttr(dotEdge.attr, EDGE_ATTR_MAPPING));
-      graphEdge.arrows = (dotEdge.type === '->') ? 'to' : undefined;
+
+      // Add arrows attribute to default styled arrow.
+      // The reason why default style is not added in parseAttributeList() is
+      // because only default is cleared before here.
+      if (graphEdge.arrows == null && dotEdge.type === '->') {
+        graphEdge.arrows = 'to';
+      }
 
       return graphEdge;
     };
@@ -899,7 +936,7 @@ function DOTToGraph (data) {
         }
       }
 
-      // TODO: support for attributes 'dir' and 'arrowhead' (edge arrows)
+      // TODO: support for attributes 'dir' (edge arrows)
 
       if (dotEdge.to instanceof Object) {
         to = dotEdge.to.nodes;
diff --git a/lib/network/modules/components/edges/util/EndPoints.js b/lib/network/modules/components/edges/util/EndPoints.js
index 9a7261d5..cf8882eb 100644
--- a/lib/network/modules/components/edges/util/EndPoints.js
+++ b/lib/network/modules/components/edges/util/EndPoints.js
@@ -113,6 +113,153 @@ class Arrow extends EndPoint {
   }
 }
 
+/**
+ * Drawing methods for the crow endpoint.
+ * @extends EndPoint
+ */
+class Crow {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:-1, y: 0},
+      { x:0, y: 0.3},
+      { x:-0.4, y: 0},
+      { x:0, y:-0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the curve endpoint.
+ * @extends EndPoint
+ */
+class Curve {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var point = {x:-0.4, y:0};
+    EndPoint.transform(point, arrowData);
+
+    // Update endpoint style for drawing transparent arc.
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+
+    // Define curve endpoint as semicircle.
+    var pi = Math.PI
+    var start_angle = arrowData.angle - pi/2;
+    var end_angle = arrowData.angle + pi/2;
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, arrowData.length*0.4, start_angle, end_angle, false);
+    ctx.stroke()
+  }
+}
+
+/**
+ * Drawing methods for the inverted curve endpoint.
+ * @extends EndPoint
+ */
+class InvertedCurve {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var point = {x:-0.3, y:0};
+    EndPoint.transform(point, arrowData);
+
+    // Update endpoint style for drawing transparent arc.
+    ctx.strokeStyle = ctx.fillStyle;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+
+    // Define inverted curve endpoint as semicircle.
+    var pi = Math.PI
+    var start_angle = arrowData.angle + pi/2;
+    var end_angle = arrowData.angle + 3*pi/2;
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, arrowData.length*0.4, start_angle, end_angle, false);
+    ctx.stroke()
+  }
+}
+
+/**
+ * Drawing methods for the trinagle endpoint.
+ * @extends EndPoint
+ */
+class Triangle {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:0.02, y:0},
+      { x:-1, y: 0.3},
+      { x:-1, y:-0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the inverted trinagle endpoint.
+ * @extends EndPoint
+ */
+class InvertedTriangle {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:0, y:0.3},
+      { x:0, y: -0.3},
+      { x:-1, y:0},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
 
 /**
  * Drawing methods for the circle endpoint.
@@ -173,6 +320,83 @@ class Bar {
   }
 }
 
+/**
+ * Drawing methods for the box endpoint.
+ */
+class Box {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    var points = [
+      {x:0, y:0.3},
+      {x:0, y:-0.3},
+      {x:-0.6, y:-0.3},
+      {x:-0.6, y:0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the diamond endpoint.
+ */
+class Diamond {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    var points = [
+      {x:0, y:0},
+      {x:-0.5, y:-0.3},
+      {x:-1, y:0},
+      {x:-0.5, y:0.3},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
+
+/**
+ * Drawing methods for the vee endpoint.
+ * @extends EndPoint
+ */
+class Vee {
+
+  /**
+   * Draw this shape at the end of a line.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {ArrowData} arrowData
+   * @static
+   */
+  static draw(ctx, arrowData) {
+    // Normalized points of closed path, in the order that they should be drawn.
+    // (0, 0) is the attachment point, and the point around which should be rotated
+    var points = [
+      { x:-1, y: 0.3},
+      { x:-0.5, y: 0},
+      { x:-1, y:-0.3},
+      { x:0, y: 0},
+    ];
+
+    EndPoint.transform(points, arrowData);
+    EndPoint.drawPath(ctx, points);
+  }
+}
 
 /**
  * Drawing methods for the endpoints.
@@ -196,9 +420,33 @@ class EndPoints {
     case 'circle':
       Circle.draw(ctx, arrowData);
       break;
+    case 'box':
+      Box.draw(ctx, arrowData);
+      break;
+    case 'crow':
+      Crow.draw(ctx, arrowData);
+      break;
+    case 'curve':
+      Curve.draw(ctx, arrowData);
+      break;
+    case 'diamond':
+      Diamond.draw(ctx, arrowData);
+      break;
+    case 'inv_curve':
+      InvertedCurve.draw(ctx, arrowData);
+      break;
+    case 'triangle':
+      Triangle.draw(ctx, arrowData);
+      break;
+    case 'inv_triangle':
+      InvertedTriangle.draw(ctx, arrowData);
+      break;
     case 'bar':
       Bar.draw(ctx, arrowData);
       break;
+    case 'vee':
+      Vee.draw(ctx, arrowData);
+      break;
     case 'arrow':  // fall-through
     default:
       Arrow.draw(ctx, arrowData);

Attributes	Desriptions
label	Text displayed on the edge
color	Edge color
style	Edge style (solid, dashed, dotted)
arrowhead	Arrow style (dot, box, crow, curve, icurve, normal, inv, diamond, tee, vee)