Awesome-omni-skill beautiful-mermaid-diagrams

Create beautiful diagrams using Mermaid syntax including flowcharts, sequence diagrams, class diagrams, ER diagrams, and state diagrams. Use when users ask to diagram, visualize, model, map out, or show the flow of systems, processes, architectures, or interactions.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data-ai/beautiful-mermaid-diagrams" ~/.claude/skills/diegosouzapw-awesome-omni-skill-beautiful-mermaid-diagrams && rm -rf "$T"

manifest: skills/data-ai/beautiful-mermaid-diagrams/SKILL.md

source content

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

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

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.

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

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