Need a powerful diagramming tool/site done in HTML5, Javascript - repost

I am in desperate need for some help with some custom enhancement on Matisse wire framing opensource tool found on github. My requirement is of pure html5, Javascript based diagramming tool. As far as I can see I think Matisse has great potential to be turned into diagramming tool. Here are my enhancement requests. Designer Changes --------------------------------------- a) Grid layout that can be provide guidance and can zoom in and out. Just like grid layout found in other developers designer. Take a look at [login to view URL] or [login to view URL] b) All shapes/block ( here after we will call just "shape") to have automatic arrow key in all direction when hovered over as a hint to user that they can be dragged to create copy of the same shape with "connector" attaching them. Also they can be dragged to connect to another shape. When this happens, can fire another custom event associated with that shape since shape can have additional custom events and properties. Logical Properties Changes ------------------------------------ a) Each board will have JSON data-source. This JSON will serve as schema to all shapes/block in the board designer surface. b) In the property window, user is required to supply data-bind property to associate one of the fields coming out from schema above. c) In the definition of shapes, there will be certain number of connectors required. If connectors requirement are not met yet, the shape will be "red" in color to give a hint to user that connectors requirement are not met yet. d) if data-bind requirement is not met yet, the background color of the shape will be turned to yellow. e) If a value (user supplied value in property) requirement is not met, the label will have question mark (?) appended at the end so that user know that certain requirement is missing. Just to give you a background where I am going with this - My end goal is to create a powerful visual programming tool that can create some "business rules". Let's say there are 6 shapes. a) StringShape b) DigitShape c) ConcatenationShape d) GreaterThanShape e) OutputShape f) UpdateDBShape StringShape can basically be data-bound to a field in schema and it will have to have one "connector" going out somewhere (to another shape). ConcatenationShape needs to take minimum of 3 connectors. 2 as input and 1 as output to some other shape. This shape can only take either StringShape or DigitShape. No other shapes are acceptable. Underlying this shape, there will be custom javascript function that obviously is responsible for taking 2 inputs and concatenating them together. OutputShape is responsible for taking in a single "connector" and acts like holding cell for value. Now user can select pre-defined formatting options from the dropdown in the property window to hold the value in certain format. Needless to say, there will be underlying javascript function here that will do such processing. UpdateDBShape will take any number of "connectors" and underlying to it, there will be javascript function associated with it, that will call a node.js post route to update database with whatever is sent. GreaterThanShape will basically take exactly 2 connectors and can be associated only with DigitShapes to do greater than comparison. When this diagram is saved, each sequential functions are extracted and saved either together or separately as a "business rule". These business rules can then be invoked by simply calling them from a GUI (outside of matisse app). These are just few examples what I want to accompolish. So if you can see, Matisse tool is serving as powerful tool to create powerful business rules, all done by end user.