JavaScript draw database schema

Question

I have the need to display a couple of database tables' structure (4-5 tops) in a HTML page. I have to show the columns, mark the primary key and also draw the foreign keys connections (arrows I guess).

I have chosen raphael.js and it's all fine except for the foreign keys arrows, because they have to avoid intersection with tables and do it in a fancy way e.g. turning around corners and stuff.

Does anybody know of a solution to that? If not, how can I easily draw the arrows?

What I have for now as a try-out is http://jsfiddle.net/eKF6R/

And it's fine for connecting the tables but I need to connect the specific columns and also to avoid intersection.

Answer 1

Try this site http://dbdsgnr.appspot.com/ Hope it help you.

Answer 2

You can check the following doc reference from Raphaël: http://raphaeljs.com/reference.html#Paper.path

You can use 'L' as parameter to draw lines instead curves:

var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");

Maybe it's been 2 years from your question, but many people could have the same question (as I was).

Best Regards.