{"id":95,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/in\/docs\/uncategorized\/mermaid-js-playbook\/mermaid-js-erd-syntax-guide\/"},"modified":"2026-07-29T08:33:22","modified_gmt":"2026-07-29T08:33:22","slug":"mermaid-js-erd-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/in\/docs\/vpascode-docs\/mermaid-js-playbook\/mermaid-js-erd-syntax-guide\/","title":{"rendered":"Mermaid.js ERD Syntax Guide"},"content":{"rendered":"

What is an Entity Relationship Diagram (ERD)?<\/h2>\n

An Entity Relationship Diagram (ERD)<\/strong> is a structural blueprint used to design, document, and analyze relational database schemas. It outlines the specific data tables (entities) within an application, the columns (attributes) nested inside those tables, and the referential integrity rules that bind them together. Written using standard Information Engineering (IE) notation<\/strong>, it implements clear crow’s foot notation<\/strong> heads to show data constraints and multi-table dependencies.<\/p>\n

With Mermaid.js<\/strong>, you can define your production table indexes, data types, and foreign key connections using a clean, declarative text block. The engine automatically handles sizing for multi-column layout containers and routes connection lines without letting text labels overlap.<\/p>\n

Core Syntax Guide: Elements and Constructs<\/h2>\n

Building a valid, fully runnable database schema in Mermaid relies on structural entity blocks, data type mappings, index tags, and cardinality operators.<\/p>\n

1. Declaring Entities and Table Columns<\/h3>\n

You initialize an ERD canvas on line one using the erDiagram<\/code> keyword. To define a table, write the entity name followed by an open curly brace, listing your column configurations sequentially on individual lines:<\/p>\n

\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
erDiagram\r\n    USERS {\r\n        int id\r\n        string email\r\n        timestamp created_at\r\n    }<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n
\"\"<\/p>\n
2. Marking Primary Keys, Foreign Keys, and Comments<\/h3>\n
Mermaid’s ERD engine allows you to assign structural indexing tags directly after the column name and data type definition. You can also append an optional text comment to a column by wrapping it in double quotes:<\/p>\n