Beautiful Mermaid Diagrams

Conventions

•MUST use English for all text in the diagram.

Quick syntax reference

Flowcharts

mermaid

graph TD
  A[Start] --> B[Process] --> C[End]

Sequence diagrams

mermaid

sequenceDiagram
  Alice->>Bob: Hello
  Bob-->>Alice: Hi

Class diagrams

mermaid

classDiagram
  Animal <|-- Duck
  Animal : +String name
  Animal : +int age

ER diagrams

mermaid

erDiagram
  CUSTOMER ||--o{ ORDER : places
  CUSTOMER {int id PK}

Diagram types by use case

Use case	Diagram type	Keywords
Process flows	`graph TD/LR`	journeys, algorithms, workflows
API interactions	`sequenceDiagram`	requests, OAuth, transactions
System design	`classDiagram`	models, MVC, patterns
Database schemas	`erDiagram`	entities, relationships, tables
State machines	`stateDiagram-v2`	lifecycle, workflows, states

Common shapes

Shape	Syntax	Description
Rectangle	`[text]`	Default node
Rounded	`(text)`	Rounded corners
Diamond	`{text}`	Decision/condition
Stadium	`([text])`	Start/end/process
Circle	`((text))`	Endpoint
Database	`[(text)]`	Data store
Hexagon	`{{text}}`	Alternative decision

Edge styles

Style	Syntax	Use case
Solid	`-->`	Default flow
Dotted	`-.->`	Optional/dashed
Thick	`==>`	Highlighted
No arrow	`---`	Related only

Examples by type

Diagram type	Examples
Flowcharts	reference/flowcharts.md
Sequence diagrams	reference/sequence-diagrams.md
Class diagrams	reference/class-diagrams.md
ER diagrams	reference/er-diagrams.md
State diagrams	reference/state-diagrams.md

Styling options

Inline styles

mermaid

graph TD
  A[Node] --> B[Custom]
  style B fill:#3b82f6,stroke:#1d4ed8

Class definitions

mermaid

graph TD
  A:::highlight --> B:::default
  classDef highlight fill:#fbbf24,stroke:#d97706
  classDef default fill:#f4f4f5,stroke:#a1a1aa

Preset color themes

Semantic colors

Use colors to convey meaning consistently across diagrams.

Color	Hex	Meaning	Use for
Green	`#10b981` / `#059669`	Success, positive	Completed, approved, active
Red	`#ef4444` / `#dc2626`	Error, danger	Failed, rejected, error states
Yellow/Orange	`#f59e0b` / `#d97706`	Warning, caution	Pending, review needed, alerts
Blue	`#3b82f6` / `#1d4ed8`	Information, action	Links, processes, buttons
Gray	`#6b7280`	Neutral, disabled	Inactive, optional, background

Database brand colors

Use brand colors for common database systems.

Database	Shape	Brand Color	Example
MongoDB	`[(name)]`	Green `#00ED64`	`DB[(MongoDB)]`
PostgreSQL	`[(name)]`	Blue `#4169E1`	`DB[(PostgreSQL)]`
MySQL	`[(name)]`	Orange `#F29111`	`DB[(MySQL)]`
Redis	`[(name)]`	Red `#DC382D`	`DB[(Redis)]`
Elasticsearch	`[(name)]`	Yellow `#F4B400`	`DB[(Elasticsearch)]`
SQLite	`[(name)]`	Blue `#003B57`	`DB[(SQLite)]`

Quick theme presets

Copy these classDef statements for common themes.

Modern blue theme (default for most diagrams):

mermaid

graph TD
  A[Start]:::blue --> B[Process]:::blue --> C[End]:::blue
  classDef blue fill:#3b82f6,stroke:#1d4ed8,color:#fff

Status theme (success/warning/error):

mermaid

graph TD
  A[Success]:::success --> B[Warning]:::warning --> C[Error]:::error
  classDef success fill:#10b981,stroke:#059669,color:#fff
  classDef warning fill:#f59e0b,stroke:#d97706,color:#fff
  classDef error fill:#ef4444,stroke:#dc2626,color:#fff

Architecture theme (frontend/backend/data layers):

mermaid

graph LR
  A[Frontend]:::frontend --> B[Backend]:::backend --> C[(Database)]:::database
  classDef frontend fill:#3b82f6,stroke:#1d4ed8,color:#fff
  classDef backend fill:#8b5cf6,stroke:#7c3aed,color:#fff
  classDef database fill:#00ED64,stroke:#00b33c,color:#000