Beautiful Mermaid Diagrams

Beautiful Mermaid Diagrams

Conventions

• MUST use English for all text in the diagram.

Quick syntax reference

Flowcharts

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

Sequence diagrams

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

Class diagrams

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

ER diagrams

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

Diagram types by use case

Common shapes

Edge styles

Examples by type

Styling options

Inline styles

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

Class definitions

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.

Database brand colors

Use brand colors for common database systems.

Quick theme presets

Copy these classDef statements for common themes.

Modern blue theme (default for most diagrams):

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

Status theme (success/​warning/​error):

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):

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