---
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-docs.lin52025i.qzz.io/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 in alpha and available through a pilot program. The API may change in future releases.

The Diagrams extension adds charts and diagrams to a Tiptap editor. You install one package,
`@tiptap-pro/extension-diagrams`, and add one extension, `Diagrams`. To install it and insert a
first chart, start with [Getting started](https://tiptap-docs.lin52025i.qzz.io/diagrams/getting-started/install.md).

## What it adds

The extension adds two nodes:

| Node          | What you see                                            | What the document stores              |
| ------------- | ------------------------------------------------------- | ------------------------------------- |
| `chart`       | A bar, line, pie or other chart                         | Its data and its settings             |
| `flowDiagram` | A flowchart, a sequence diagram or a BPMN process model | Its source text, such as Mermaid code |

The document stores data, not images. A chart library of your choice draws each chart and diagram
in the browser. If you switch to another library, the charts look different, but the document
stays the same.

## What you can do with it

- **Make a chart from typed rows.** Type `:::` in an empty paragraph, then one row per line, such
  as `Jan | 2`. You can also turn a table into a chart. [Data](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/overview.md)
- **Change a chart.** Change its type, title, colors and axes at any time.
  [Charts](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/overview.md)
- **Insert a diagram.** Write a flowchart, a sequence diagram or a BPMN process model as text.
  You can edit a Mermaid diagram's text right in the diagram. [Diagrams](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md)
- **Export.** Save charts and diagrams as images, or put every chart into a Word document.
  [Export](https://tiptap-docs.lin52025i.qzz.io/diagrams/export.md)
- **Let an AI model work with them.** Give a model tools to insert, read and change charts and
  diagrams. [Tools for a model](https://tiptap-docs.lin52025i.qzz.io/diagrams/guides/ai.md)

## Words used in these pages

| Word         | Meaning                                                                                                                                                                                                                   |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Chart Data   | The values a chart stores, in columns and rows. [Data](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/overview.md)                                                                                                    |
| Chart Spec   | The chart's settings, such as its type, title, colors and axes. [Charts](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/overview.md)                                                                                |
| Chart syntax | A short way to type Chart Data: one line per row, with the cells separated by `\|`, such as `Jan \| 2`. [Chart syntax](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/chart-syntax.md)                                |
| Quick Input  | The text field that opens when you type `:::` at the start of an empty paragraph. What you type there becomes a chart or a diagram. [Quick Input](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/quick-input.md)      |
| Renderer     | The adapter between the extension and one drawing library, such as ECharts or Mermaid. You register a Renderer for each library you use. [Renderers](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/overview.md) |
| Data Source  | A place outside the document that a chart reads its data from, such as a CSV file at a URL. [Data Sources](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/sources.md)                                                 |

## Code in a document

Code stored in a document, such as Mermaid source, never runs in your app's web page:

- [Mermaid](https://mermaid.js.org), [draw.io](https://www.drawio.com) and
  [BPMN](https://bpmn.io) diagrams draw in a sandboxed iframe.
- [Pele](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/pele.md) draws Mermaid diagrams in a Web Worker.
- Custom D3 code is a function you register in your app. A chart stores only its name.