Skip to main content
Mermaid renders diagrams from text definitions — flowcharts, sequence diagrams, state machines, ER diagrams, and more. The mermaid library loads lazily on first use, so apps that don’t use diagrams pay zero cost. Mermaid is particularly useful for generative UI, where LLMs can produce diagram definitions directly without needing image generation or specialized tooling.

​
Flowchart

Flowcharts map decision logic as nodes joined by directional arrows: [...] for steps, {...} for decision branches, and -->|label| to name the path taken. The style lines tint individual nodes — the simplest way to draw the eye to terminal states like errors or successful outcomes.

​
Sequence Diagram

Sequence diagrams trace messages between participants over time, reading top to bottom. ->> is a call and -->> a response; declare each actor or participant once and every message references it by name. Reach for this when the order of interactions across services is what you need to convey.

​
State Diagram

State diagrams show the states an entity moves through and the transitions between them. [*] marks the start and end, each transition label names the event that triggers the move, and a nested state X { } block expands a state into its own sub-machine. This is the natural fit for documenting a lifecycle — a job, an order, a request.

​
Entity Relationship

ER diagrams describe data models — entities, their attributes, and the cardinality of the relationships between them. The crow’s-foot notation (||--o{) reads as “one to zero-or-many,” and each entity block lists its typed fields. Use it to communicate a schema without leaving the diagram for a database tool.

​
API Reference

Mermaid Parameters

​
str
required
Mermaid diagram definition string. Supports all Mermaid diagram types. Can be passed as a positional argument.
​
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Mermaid
For the complete protocol schema, see Mermaid.