Create Class, Sequence, Use Case, Activity, ER, and State diagrams from simple text syntax. Live preview, one-click export as SVG or PNG — no signup, no install.
Diagram Type & Options
Examples:ClassSequenceUse CaseStateERFlowchart
✏️ Editor
👁️ Preview
📐
Your diagram will appear here
Rendering diagram…
Parsing syntax
📋 Diagram Info
Diagram Type
—
Theme
—
Elements
—
Relationships
—
Lines of Code
—
Render Status
Ready
⚡ Quick-Insert Syntax
📖 Syntax Cheat Sheet
🔏 Raw Mermaid Code
Start editing to see your Mermaid code here…
Jump to:📦 Class🔄 Sequence👤 Use Case🔁 State🗄️ ER📊 Flowchart
📊 Diagram Stats
—
Elements
—
Relations
—
Lines
0
Renders
📐 Diagram Types
Class
Objects, attributes & inheritance
Seq
Message flow between actors over time
UC
User-system interactions & actors
State
State transitions & lifecycle events
ER
Database entities & relationships
Flow
Process steps & decision branches
💡 UML Tips
⌨️
Ctrl + Enter to render without clicking the button.
📐
Indentation matters in some diagram types — use 2 or 4 spaces consistently.
💾
Share Link encodes your diagram in the URL — bookmark it to save your work.
🖼️
Export PNG at 2× resolution for crisp diagrams in presentations and docs.
A UML (Unified Modelling Language) diagram generator lets you create standardised software architecture diagrams from a simple text-based syntax. Instead of dragging shapes around in a GUI tool, you describe your system in plain text and the tool renders the diagram automatically. This approach is faster, version-control friendly, and keeps diagrams in sync with code because they live in the same repository.
This tool uses Mermaid.js — the industry-standard open-source diagramming library used inside GitHub, GitLab, Notion, Confluence, and VS Code. Any diagram you create here can be pasted directly into a Markdown file and rendered natively on GitHub.
When to Use Each Diagram Type
Class Diagram — Designing object-oriented systems. Shows classes, attributes, methods, and inheritance relationships. Use during architecture planning or code review.
Sequence Diagram — Documenting API calls, authentication flows, or microservice communication. Shows the order of messages between actors and systems over time.
Use Case Diagram — Communicating system scope to stakeholders. Shows what a system does from the user's perspective, without implementation details.
State Diagram — Modelling stateful systems like order lifecycles, user sessions, or UI component states. Shows all states and the transitions between them.
ER Diagram — Designing or documenting database schemas. Shows entities (tables), their attributes, and the relationships and cardinalities between them.
Activity / Flowchart — Mapping business processes, algorithms, or user journeys. Useful for onboarding docs, decision trees, and CI/CD pipelines.
Frequently Asked Questions
Yes — GitHub natively renders Mermaid diagrams in Markdown files. Wrap your code in a fenced code block with the language set to mermaid:
```mermaid classDiagram ... ```
GitLab, Notion, and many wiki tools also support Mermaid natively. This makes Mermaid the most portable diagramming format for software teams.
UML (Unified Modelling Language) is a standardised set of diagram types — Class, Sequence, Use Case, etc. — defined by the Object Management Group (OMG). Mermaid is a JavaScript library that implements most UML diagram types using a simple, human-readable text syntax. While Mermaid's syntax isn't 100% strict UML (it takes liberties for readability), it produces diagrams that follow all the same conventions and communicate the same information.
Use the <|-- arrow for inheritance (is-a), *-- for composition (has-a, lifecycle-dependent), and o-- for aggregation (has-a, independent lifecycle). For interfaces/implementations use <|... Example:
Animal <|-- Dog : inherits Car *-- Engine : contains Library o-- Book : has
Yes — use the Export SVG button for a vector file that scales perfectly at any size. SVG files can be inserted into Word, Google Docs, Keynote, and most design tools. For PowerPoint specifically, export as PNG (which this tool renders at high resolution) and insert as an image. SVG is generally preferred for presentations as it stays crisp on any display.
No — all rendering happens entirely in your browser. Your diagram code is never sent to a server. Use the Share Link button to encode your diagram in the URL (it's base64-encoded in the hash), which you can bookmark or share. For persistent storage, copy your Mermaid code into a .md file in your repository — that's the recommended long-term approach for team diagrams.