---
title: Mermaid
description: Render Mermaid diagrams from chart source
type: reference
summary: Use Mermaid directly when diagram source is assembled outside an MDX Mermaid fence.
url: /docs/components/mermaid
source: apps/template/content/docs/components/mermaid.mdx
related:
  - /docs/components
  - /docs/syntax
---

# Mermaid

import { Mermaid } from "@vercel/geistdocs/components/mermaid";

<div className="not-prose my-6 rounded-lg border border-gray-400 bg-background-100 p-6">
  <Mermaid chart={'graph LR; A["Start"] --> B["Finish"]'} />
</div>

```tsx
import { Mermaid } from "@vercel/geistdocs/components/mermaid";

export function Flow() {
  return <Mermaid chart={'graph LR; A["Start"] --> B["Finish"]'} />;
}
```

Mermaid code fences render this component automatically in authored MDX.