entrel.js: Creating Entity Relationship Diagrams with Javascript and SVG

entrel.js is Javascript Library for creating ERDs with simple Javascript methods. This library is built on the obfc.js library. 


Import obfc, entrel and animation libraries to your web page.

There are two main attribute for creating diyagrams as FlatLine and Entity. The following code is a simple example:

Entity method derived from Process method of obfc.js. For understanding this object, you can examine this web page.

Entity(_middle_x, _middle_y, _size, _text, _attributes, _text_size, _weak, _description, _fill_color, _stroke_color, _text_color)

The fifth parameter contain extra information about attributes of an entity. You can define 8 attribute for an entity. For example:

[null, “AuthorID(PK)”, “AuthorName”, “AuthorSurName”]

The first attribute contain a null value so that it can be drawn. The first four attributes are in top and others are in bottom.

Weak parameter is used for  a weak entity that cannot be uniquely identified by its attributes alone.

FlatLine connects the objects. For more information enter this web page.

For creating animations, you can group the objects using an array. if two objects are together, these objects can be grouped together ([object5, object2]).

prepareClassforAnimation method prepares objects for animation. initializeAnimation method starts animation. Example:


Click bottom to try the animation feature.