improved state diagram editor based on https://gist.github.com/lgersman/5311202 featuring curvy connections with helper points

new features

css improved
css transitions added

nodes

double click on a node to remove it

connection lines are splines !!

drawn as cardinal splines (https://github.com/mbostock/d3/wiki/SVG-Shapes)
can be selected by single click it
will be highlighted while hovering
can be made curvy by adding connection points :
connection points can be added by pressing CTRL + double click somewhere on a connection line
remove a connection point by pressing CTRL + double click on a existing connection point
move a connection point by dragging the connection point
remove a connection be double click on it

drag selection

if both end nodes of a connection selected, the connection including its connection points will also be dragged

See it live : /lgersman/5370827

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>d3.js selection frame example</title>
    <link rel="stylesheet" href="app.css">
  </head>
  
  <body>
  </body>
​
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="app.js"></script>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js