Diagrams | Tiptap Diagrams Docs

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.

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
Change a chart. Change its type, title, colors and axes at any time. Charts
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
Export. Save charts and diagrams as images, or put every chart into a Word document. Export
Let an AI model work with them. Give a model tools to insert, read and change charts and diagrams. Tools for a model

Words used in these pages

Word	Meaning
Chart Data	The values a chart stores, in columns and rows. Data
Chart Spec	The chart's settings, such as its type, title, colors and axes. Charts
Chart syntax	A short way to type Chart Data: one line per row, with the cells separated by `\|`, such as `Jan \| 2`. Chart syntax
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
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
Data Source	A place outside the document that a chart reads its data from, such as a CSV file at a URL. Data Sources

Code in a document

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

Mermaid, draw.io and BPMN diagrams draw in a sandboxed iframe.
Pele draws Mermaid diagrams in a Web Worker.
Custom D3 code is a function you register in your app. A chart stores only its name.

Next upInstall