9

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.

4
  • 1
    doesn't really answer your questions, but maybe you're intrested in this ondras.zarovi.cz/sql/demo
    – goat
    Jan 3, 2012 at 17:37
  • 1
    I think you can take a look at MindMaps visualization software... it is basically the same visualization that you need here. Take this for instance: code.google.com/p/js-mindmap Jan 4, 2012 at 7:45
  • Yep, that crossed my mind. Shall try this too. Meanwhile, I think I have a working solution for now, shall post it here in the comments tomorrow so that somebody my stuble upon it someday. Jan 9, 2012 at 20:37
  • looks like phpmyadmin's "designer" view: lornajane.net/posts/2011/phpmyadmin-designer-view
    – Joseph
    Jan 11, 2012 at 0:43

2 Answers 2

4

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

0
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.