Arrow icon
See all demos

ER Diagrams

This demo – a diagram showing the entity-relationship model – is a great example of an interactive UI built using JointJS, our open-source Javascript diagramming library. It uses some of the core plugins of JointJS, such as highlighters, linkPinning and is one of the many use cases that can be addressed using our solution.
Demo instructions
Make connections between diagram elements and move them around on the canvas.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

The role of JointJS in building an ER Diagram

JointJS is a community-driven diagramming library that helps developers build simple visual and No-Code applications containing diagramming studios such as ER diagrams in less time by providing them with a set of pre-built features.

We equip developers with all the features they need to save time and focus their energy elsewhere such as highlighters, linkPinning, and er.

New to this topic? Learn more about ER Diagrams 👇

What is an ER Diagram (ERD)?

Entity relationship diagrams - often used to design a relational database - are used to show relationships between entities (persons, objects, etc.). Its origins date back to the 1970s, when Peter Chen developed the model and came up with a book called "The Entity-Relationship Model: Toward a Unified View of Data" published in 1976. Entity relationship diagrams, known as ER diagrams or ERDs, have found their application primarily in software engineering, as we will see in the following lines, but they can also be useful in other fields such as education or research.

Common uses of ER Diagrams

Since there are multiple types of ER diagrams, it is not surprising that there are multiple ways to use them. While we have emphasized that the main field that benefits from Peter Chen's invention is software engineering, they find applications in other fields as well.

  • Database design: As mentioned above, relational databases are often designed using ER diagrams as they visually explain the relationships between data.
  • Research: ER diagrams can play an important role for researchers who work with data and need to set up databases for data analysis.
  • Education: Data stored for educational purposes can be designed using a relational database expressed using ER diagrams.

All in all, ER diagrams are useful if you need to get a logical view of the database, visualize it and determine the relationships between different entities.

The components of ER Diagram and cardinalities

It is important to take a moment to talk about the components and also the cardinalities of ER diagrams. The three main components are: entities, which define a person, object, or concept; relationships, which explain how entities are related to each other; and finally attributes, which are the characteristics of an entity.

Lucidchart, a web-based diagramming application, does a great job of explaining the key components of ER diagrams in this article.

Moreover, cardinality plays its role in this topic which, as Wiki explains, “is the numerical relationship between rows of one table and rows in the other”. There can be one-to-one, one-to-many and many-to-many relationship between tables. Let's look at a simple example to understand the difference:

  • One-to-one: one car owner associated with one car.
  • One-to-many: one car owner associated with more cars.
  • Many-to-many: more car owners associated with more cars.

Read more about cardinalities in this article.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Get the source code of the ER Diagram application, and go from zero to a fully functional app in no time.

In addition to our open-source library, we offer an extended and more powerful version, JointJS+. In addition to the state-of-the-art technology, developers choose JointJS+ for the great support that serves as a partner on their path to a more advanced product. Learn more about JointJS+ here.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.