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