We Keep Coding

How to create modeling tool in html5

A diagram tool in html 5 with drag and drop functionality including the connectors.
consider a drawing tool with rectangle circle and a data store getting connected through arrows on mouse clicks and then generating a XML file for the same.

I will recommend you to use SVG, which specification is accessible here; along with DOM & CSS
[EDIT]
Why not Canvas & its 2D API? Because the export to (png, ...) is not as efficient and powerful as SVG. After all, it's just a modeling tool

The OP may want to try gojs.
gojs is a sophisticated JavaScript library for drawing diagrams utilising the html canvas, available from http://www.nwoods.com/products/gojs/. It is not a 'free' product but there is a free-to-use trial version that is fully functional save for displaying a watermark on the diagram.
It abstracts from primitive drawing operations to a much higher level and offers many diagram type (org charts, flow diagrams, etc, etc) that are quick to create and live rather than simply being drawings. It uses a model-view approach to diagramming which is very productive. It supports drag and drop within diagrams and from a palette of components.
Their support is good too.
I have no relationship to the vendor, other than being a happy customer.

Create Dynamic Control Flow chart using jQuery with PHP MySQL

I want to implement Flow Chart feature, where user needs to be able to create flow chart using the tool, and user needs to able save the flow chart for further use.
I am using below plugin:
http://www.jqueryscript.net/chart-graph/Simple-SVG-Flow-Chart-Plugin-with-jQuery-flowSVG.html
But it has following issues:
Does not support drag and drop elements to the flow chart for now -
I am using option in the DD to add new element.
Can't Select, Delete or Edit the element.
I need flow chart for live users so that user can create and attach elements to the live processes or users. ( process/user is like a DB record with the ID)
By using above plugin I can create element and attach but because of the above issues it got fail.
if you have similar plugin with drag and drop and selectable features elements please share.

You can user paper.js. It has a lot of features.
[edit] Is not a library that creates a flow chart right out of the box, but with ease you can create some great drawings with it.

Consider gojs. GoJS is a JavaScript and TypeScript library for building interactive diagrams and graphs.

Complex heirarchical tree layout

I need to create an hierarchical tree (something like this), but i need some features:
Ability to design the nodes as i like (size, background image, fonts etc.)
Automatic layout
Ability to connect nodes by drag N' drop
I've looked at GoJs and its great, but it's canvas based, and i couldn't find a way to make the nodes look exactly as I want (actually not even remotely close).
I've also looked at d3.js which is also great but again, since it's SVG it's haard to design the nodes.
The main hustle here is the layout, and connecting the nodes, i can handle the Drag N' Drop my self, Is there a library out there that can handle the layout for me , so i can create the required div's, design them as i see fit and let the library do just the layout stuff?

Here are some sample libraries.
If you want to avoid canvas, try implementing drag n drop for the following
CSS3 Family Tree
SlickMap
or else see some canvas based libraries
JavaScript InfoVis Toolkit's HyperTree / SpaceTree
jsPlumb

Whilst a late answer, hopefully it can help others in the future.
Here is a drag and drop tree utilising the excellent D3.js library.
http://bl.ocks.org/robschmuecker/7880033
https://gist.github.com/robschmuecker/7880033
The tree in the example handles automatic layout/sizing, zooming, panning, drag and drop and is collapsible. All or none of the aspects can be removed if needed.

How to create a topology diagram using Javascript

I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.

You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)

Javascript equivalent of Kalileo's Visualizer?

Hye
I want to migrate from flash to javascript to visualize my data. My data is a concept map with semantic relationships. In flash I was using "Kalileo's Visualizer" to do something like this
http://lab.kapit.fr/skin/frontend/default/kaplab/images/kap-lab-kalileo-3.png.
Kalieleo allows me to
Add/remove nodes/links (dynamically and statically)
Add nodes without parents
Group nodes
Re-layout of the visualization in case of dynamic
addition/subtraction of nodes/links
Drag/drop nodes
I've looked into many existing js frameworks including InfoVis JIT, Dracula, D3.js, Sigma.js, etc. The closest I got is the "Force-Directed Graph" but I want a visualization in a hiearchical layout.
Could someone show me another javascript/(html5) library that can do what I want?
Regards