JavaScript draw database schema - Stack Overflow

admin管理员组

文章数量:1405168

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 /

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

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/eKF6R/

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

• javascript
• database
• raphael

Share Improve this question Follow asked Jan 3, 2012 at 17:12 FreeCandiesFreeCandies 1,1231010 silver badges2121 bronze badges 4

• 1 doesn't really answer your questions, but maybe you're intrested in this ondras.zarovi.cz/sql/demo – goat Commented 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./p/js-mindmap – simonecampora Commented 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 ments tomorrow so that somebody my stuble upon it someday. – FreeCandies Commented Jan 9, 2012 at 20:37
• looks like phpmyadmin's "designer" view: lornajane/posts/2011/phpmyadmin-designer-view – Joseph Commented Jan 11, 2012 at 0:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

You can check the following doc reference from Raphaël: http://raphaeljs./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.

本文标签： JavaScript draw database schemaStack Overflow