---
title: "Pasting"
description: "When you paste Mermaid, draw.io XML or BPMN XML into the document, the extension turns the text into a chart or a diagram."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/data/pasting"
---

# Pasting

When you paste Mermaid, draw.io XML or BPMN XML into the document, the extension turns the text into a chart or a diagram.

## What pasted text becomes

| Pasted text                                                                                                                          | Becomes                                                                                                                                              |
| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rows, as in the [Chart syntax](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/chart-syntax.md), or CSV with at least two columns | No chart, they paste as usual. To make a chart, use [`insertFromText`](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/pasting.md#insertfromtext) |
| A Mermaid chart, such as `pie` or `sankey-beta`                                                                                      | A chart, with its data to edit ([`importMermaidChart`](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/overview.md#importmermaidchart))         |
| Any other Mermaid kind                                                                                                               | A diagram ([Formats](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats.md#mermaid-diagrams))                                       |
| draw\.io XML or BPMN XML                                                                                                             | A diagram ([Formats](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats.md))                                                        |
| Rows from a spreadsheet, while a chart is selected                                                                                   | That chart's new data, see [Onto a selected chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/pasting.md#onto-a-selected-chart)              |
| Anything, into a code block                                                                                                          | The text, unchanged                                                                                                                                  |

## How pasted text is read

The extension finds pasted Mermaid in three forms:

- Bare, which means the Mermaid text alone, with nothing around it.
- In a ` ```mermaid ` fence.
- As a code block with the language `mermaid`.

Bare Mermaid needs its kind, such as `flowchart`, on the first line, and more than one line. So
a sentence that starts with "pie" stays a sentence.

A code block that already holds diagram source becomes the diagram with
[`convertCodeBlockToDiagram`](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md#convertcodeblocktodiagram), or with
[Mod-Enter](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/quick-input.md#mod-enter-in-a-code-block).

## Detecting text in a field of your own

To find out what the text in a field of your own, outside the editor, would become, call
`detectDiagramInput`.

### detectDiagramInput

`detectDiagramInput(text, options?)` returns `{ kind, source }`, or `null`.

```ts
import { detectDiagramInput } from '@tiptap-pro/extension-diagrams'

const detected = detectDiagramInput(text)
if (detected?.kind === 'mermaid-diagram')
  editor.commands.insertFlowDiagram({ source: detected.source })
```

| `kind`              | Text                                                                                                                                                 | Command to call                                                |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| `'mermaid-chart'`   | A Mermaid chart, such as `pie` or `sankey-beta`, with at least one row                                                                               | `importMermaidChart({ source })`                               |
| `'mermaid-diagram'` | Any other [Mermaid kind](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md#mermaid-kinds), on more than one line or in a fence | `insertFlowDiagram({ source })`                                |
| `'drawio'`          | An `<mxfile>` or `<mxGraphModel>`                                                                                                                    | `insertFlowDiagram({ source, format: 'drawio' })`              |
| `'bpmn'`            | BPMN 2.0 `<definitions>`                                                                                                                             | `insertFlowDiagram({ source, format: 'bpmn' })`                |
| `'chart-syntax'`    | Rows with a delimiter, as the Chart syntax or CSV, with at least two columns                                                                         | `insertChartFrom({ format: 'chart-syntax', content: source })` |

- `source` is the text with a ` ```mermaid ` fence removed.
- A sentence, a lone Mermaid keyword and XML that cannot be read return `null`.
- If you set the `delimiters` or `decimalSeparator` options, pass the same values as the second
  argument: `detectDiagramInput(text, { delimiters, decimalSeparator })`.
- A paste uses this function only for Mermaid, draw\.io and BPMN, so pasted rows stay rows.
  [`insertFromText`](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/pasting.md#insertfromtext) uses it for every kind, rows included.

## Onto a selected chart

Spreadsheet apps copy rows as lines of cells separated by tabs.

- **When a chart is selected**, the pasted rows replace its data and keep its spec, through
  [`updateChartFromGrid`](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/overview.md#updatechartfromgrid).
- **When the selected chart is read-only**, the paste changes nothing.
- **Anywhere else**, the rows paste as they would without the extension.

## Commands

### insertFromText

Inserts a chart or a diagram from a text. It reads the text with `detectDiagramInput` and the
editor's `delimiters` and `decimalSeparator`. Unlike a paste, it also makes a chart from rows.

```ts
editor.commands.insertFromText({ text: 'Month | Sales\nJan | 2\nFeb | 3' })
```

| Option | Type     | Description                                          |
| ------ | -------- | ---------------------------------------------------- |
| `text` | `string` | The text, as it would be pasted                      |
| `pos`  | `number` | The position to insert at. Defaults to the selection |

Returns `false` for text that becomes neither a chart nor a diagram.