Create Visio like drawings, diagrams or an workflow editor with the Javascript library.The User interface allows interactive drawing by using your standard browser. No additional software; no third party plug ins. Just run it and use it

Full compatible with:
  • jQuery
  • prototype.js
  • ExtJS
  • mootools.js
Example Coding in JavaScript how to add some content to a normal HTML page. 
<script>
  var workflow  = new draw2d.Workflow("paintarea");
  // Add a Oval with a fill color to the paint area
  //
  var node1= new draw2d.Oval();
  node1.setDimension(100,40);
  node1.setBackgroundColor(new draw2d.Color(255,0,0));
  workflow.addFigure(node1,130,180);

  // add a simple line
  //
  var line= new draw2d.Line();
  line.setStartPoint(100,180);
  line.setEndPoint(130,300);
  workflow.addFigure(line);

  // add line with line width 5
  //
  var line= new draw2d.Line();
  line.setLineWidth(5);
  line.setColor(new draw2d.Color(255,0,120));
  line.setStartPoint(430,450);
  line.setEndPoint(230,550);
  workflow.addFigure(line);

 // Add a simple text label to the screen
  //
  workflow.addFigure(new draw2d.Label("See more on http://www.openjacob.org"),350,253);

  // Add a Label with a border 
  //
  var label = new draw2d.Label("Label with a Border");
  var border = new draw2d.LineBorder();
  border.setColor(new draw2d.Color(100,255,100));
  border.setLineWidth(4);
  label.setBorder(border);
  workflow.addFigure(label,80,400);

  // Add a Rectangle with lineWidth and fillColor/backgroundColor
  //
  var rect = new draw2d.Rectangle();
  rect.setLineWidth(5);
  rect.setBackgroundColor(new draw2d.Color(255,120,0));
  rect.setDimension(190,20);
  workflow.addFigure(rect,350,320);

</script>