Mermaid ER Diagram Viewer
Paste Mermaid erDiagram code and preview your database schema instantly. Export to SVG or PNG. Free, browser-only ER diagram tool.
Enter Mermaid code to preview your diagram
Entity Relationship (ER) diagrams are the standard notation for visualizing relational database schemas. They show entities (tables), their attributes (columns), and the relationships between them — one-to-one, one-to-many, many-to-many. Mermaid's `erDiagram` syntax brings ER diagramming into the text-as-code world, making it easy to document database schemas in READMEs, ADRs (Architecture Decision Records), and pull request descriptions. When database engineers or backend developers ask AI assistants to design a schema — 'Create a database for an e-commerce platform with users, products, and orders' — the response often includes a Mermaid ER diagram. Pasting that code into Zolkit lets you immediately validate that the relationships and cardinalities reflect the intended business rules. Zolkit's ER diagram viewer fully supports Mermaid's `erDiagram` syntax including entity definitions with typed attributes, primary and foreign key annotations, relationship lines with crow's foot notation, and inline relationship labels. It's used by backend developers, database architects, and technical writers to document schemas without leaving the browser.
Free Online Mermaid Diagram Viewer and Exporter
Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.
Instant Live Preview
Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.
100% Private
All rendering happens in your browser using mermaid.js. Your code is never sent to any server.
Export SVG & PNG
Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.
All Mermaid Diagram Types
Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.
AI Diagram Ready
Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.
Always Free
No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.
How to Preview a Mermaid Diagram
- 1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
- 2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
- 3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.
Frequently Asked Questions
What cardinality symbols does Mermaid use for ER diagrams?
Mermaid uses crow's foot notation: `||--||` for exactly-one to exactly-one, `||--o{` for exactly-one to zero-or-many, `}o--o{` for zero-or-many to zero-or-many, and `||--|{` for exactly-one to one-or-many. These render as standard crow's foot symbols on the relationship lines, making cardinality immediately readable.
How do I mark primary keys and foreign keys in Mermaid ER diagrams?
Add `PK` or `FK` after the column type in the entity definition: `int id PK` for a primary key, `int userId FK` for a foreign key. You can also add `UK` for unique keys. These annotations appear as labels inside the entity box and are essential for communicating the relational structure of the schema.
Can I document a many-to-many relationship in Mermaid ER diagrams?
Yes. Represent many-to-many relationships directly with `}o--o{` or via a junction entity. Using a junction entity (like ORDER_ITEM between ORDER and PRODUCT) is usually better practice as it models real schema design more accurately and allows you to add attributes to the relationship itself, such as quantity or price.
What's the best way to use Mermaid ER diagrams in a project?
Add the ER diagram as a Mermaid code block in your project README or a dedicated `SCHEMA.md` file. GitHub, GitLab, and Notion all render Mermaid natively, so the diagram stays up to date with the code. Update the diagram whenever you run a migration — treating it as living documentation rather than a one-time artifact.