Creating flowchart using Snap

[Atin Sood]

I am trying to create a flowchart editor similar to https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html

I am looking for some directions on how to go about it. In order to draw each item, I am basically planning to create an item group with say rectangle and a small circle(circle acts as the connector point). 

I am not sure on how to implement the connecting path between 2 such elements and how to track the path i.e. what 2 points is the path connecting. Also how on only draw the path only when you click from one such circle to another. 

I am new to SVG and Snap so my knowledge is pretty limited. Any feedback on how to go about this would be nice, I am not shy of reading so any reading pointers on how such things are done would be helpful 

:) 

Thanks in advance for the help.

[Ian]

Just wondering if graffle is any use. I converted the original Raphael (I think by Dmitry) graffle to Snap http://svg.dabbles.info/snaptut-graffle.html if its any use. Top part is a plugin you would include, lower down an example of it being in use.

Even if you don't want to use it, it may be worth a run through the code.

[Atin Sood]

Thanks will check it out. 

[Ammar Abu-Yasein]

Hey there Ian,

So I assume you are the author of Snap.svg?

Its a pretty cool library.

Say, I am also trying to create a workflow editor and was wondering if there are any examples making connectors between nodes using snap.svg.

I know the example you provided shows connectors. But, I mean having the user make connectors by selecting an end-point and dragging a connector

to another node?

Thanks

[Ian]

Nooo, Snap (and Raphael) was created by Dmitry https://github.com/DmitryBaranovskiy . I just help out on here a lot as I love Snap (and trying to help folk) and helps me learn.

There was a thread a few days ago, worth looking at https://groups.google.com/forum/#!topic/snapsvg/odHDZpNWHrc which may give some ideas.

[Ammar Abu-Yasein]

Sure thing.

Thanks for link.