Reference for Mermaid diagrams in MDX via fenced code blocks.
Mermaid diagrams are rendered from fenced code blocks with language mermaid.
When to use
- Flowcharts for request/response lifecycle
- Sequence diagrams for service interactions
- State diagrams for workflow transitions
Supported syntax
There is no JSX Mermaid component prop API in this project.
Use markdown fenced code:
| Syntax | Required | Purpose |
|---|---|---|
```mermaid ... ``` | yes | Mermaid source text to render diagram |
Example
Source syntax
```mermaid
graph TD
A[Author spec] --> B[Validate]
B --> C[Generate attachments]
C --> D[Publish docs]
```Rendered output
Common pitfalls
- Using unsupported
<Mermaid>...</Mermaid>JSX syntax - Creating diagrams too dense for quick scanning
- Divergence between diagram labels and documented terminology
- Using Mermaid where a small table communicates better
Last updated on