---
title: "Charts and diagrams, right where you write"
description: "Add charts and Mermaid, draw.io and BPMN diagrams to Tiptap, with their data stored in the document."
canonical_url: "https://tiptap.dev/docs/diagrams/getting-started/overview"
---

# Charts and diagrams, right where you write

Add charts and Mermaid, draw.io and BPMN diagrams to Tiptap, with their data stored in the document.

> **Alpha:**
>
> Diagrams is a Pro extension in alpha. The API may change in future releases. Before installing,
> set up [access to Tiptap's private npm registry](https://tiptap.dev/docs/guides/pro-extensions.md).

Charts and diagrams in a Tiptap document. Everything comes from one Extension, `Diagrams`, in
the package `@tiptap-pro/extension-diagrams`. To install it and see a first chart, start with
[Getting started](https://tiptap.dev/docs/diagrams/getting-started/install.md).

## What it adds

| Node          | What it is                               | What the document stores  |
| ------------- | ---------------------------------------- | ------------------------- |
| `chart`       | A picture of tabular data                | Its data and its settings |
| `flowDiagram` | A flowchart, sequence diagram or process | Its source text           |

- A chart library of your choice draws the picture.
- Changing the library changes the picture, never the document.

## What you can do with it

- **Make a chart from rows.** Type `:::` in an empty paragraph, then rows such as `Jan | 2`, or
  turn a table into a chart. [Data](https://tiptap.dev/docs/diagrams/data/overview.md)
- **Change a chart.** Its type, title, colors and axes, at any time. [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)
- **Insert a diagram.** A flowchart, a sequence diagram or a process, written as text and edited
  in the picture. [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md)
- **Export.** Charts and diagrams as images, or every chart in a Word document.
  [Export](https://tiptap.dev/docs/diagrams/export.md)
- **Let a model work with them.** Tools to insert, read and change charts and diagrams.
  [Tools for a model](https://tiptap.dev/docs/diagrams/guides/ai.md)

## Words used in these pages

| Word         | Meaning                                                                                                                                 |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| Chart Data   | The columns and rows a chart stores. [Data](https://tiptap.dev/docs/diagrams/data/overview.md)                                          |
| Chart Spec   | How a chart shows its data: type, title, colors, axes. [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)                    |
| Renderer     | The adapter that draws with one chart or diagram library. [Renderers](https://tiptap.dev/docs/diagrams/renderers/overview.md)           |
| Chart syntax | The rows a chart is written in, such as `Jan \| 2`. [Chart syntax](https://tiptap.dev/docs/diagrams/data/chart-syntax.md)               |
| Quick Input  | The box `:::` opens, where typed text becomes a chart or a diagram. [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |

## Code from the document

Code from the document never runs in the page.

- **Mermaid, draw\.io and BPMN** draw in a sandboxed iframe.
- **Custom d3 code** is a function you register, and a chart names it.