---
title: "Quick Input"
description: "The Quick Input is a text field inside the document."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/data/quick-input"
---

# Quick Input

The Quick Input is a text field inside the document.

## Quick start

Rows become a chart. The first line may name its type:

```txt
bar
Month | Online | Retail
Jan   | 42     | 30
Feb   | 48     | 28
```

Mermaid becomes a diagram:

```txt
flowchart LR
  idea[Idea] --> draft[Draft]
```

To confirm, press Escape, or press Enter on an empty last line. When you edit a text in a
[chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/editing.md) or a [diagram](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/editing.md), Escape does the opposite:
it closes the field and drops the change.

## What the text becomes

| Text in the Quick Input                        | Becomes   | Read as                                                                                                  |
| ---------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
| Rows, with an optional type line such as `bar` | A chart   | [Writing a chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/quick-input.md#writing-a-chart)     |
| A Mermaid chart, such as `pie` or `sankey`     | A chart   | Mermaid, with its type and title from its header                                                         |
| Any other Mermaid diagram                      | A diagram | [Writing a diagram](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/quick-input.md#writing-a-diagram) |
| draw\.io XML or BPMN XML, pasted               | A diagram | Its source                                                                                               |

`pie` above rows, such as `Dogs, 3`, is a type line, not Mermaid. The Quick Input reads text with
the same rules as a [paste](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/pasting.md#how-pasted-text-is-read).

The Quick Input is a node named `diagramInput`. The commands below drive it from a toolbar of
your own.

## Writing a chart

A chart is written in the [Chart syntax](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/chart-syntax.md): rows, and a first line that may name
the type. That page has the header rule, the default type, delimiters, numbers and quotes.

## Writing a diagram

You write a diagram in its own language. The Quick Input keeps the text as you typed it.

- **Mermaid**, such as `flowchart LR` with a line `A --> B`. Its first line names the kind of
  diagram. See [Diagrams](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md).
- **draw\.io XML or BPMN XML**, which you paste from the tools you draw them in. See
  [draw.io](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/drawio.md) and [BPMN](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/bpmn.md).

## Back into text

`editChartAsText` and `editDiagramAsText` open a chart or a Mermaid diagram in the Quick Input
again. If you change the first line, a chart becomes another chart type or a diagram.

Open a chart as text, then write `flowchart LR` and a line such as `A --> B`:

> **Interactive demo:** [DiagramsOverview](https://embed-pro.tiptap.dev/preview/Extensions/DiagramsOverview)

## Keys in the Quick Input

Mod is Cmd on macOS and Ctrl on other systems.

| Key               | In the Quick Input                                                |
| ----------------- | ----------------------------------------------------------------- |
| Enter             | A new line. On an empty last line, draws the chart or the diagram |
| Shift-Enter       | A new line, also on an empty last line                            |
| Mod-Enter, Escape | Draws the chart or the diagram                                    |
| Mod-Shift-A       | Selects everything typed into the Quick Input                     |
| Mod-A             | Still selects the whole document                                  |
| Backspace         | In an empty Quick Input, removes it                               |

After a first line that holds only a type name, such as `pie` or `bar`, Enter starts a new line
and the name stays as the type line. Below a lone type line, the Quick Input shows example rows
for that type until you type a row.

### When the Quick Input closes

- **Moving the selection out of the Quick Input** draws it, as confirming does.
- **An empty Quick Input** becomes an empty paragraph.
- **Text that cannot be read** keeps the Quick Input open, and `confirmDiagramInput` returns
  `false`.

## Mod-Enter in a code block

The key that confirms the Quick Input also turns a code block into a chart or a diagram.

- [Mermaid chart source](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/overview.md#importmermaidchart), such as `pie` or
  `sankey-beta`, becomes a chart, as with `convertCodeBlockToChart`.
- Other Mermaid source becomes a diagram, as with `convertCodeBlockToDiagram`.
- In a code block of anything else, the key does what it did before. In Tiptap, that is leaving
  the code block.

Any node with `code: true` in its spec counts as a code block. Set another key, or `false` for no
key, with the [`codeBlockShortcut`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#codeblockshortcut) option.

## Commands

### confirmDiagramInput

Turns the open Quick Input, or a Quick Input shown as a table, into a chart or a diagram.

```ts
editor.commands.confirmDiagramInput()
```

| Option | Type     | Description                                            |
| ------ | -------- | ------------------------------------------------------ |
| `pos`  | `number` | A position inside the input. Defaults to the selection |

`detectDiagramInput` decides what the text becomes. Mermaid diagram source, draw\.io XML or BPMN
XML becomes a diagram when the `flowDiagram` node is in the schema.

Returns `false` without an open input, or when the text cannot be read.

### setDiagramInputType

Sets the chart type the open input becomes. A type line already there is rewritten to the new
type.

```ts
editor.commands.setDiagramInputType('bar')
```

| Parameter | Type        | Description                                               |
| --------- | ----------- | --------------------------------------------------------- |
| `type`    | `ChartType` | A built-in chart type or one registered with `chartTypes` |

Returns `false` for an unknown type or without an open input.

### setDiagramInputView

Switches the open input between the text field and a table you fill in. It keeps what you typed.

```ts
editor.commands.setDiagramInputView('table')
```

| Parameter | Type                        | Description                                                |
| --------- | --------------------------- | ---------------------------------------------------------- |
| `view`    | `'chart-syntax' \| 'table'` | `'chart-syntax'` for the text field, `'table'` for a table |

The table view needs table nodes in the schema.

Returns `false` without an open input, or for `'table'` without a table in the schema.

### setDiagramInputDelimiter

Makes the open Quick Input split its text at one configured delimiter, instead of the one it
finds.

```ts
editor.commands.setDiagramInputDelimiter(';')
```

| Parameter   | Type             | Description                                                        |
| ----------- | ---------------- | ------------------------------------------------------------------ |
| `delimiter` | `string \| null` | One of the configured `delimiters`. `null` goes back to finding it |

The choice lasts while the Quick Input is open. The chart it becomes remembers the delimiter it
was split with.

Returns `false` without an open Quick Input, or for a delimiter that is not configured.

### editChartAsText

Turns a chart into a Quick Input with its data in the Chart syntax.

```ts
editor.commands.editChartAsText()
```

| Option | Type     | Description                                          |
| ------ | -------- | ---------------------------------------------------- |
| `pos`  | `number` | The chart's position. Defaults to the selected chart |

When you confirm the Quick Input, the chart gets back its spec, its Renderer and its Data
Source.

Returns `false` for a chart whose linked source is read-only.

### editDiagramAsText

Turns a Mermaid diagram into a Quick Input that holds its source.

```ts
editor.commands.editDiagramAsText()
```

| Option | Type     | Description                                              |
| ------ | -------- | -------------------------------------------------------- |
| `pos`  | `number` | The diagram's position. Defaults to the selected diagram |

When you confirm it, the text is read like any other. Rows below a type line such as `bar` make
it a chart. A diagram that keeps its kind, such as a flowchart, gets back its title,
description, view and node positions.

Returns `false` for draw\.io and BPMN, and for a diagram drawn from a table.

### editChartAsTable

Turns a chart into a table of its data, to edit the data.

```ts
editor.commands.editChartAsTable()
```

| Option | Type     | Description                                          |
| ------ | -------- | ---------------------------------------------------- |
| `pos`  | `number` | The chart's position. Defaults to the selected chart |

When you move the selection out of the table, it becomes a chart again.

Returns `false` for a read-only chart or without a table in the schema.