arrow_back Back to the Blog

Community Spotlight: ERD Generator Extension for Visualizing Data Relationships

By John Daniels on January 24, 2023

Project EDR Generator for Datacore Services

Goals Easily view database structure and relationships Make ERD tool available as part of the service Customize and deploy module extension

Results Provides instant visibility into entities and relationships Eliminates the need for an external ERD tool Simplifies data management and adds value for users

Relationships Matter

Digital projects such as websites and SaaS applications that rely on data require complex relationships between data collections. The Directus Data Studio makes the process of configuring relational data models easier, faster and more intuitive via no-code configuration. Since Directus is completely unopinionated, users can build their data models any way they want, without being limited by opinionated schemas or rule systems.

However, as you build out and troubleshoot a data model, it’s helpful to visualize the data entities and relationships. Database managers will often use entity relationship diagrams (ERDs) to graphically represent those relationships. ERDs specify the data to be stored and how data entities and attributes relate to each other. They’re useful for analyzing existing databases to troubleshoot and resolve problems in logic or deployment, and they can also be used proactively to model and optimize the design of a relational database.

One Directus user, Developer Bagus Andreanto, leveraged the extensibility and customizability of the Directus platform to build an ERD generator tool as a module extension for Directus. The extension gives Datacore Services users a fast and easy way to generate an ERD and view their database schema and relationships between collections within a project.

A Tool for Visualizing Database Structure

Bagus was working on the Datacore Service, a service delivered by an Indonesian company called 8s Machine Vision that’s used for managing master and transaction tables. He was using Directus as his primary backend for the service.

Bagus wanted to provide users with an ERD viewer for inspecting their data models quickly and easily. “If one of our users wants to insert a row in a table in their database, it’s important that they know what data must be prepared ahead of time,” he said. “One glance at an ERD tool would reveal the relationships between various collections, making management much easier.”

Bagus was looking for a better way to help users visualize their data structures from within the DataCore Service rather than having to leverage a third-party tool. Using Directus and Mermaid, a JavaScript based diagramming and charting tool, he set out to develop an ERD generator that would provide visualizations of complex data models.

Directus Makes It Easy to Build & Deploy Custom Extensions

Directus’ flexible API builder enables users to easily define their data model, then add hooks for service logic, automated dataflows, data transformations, alerting and other processes. With full extensibility across the API Engine and Data Studio app, users can create custom extensions to meet their needs and deploy them quickly and easily. Almost any functionality can be added through creating custom extensions.

“We tried some other platforms, but they were hard to use,” Bagus said. “It would have been much more challenging, if not impossible, using a typical headless CMS platform.”

Using Directus as the main application, Bagus generated the database structure as a Mermaid script with Directus by creating a custom extension. Mermaid, which uses markdown-inspired text definitions, converts the code to render the data model visually.

“Directus was built in 100% Javascript, which matches my skill set,” he said. “It was so easy to customize the extension to my specifications.”


Full Visibility in a Few Clicks

Using the ERD generator, Datacore Service customers can quickly and easily visualize their data models with a few clicks, right within the application. The extension adds tremendous value for users, who can now gain complete visibility into their data structures and relationships.

Directus is planning to offer a similar SRD generator as a cloud-exclusive feature in the near future, which will be available to Directus customers to add to their projects.

“The ability to create custom extensions in Directus is a powerful feature,” Bagus said. “It allows you to incorporate your unique abilities and expertise into Directus.”

Want to write for us?

We're always looking for new writers and ideas. If you have an idea for content we should cover, or are interested in submitting your work, give us a shout.

Press and Media
For any press or media inquiries, feel free to reach out via our contact form and we can discuss. Contact us
Brand Assets
Use the link below to download a zip file containing of our brand guidelines, vector logo, or other resources. Download brand assets

Take back control of your data.

No spam, just important updates regarding Directus.