---
title: "Commands"
description: "Every change to a chart or a diagram is a Command."
canonical_url: "https://tiptap.dev/docs/diagrams/api-reference/commands"
---

# Commands

Every change to a chart or a diagram is a Command.

```ts
editor.commands.updateChartSpec({ spec: { type: 'area', stacked: true } })
editor.chain().focus().insertDiagramInput({ type: 'pie' }).run()
```

## How every Command behaves

- **With `pos`** a Command acts on the chart or diagram at that position.
- **Without `pos`** it acts on the selected one.
- **With nothing to act on** it returns `false` and changes nothing.
- **Reading** never needs a Command. The readers are on [`editor.storage.diagrams`](https://tiptap.dev/docs/diagrams/api-reference/storage.md).

## Charts

| Command                                                                                                  | What it does                                                 | Page                                                                |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------- |
| [`insertChart`](https://tiptap.dev/docs/diagrams/charts/overview.md#insertchart)                         | Inserts a chart from Chart Data and a Chart Spec             | [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)       |
| [`insertChartFrom`](https://tiptap.dev/docs/diagrams/charts/overview.md#insertchartfrom)                 | Inserts a chart written in a registered format               | [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)       |
| [`importMermaidChart`](https://tiptap.dev/docs/diagrams/charts/overview.md#importmermaidchart)           | Inserts a chart from Mermaid chart source, such as `pie`     | [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)       |
| [`insertFromText`](https://tiptap.dev/docs/diagrams/data/pasting.md#insertfromtext)                      | Inserts whatever a text is, as a paste would                 | [Pasting](https://tiptap.dev/docs/diagrams/data/pasting.md)         |
| [`convertCodeBlockToChart`](https://tiptap.dev/docs/diagrams/charts/overview.md#convertcodeblocktochart) | Replaces a code block of Mermaid chart source with the chart | [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)       |
| [`insertDiagramInput`](https://tiptap.dev/docs/diagrams/charts/overview.md#insertdiagraminput)           | Opens an empty Quick Input                                   | [Charts](https://tiptap.dev/docs/diagrams/charts/overview.md)       |
| [`updateChartSpec`](https://tiptap.dev/docs/diagrams/charts/appearance.md#updatechartspec)               | Changes fields of the Chart Spec                             | [Appearance](https://tiptap.dev/docs/diagrams/charts/appearance.md) |
| [`setChartRenderer`](https://tiptap.dev/docs/diagrams/charts/appearance.md#setchartrenderer)             | Chooses the Renderer of one chart                            | [Appearance](https://tiptap.dev/docs/diagrams/charts/appearance.md) |
| [`updateChartAxis`](https://tiptap.dev/docs/diagrams/charts/axes.md#updatechartaxis)                     | Changes one axis: title, range, lines, step, labels          | [Axes](https://tiptap.dev/docs/diagrams/charts/axes.md)             |
| [`applyChartLook`](https://tiptap.dev/docs/diagrams/charts/looks.md#applychartlook)                      | Gives a chart the look of another one                        | [Looks](https://tiptap.dev/docs/diagrams/charts/looks.md)           |
| [`convertChartToImage`](https://tiptap.dev/docs/diagrams/export.md#convertcharttoimage)                  | Replaces a chart with an image of it                         | [Export](https://tiptap.dev/docs/diagrams/export.md)                |
| [`convertImageToChart`](https://tiptap.dev/docs/diagrams/export.md#convertimagetochart)                  | Turns such an image back into the chart                      | [Export](https://tiptap.dev/docs/diagrams/export.md)                |
| [`redrawChartImage`](https://tiptap.dev/docs/diagrams/export.md#redrawchartimage)                        | Draws such an image again from the chart it keeps            | [Export](https://tiptap.dev/docs/diagrams/export.md)                |

## Data

| Command                                                                                                     | What it does                                             | Page                                                                |
| ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------- |
| [`updateChartData`](https://tiptap.dev/docs/diagrams/data/overview.md#updatechartdata)                      | Replaces the Chart Data                                  | [Data](https://tiptap.dev/docs/diagrams/data/overview.md)           |
| [`setChartLabelColumn`](https://tiptap.dev/docs/diagrams/data/overview.md#setchartlabelcolumn)              | Chooses the column that names the rows                   | [Data](https://tiptap.dev/docs/diagrams/data/overview.md)           |
| [`setChartSeriesIn`](https://tiptap.dev/docs/diagrams/data/overview.md#setchartseriesin)                    | Swaps rows and columns of what is drawn                  | [Data](https://tiptap.dev/docs/diagrams/data/overview.md)           |
| [`updateChartFrom`](https://tiptap.dev/docs/diagrams/data/overview.md#updatechartfrom)                      | Replaces data and spec from text in a format             | [Data](https://tiptap.dev/docs/diagrams/data/overview.md)           |
| [`updateChartFromGrid`](https://tiptap.dev/docs/diagrams/data/overview.md#updatechartfromgrid)              | Replaces the data from a grid of strings                 | [Data](https://tiptap.dev/docs/diagrams/data/overview.md)           |
| [`updateChartFromTable`](https://tiptap.dev/docs/diagrams/data/overview.md#updatechartfromtable)            | Replaces the data from table JSON                        | [Data](https://tiptap.dev/docs/diagrams/data/overview.md)           |
| [`confirmDiagramInput`](https://tiptap.dev/docs/diagrams/data/quick-input.md#confirmdiagraminput)           | Turns the open Quick Input into a chart                  | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`setDiagramInputType`](https://tiptap.dev/docs/diagrams/data/quick-input.md#setdiagraminputtype)           | Sets the type the open Quick Input becomes               | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`setDiagramInputView`](https://tiptap.dev/docs/diagrams/data/quick-input.md#setdiagraminputview)           | Switches the open input between text and table           | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`setDiagramInputDelimiter`](https://tiptap.dev/docs/diagrams/data/quick-input.md#setdiagraminputdelimiter) | Fixes the delimiter of the open Quick Input              | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`editChartAsText`](https://tiptap.dev/docs/diagrams/data/quick-input.md#editchartastext)                   | Turns a chart into a Quick Input of its data             | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`editChartAsTable`](https://tiptap.dev/docs/diagrams/data/quick-input.md#editchartastable)                 | Turns a chart into a table of its data while editing     | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`editDiagramAsText`](https://tiptap.dev/docs/diagrams/data/quick-input.md#editdiagramastext)               | Turns a Mermaid diagram into a Quick Input of its source | [Quick Input](https://tiptap.dev/docs/diagrams/data/quick-input.md) |
| [`convertTableToChart`](https://tiptap.dev/docs/diagrams/data/tables.md#converttabletochart)                | Replaces a table with a chart of its data                | [Tables](https://tiptap.dev/docs/diagrams/data/tables.md)           |
| [`convertChartToTable`](https://tiptap.dev/docs/diagrams/data/tables.md#convertcharttotable)                | Replaces a chart with a table of its data                | [Tables](https://tiptap.dev/docs/diagrams/data/tables.md)           |
| [`insertLinkedChart`](https://tiptap.dev/docs/diagrams/data/tables.md#insertlinkedchart)                    | Inserts a chart that follows a table                     | [Tables](https://tiptap.dev/docs/diagrams/data/tables.md)           |
| [`updateLinkedTable`](https://tiptap.dev/docs/diagrams/data/tables.md#updatelinkedtable)                    | Changes how a chart or a diagram reads its table         | [Tables](https://tiptap.dev/docs/diagrams/data/tables.md)           |
| [`setChartLayout`](https://tiptap.dev/docs/diagrams/data/tables.md#setchartlayout)                          | Chart, table, or both in the document                    | [Tables](https://tiptap.dev/docs/diagrams/data/tables.md)           |
| [`linkChartToTable`](https://tiptap.dev/docs/diagrams/data/tables.md#linkcharttotable)                      | Makes a chart follow a table anywhere in the document    | [Tables](https://tiptap.dev/docs/diagrams/data/tables.md)           |
| [`linkChartSource`](https://tiptap.dev/docs/diagrams/data/sources.md#linkchartsource)                       | Links a chart to a Data Source                           | [Data Sources](https://tiptap.dev/docs/diagrams/data/sources.md)    |
| [`syncChartData`](https://tiptap.dev/docs/diagrams/data/sources.md#syncchartdata)                           | Writes a new snapshot                                    | [Data Sources](https://tiptap.dev/docs/diagrams/data/sources.md)    |
| [`detachChartSource`](https://tiptap.dev/docs/diagrams/data/sources.md#detachchartsource)                   | Stops following the source, keeps the snapshot           | [Data Sources](https://tiptap.dev/docs/diagrams/data/sources.md)    |
| [`relinkChartSource`](https://tiptap.dev/docs/diagrams/data/sources.md#relinkchartsource)                   | Follows the source again                                 | [Data Sources](https://tiptap.dev/docs/diagrams/data/sources.md)    |

## Diagrams

| Command                                                                                                             | What it does                                             | Page                                                                         |
| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------------------------------- |
| [`insertFlowDiagram`](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#insertflowdiagram)                 | Inserts a diagram from Mermaid, draw\.io or BPMN source  | [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md)       |
| [`updateFlowDiagram`](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#updateflowdiagram)                 | Changes source, format, title or description             | [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md)       |
| [`setFlowDiagramView`](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#setflowdiagramview)               | Shows the picture or the source                          | [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md)       |
| [`convertCodeBlockToDiagram`](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#convertcodeblocktodiagram) | Replaces a code block of Mermaid source with the diagram | [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md)       |
| [`insertDiagramFromTable`](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md#insertdiagramfromtable)     | Inserts a flowchart drawn from a table                   | [From a table](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md) |
| [`linkDiagramToTable`](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md#linkdiagramtotable)             | Draws a diagram from a table and follows it              | [From a table](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md) |
| [`detachDiagramFromTable`](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md#detachdiagramfromtable)     | Stops following the table                                | [From a table](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md) |
| [`renameDiagramLane`](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md#renamediagramlane)               | Renames a lane in every row of the table                 | [From a table](https://tiptap.dev/docs/diagrams/flow-diagrams/from-table.md) |
| [`setDiagramNodePosition`](https://tiptap.dev/docs/diagrams/flow-diagrams/editing.md#setdiagramnodeposition)        | Moves a shape of a flowchart                             | [Editing](https://tiptap.dev/docs/diagrams/flow-diagrams/editing.md)         |
| [`resetDiagramPositions`](https://tiptap.dev/docs/diagrams/flow-diagrams/editing.md#resetdiagrampositions)          | Puts every moved shape back                              | [Editing](https://tiptap.dev/docs/diagrams/flow-diagrams/editing.md)         |

## Charts and diagrams

| Command                                                                                       | What it does                               | Page                                                                             |
| --------------------------------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- |
| [`setDiagramSize`](https://tiptap.dev/docs/diagrams/guides/size-and-view.md#setdiagramsize)   | Gives a chart or a diagram a size          | [Size and view](https://tiptap.dev/docs/diagrams/guides/size-and-view.md)        |
| [`setDiagramAlign`](https://tiptap.dev/docs/diagrams/guides/size-and-view.md#setdiagramalign) | Places it left, centered or right          | [Size and view](https://tiptap.dev/docs/diagrams/guides/size-and-view.md)        |
| [`updateFromText`](https://tiptap.dev/docs/diagrams/guides/split-view.md#updatefromtext)      | Changes a chart or a diagram from its text | [Text beside the picture](https://tiptap.dev/docs/diagrams/guides/split-view.md) |