Quick Input

Quick start

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

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

Mermaid becomes a diagram:

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 or a diagram, Escape does the opposite: it closes the field and drops the change.

What the text becomes

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.

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: 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.
• draw.io XML or BPMN XML, which you paste from the tools you draw them in. See draw.io and BPMN.

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:

Keys in the Quick Input

Mod is Cmd on macOS and Ctrl on other systems.

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, 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 option.

Commands

confirmDiagramInput

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

editor.commands.confirmDiagramInput()

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.

editor.commands.setDiagramInputType('bar')

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.

editor.commands.setDiagramInputView('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.

editor.commands.setDiagramInputDelimiter(';')

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.

editor.commands.editChartAsText()

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.

editor.commands.editDiagramAsText()

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.

editor.commands.editChartAsTable()

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.