Do you know how to draw ER diagrams using Mermaid? Mermaid is a tool that allows you to draw various diagrams using a simple notation similar to Markdown. In particular, by creating ER diagrams (entity-relationship diagrams) with Mermaid, you can easily visualize complex database structures, but you must understand how to write them. In this article, we will explain how to draw ER diagrams using Mermaid.
In this article
ER Diagram Structure
ER diagrams play a very .0important role in database design. The basic elements of an ER diagram are entities (tables), relationships between entities, and attributes (columns) of each entity. Entities represent important objects in the database; each has its properties (columns). Relationships between entities show the connections between tables and are usually represented by lines.
The way to write an ER diagram in Mermaid is to start by expressing this basic structure as it is. Mermaid allows you to describe entities, attributes, and relationships using a specific syntax. Specifically, you can easily express a user table, a product table, and the relationships between them in Mermaid.
For example, you can use Mermaid syntax to define entities called "User" and "Order" and describe the attributes of each entity. Then, you can draw a line to show that users manage their orders. This makes it easier to visually understand the components of your database and their relationships.
How to Create an ER Diagram Using Mermaid Notation
In this section, we'll guide you in creating an ER (Entity-Relationship) diagram using Mermaid notation. We'll use the Mermaid Live Editor, a web-based tool where you can write Mermaid code and see the diagram instantly. The syntax is the same in tools like Notion and VS Code, making this guide useful for users of those platforms, too.
Getting Started with Mermaid Live Editor
Start by opening the Mermaid Live Editor in your browser.
The site includes built-in examples and syntax guides. You can also find ER diagram templates in the "Sample Diagrams" section on the left.
Basic Syntax for ER Diagrams
Mermaid supports ER diagrams with the keyword erDiagram. Here's the basic structure:
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER }|..|{ DELIVERY_ADDRESS : uses
Explanation of syntax:
- ||--o{ represents a one-to-many relationship.
- }|..|{ represents a many-to-many relationship.
- : introduces the relationship label.
In the live editor, when you input this code, a visual diagram appears on the right panel in real-time.
Defining Entities and Attributes
Entities and their fields (attributes) can be defined as follows:
erDiagram
CUSTOMER {
string name
string email
int customer_id
}
ORDER {
int order_id
date order_date
float amount
}
Syntax details:
- Each entity has a name and a block of field definitions.
- Fields can be data types such as string, int, float, or date.
- You can add as many attributes as needed for each entity to represent your database schema correctly.
Establishing Relationships between Entities
Relationships between entities are described after the entities are defined. For example:
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : includes
PRODUCT ||--o{ LINE_ITEM : listed_in
This example creates:
- A one-to-many relationship from CUSTOMER to ORDER.
- A many-to-one from LINE_ITEM to PRODUCT.
The labels after the colon (:) help clarify the relationship.
Styling and Themes
Mermaid's ER diagram styling is basic. You can still apply themes with the %%{init: ... }%% directive.
%%{init: {'theme': 'forest'}}%%
erDiagram
USER ||--o{ LOGIN : uses
This line changes the entire diagram's appearance to the "forest" theme.
Generate ER Diagrams Using AI
If you're new to the syntax, you can still make ER diagrams using an AI Chabot like ChatGPT or Claude.
Step 1: Ask the AI for your database schema: "Create a Mermaid ER diagram with entities for users, products, and orders."
Step 2: Copy the code it generates.
Step 3: Paste it into the Mermaid Live Editor to see the diagram.
Step 4: Edit the code in the editor or ask the AI for revisions.
Using Mermaid notation with tools like the Mermaid Live Editor and AI support makes creating ER diagrams quick, easy, and accessible for beginners.
Example of Drawing an ER Diagram Using Mermaid
Let's now apply what we've learned so far and walk through a practical example of creating an ER diagram using Mermaid notation.
Identify the Required Entities and Relationships
Before diving into code, it's helpful to clarify what information you want to represent in the ER diagram. On a blank sheet or text editor, list out your entities (tables), attributes (columns), and the relationships between them.
For this example, we'll model a simple e-commerce system with two main entities: USER and ORDER.
Write Mermaid Code Based on the Schema
Once you've outlined the structure, convert the information into Mermaid syntax. Start with the diagram type (erDiagram), followed by entity definitions and their attributes. Then, define the relationships.
erDiagram
USER {
int id
string name
string email }
ORDER {
int id
int user_id
string product
float price }
USER ||--o{ ORDER: places
In this Mermaid code:
- USER represents a user table with three fields: id, name, and email.
- ORDER represents an order table containing an id, a foreign key user_id, and order details such as product and price.
- The line USER ||--o{ ORDER : places defines a one-to-many relationship, meaning one user can place many orders.
This simple syntax allows you to clearly define the structure and logic of your database.
Step1Paste the Code into the Mermaid Editor
Next, open the Mermaid Live Editor in your browser and paste the code into the left panel. The ER diagram will be automatically rendered on the right side.
Step2Review and Refine Your Diagram
Check the diagram visually. If something appears off or you want to adjust naming, relationships, or formatting, simply edit the code and see the results update in real-time.
This immediate feedback makes it easy to tweak and experiment with your diagram layout and structure.
Step3Save or Export Your Diagram
Once you're happy with the diagram, you can download it as an image or copy the code for documentation purposes. This is useful for including database designs in your project reports, presentations, or code repositories.
Mermaid is sufficient for simple ER diagrams, but it still has some shortcomings, such as the following:
- Learning Curve: Understanding and memorizing the syntax takes a little practice.
- Complexity Handling: It's not well-suited for highly complex schemas with dozens of tables and nested relationships.
- Customization: Mermaid offers only limited styling and formatting options compared to more advanced tools.
Considering these points, you may consider other tools depending on your needs. We will introduce some useful tools below.
Create an ER Diagram with a Template
EdrawMax is a convenient tool that allows you to create ER diagrams easily. Unlike the method of creating ER diagrams using Mermaid notation introduced in Part 3, EdrawMax will enable you to draw diagrams intuitively with drag-and-drop operations. The steps are as follows:
Step1Launch EdrawMax
Get 500 free AI tokens
First, launch EdrawMax and create a new project. Then, select Database Diagram from the toolbar and choose the ER Diagram template.
Step2Edit
Once the template is open, drag and drop the Entity and Relationship symbols from the library on the left onto the canvas.
Step3Customize
To customize an entity, you can double-click it to add attributes and primary keys. Relationships can also be created by simply selecting a line and setting attributes. In this way, EdrawMax makes ER diagram creation very smooth and efficient.
Benefits of Using EdrawMax
EdrawMax has many advantages. First of all, it is intuitive and easy to use. You can easily create ER diagrams and other diagrams with just drag-and-drop operations. It is especially attractive that even people without technical skills can use it right away.
In addition, the extensive template and symbol library allows you to create a wide variety of diagrams in a short time, which can greatly improve the efficiency of your projects.
In addition, its strong cloud integration makes it easy to collaborate with your team. Project members can edit and update diagrams in real time, facilitating smooth communication.
Finally, the high level of customizability is also a major benefit. You can change the colors and lines of the ER diagram in a PowerPoint-like way, instead of using code, so you can create a cleaner ER diagram. Please try downloading the free version from the button below!
Summary
I've introduced how to write ER diagrams using Mermaid syntax. By using Mermaid, you can easily create complex ER diagrams and sequence diagrams in a way that is similar to Markdown. This is very useful for database design and basic design. In particular, it makes it easier to visualize relationships between entities, which will help you communicate more efficiently with team members.
Moreover, using tools like EdrawMax makes the process even more efficient. It allows you to create ER diagrams easily with drag and drop, so even beginners can operate it intuitively, which saves time and reduces mistakes.
