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.
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.
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 asJan | 2, or turn a table into a chart. Data - Change a chart. Its type, title, colors and axes, at any time. Charts
- Insert a diagram. A flowchart, a sequence diagram or a process, written as text and edited in the picture. Diagrams
- Export. Charts and diagrams as images, or every chart in a Word document. Export
- Let a model work with them. Tools to insert, read and change charts and diagrams. Tools for a model
Words used in these pages
| Word | Meaning |
|---|---|
| Chart Data | The columns and rows a chart stores. Data |
| Chart Spec | How a chart shows its data: type, title, colors, axes. Charts |
| Renderer | The adapter that draws with one chart or diagram library. Renderers |
| Chart syntax | The rows a chart is written in, such as Jan | 2. Chart syntax |
| Quick Input | The box ::: opens, where typed text becomes a chart or a diagram. Quick Input |
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.