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

Need a site similar to [login to view URL] or [login to view URL] in pure HTML5, JavaScript where users can design flow diagrams. This will be more like Sequential Graphical Programming Interface, meaning each block/shape can be databound to table in database. And the result of this sequence flow can update some value in same table or another table in database. This is all driven by shapes/block. Just to illustrate my points, let’s say we have 6 shapes available in the designer. They will all have unique icons associated with them. a) DecimalDataBlock b) StringDataBlock c) GreaterThanBlock d) ConcatenationBlock e) OutputBlock f) UpdateDatabaseBlock So in above, we have 6 blocks/shapes. Underlying to these, there will be JavaScript functions associated with each block. Some may be simple such as “ConcatenationBlock” whose only purpose is to accept minimum of 2 input blocks and concatenate them together. Some may be complex such as “DecimalDataBlock” where user will be asked to either hard code a value or provide a reference to the field from dropdown (that will be pre-filled from db. User should be able to drag this block and place them in the designer surface and a small faded pencil icon on the right should show up every time user takes mouse within block. When icon is hovered, it should turn solid and with a click of it, should launch properties modal window where above properties can be managed for that shape/block. There will be validations check all the time in the designer. For example, “ConcatenationBlock” requires minimum of 2 inputs from another block/shape. If this is not provided, the block/shape will be painted “red” color indicating to user that the values are not provided yet. After user saves the diagram, the underlying results get saved as json object or javascript function so that it can be called programmatically by other areas of the applications. Hope this explains what I am trying to get out of this online tool.