--- title: "Quick Input" description: "The Quick Input is a box in the document where typed or pasted text becomes a chart or a diagram." canonical_url: "https://tiptap.dev/docs/diagrams/data/quick-input" --- # Quick Input The Quick Input is a box in the document where typed or pasted text becomes a chart or a diagram. ## 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] ``` Press Escape, or Enter on an empty last line, to draw it. ## What the text becomes | Text in the box | Becomes | Read as | | ---------------------------------------------- | --------- | ------------------------------------------------------------------------------------------- | | Rows, with an optional type line such as `bar` | A chart | [Writing a chart](https://tiptap.dev/docs/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.dev/docs/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 Node** of the box is `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.dev/docs/diagrams/data/chart-syntax.md): rows, and a first line that may name the type. ```txt bar Month | Online | Retail Jan | 42 | 30 ``` - **The first row** is the header when it holds no number outside the first column. - **Without a type line**, the chart takes `chart.defaultType`. - **Delimiters, numbers and quotes** are on [Chart syntax](https://tiptap.dev/docs/diagrams/data/chart-syntax.md). ## Writing a diagram A diagram is written in its own language, kept as it is typed: - **Mermaid**, such as `flowchart LR` with a line `A --> B`. Its first line names the kind of diagram, as a type line does for a chart. See [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md). - **draw\.io XML or BPMN XML**, pasted. They are drawn, not typed; see [draw.io](https://tiptap.dev/docs/diagrams/renderers/drawio.md) and [BPMN](https://tiptap.dev/docs/diagrams/renderers/bpmn.md). ## Back into text A chart or a Mermaid diagram opens in the box again with `editChartAsText` or `editDiagramAsText`. Change its first line, and a chart becomes another 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 box | 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 box | | Mod-A | Still selects the whole document | | Backspace | In an empty box, removes it | | Enter after a type name | `pie`, `bar` … alone on the first line sets the chart type and stays as that line | - **Below a lone type line**, the box shows example rows for that type until a row is typed. ### When the box closes - **Moving the selection out of the box** draws it as well. - **An empty box** becomes an empty paragraph. - **Text that cannot be read** keeps the box open, and `confirmDiagramInput` returns `false`. ## Commands ### confirmDiagramInput Turns the open Quick Input, or a table used as an input, into a chart or a diagram. ```ts editor.commands.confirmDiagramInput() ``` | Option | Type | Description | | ------ | -------- | ------------------------------------------------------ | | `pos` | `number` | A position inside the input. Defaults to the selection | - Mermaid diagram source, draw\.io or BPMN XML becomes a diagram, when the `flowDiagram` Node is in the Schema. - `detectDiagramInput` decides which. Returns `false` when the text cannot be read. ### setDiagramInputType Sets the chart type the open input becomes. A first line that already names a type is rewritten to the new one, so the text and the box agree. ```ts editor.commands.setDiagramInputType('bar') ``` | Parameter | Type | Description | | --------- | ----------- | --------------------------------------------------------- | | `type` | `ChartType` | A built-in chart type or one registered with `chartTypes` | ### setDiagramInputView Switches the open input between the text box and a table, keeping what was typed. ```ts editor.commands.setDiagramInputView('table') ``` | Parameter | Type | Description | | --------- | --------------------------- | -------------------------------------------------------- | | `view` | `'chart-syntax' \| 'table'` | `'chart-syntax'` for the text box, `'table'` for a table | The table view needs table Nodes in the Schema. ### setDiagramInputDelimiter Makes the open Quick Input split its text at one configured delimiter, instead of the first 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 box is open. - The chart it becomes remembers the delimiter it was split with. Returns `false` without an open box or for a delimiter 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 | The chart's spec, Renderer and source come back when the box is confirmed. Returns `false` for a chart whose linked source is read-only. ### editDiagramAsText Turns a Mermaid diagram into a Quick Input holding its source. ```ts editor.commands.editDiagramAsText() ``` | Option | Type | Description | | ------ | -------- | -------------------------------------------------------- | | `pos` | `number` | The diagram's position. Defaults to the selected diagram | - Confirming the box reads it as any text: Mermaid stays a diagram, rows after a type line such as `bar` make it a chart. - Title, description, view and node positions come back when it stays a diagram of the same kind, such as a flowchart. 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. ```ts editor.commands.editChartAsTable() ``` | Option | Type | Description | | ------ | -------- | ---------------------------------------------------- | | `pos` | `number` | The chart's position. Defaults to the selected chart | Moving the selection out of the table makes it a chart again. Returns `false` for a read-only chart or without a table in the Schema.