Mermaid ER diagram visualizer
Paste Mermaid erDiagram code and instantly see entities, attributes, keys, and relationships as a downloadable ER diagram. Everything runs in your browser.
Paste Mermaid erDiagram code above to generate a diagram.
Relationships
What is a Mermaid ER diagram?
Mermaid is a text syntax for diagrams that renders inside Markdown on GitHub, GitLab, Notion, and most documentation sites. Its erDiagram type describes a data model as entities, their attributes, and the relationships between them, with crow's foot markers for how many records sit on each side.
Because the source is plain text, a Mermaid ER diagram can live in the same repository as the code it documents and change in the same pull request. This visualizer renders that source as a table-style diagram so you can review the model without a Markdown preview.
Reading erDiagram syntax
An entity block lists one attribute per line as a type followed by a name, with optional PK, FK, or UK keys and a quoted comment. A relationship line names two entities, the cardinality on each side, and a label after a colon, for example CUSTOMER ||--o{ ORDER : places. Entities that only appear in relationships still show up in the diagram, without attributes.
FAQ
Which Mermaid erDiagram syntax does the visualizer support?
It reads the erDiagram header, entity blocks with attribute types and names, PK, FK, and UK key markers, and quoted attribute comments. Relationships can use the symbolic cardinality markers such as ||--o{ and }|..|| or the word forms such as only one to zero or more. Entity aliases, quoted entity names, %% comments, and a title in frontmatter are accepted. Styling directives are ignored, and any line it cannot read is listed so you can fix it.
How are Mermaid cardinality markers read?
Each side of a relationship has two characters. The outer character is the maximum: | means one, and { or } means many. The inner character is the minimum: o means zero and | means one. So ||--o{ reads as exactly one on the left and zero or more on the right. A solid line (--) is an identifying relationship, and a dotted line (..) is non-identifying. The list under the diagram spells out each relationship in words.
Why does a relationship line point at a specific attribute?
The diagram draws each relationship from the entity on the many side to the entity on the one side. When the many-side entity has an attribute named after the other entity, such as customer_id for CUSTOMER, or an attribute marked FK, the line starts at that attribute and ends at the other entity's primary key. Without either, the line connects the entities at their first row.
Is my Mermaid code uploaded anywhere?
No. Parsing and SVG rendering run entirely in your browser, and the page never sends your Mermaid code to Basedash or any other service. That makes it safe for reviewing internal data models, unreleased features, or schema documentation that lives in a private repository. Closing the tab discards everything you pasted.
Can I use this for Mermaid diagrams in GitHub or Notion?
Yes. GitHub, GitLab, Notion, and many documentation tools render Mermaid code blocks, so the erDiagram text you check here can be pasted into a README, a pull request description, or a docs page. Use the visualizer to catch typos in entity names and cardinality markers before you commit, then keep the same source in your Mermaid code block.
Can I export a Mermaid ER diagram as an image?
Yes. Select Download SVG after the diagram renders. The file is a scalable vector image, so it stays sharp in slide decks, design documents, and wiki pages where Mermaid code blocks don't render. Keep the Mermaid source as the editable original and regenerate the SVG whenever the model changes.
Go from data model to dashboard
Connect your database to Basedash and build charts from real data.