SpecsModelExplore
Mermaid Component
Mermaid Component

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:

SyntaxRequiredPurpose
```mermaid ... ```yesMermaid source text to render diagram

Example

Source syntax

```mermaid
graph TD
  A[Author spec] --> B[Validate]
  B --> C[Generate artifacts]
  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