# Equations and diagrams

> Typeset math with KaTeX and draw Mermaid diagrams.

## Equations

`notion-equation` typesets equation blocks and equations inside text with KaTeX, on the server, so no math JavaScript ships.

```bash
npx shadcn@latest add @notionic/notion-equation
```

```typescript
import { NotionEquation, NotionInlineEquation } from "@/components/notion-equation"

<NotionRenderer
  blocks={blocks}
  components={{ equation: NotionEquation, inline_equation: NotionInlineEquation }}
/>
```

Inline, like $a^2 + b^2 = c^2$, or as a block:

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

## Diagrams

`notion-mermaid` draws Notion code blocks in the `mermaid` language as diagrams. It wraps whichever code component you use:

```bash
npx shadcn@latest add @notionic/notion-mermaid
```

```typescript
import { withMermaid } from "@/components/notion-mermaid"

<NotionRenderer blocks={blocks} components={{ code: withMermaid(NotionCode) }} />
```

- Mermaid loads in the browser only on pages with a diagram.
- Diagrams take their colors and font from your shadcn/ui theme, and follow dark mode.
- The code shows until the diagram draws, without JavaScript, or if its source doesn't parse.

```mermaid
sequenceDiagram
  participant App
  participant Notion
  App->>Notion: fetchPage(id)
  Notion-->>App: page and blocks
  App->>App: NotionRenderer
```