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]

Press Escape, or Enter on an empty last line, to draw it.

What the text becomes

• 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: rows, and a first line that may name the type.

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.

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.
• draw.io XML or BPMN XML, pasted. They are drawn, not typed; see draw.io and BPMN.

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:

Keys in the box

• 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.

editor.commands.confirmDiagramInput()

• 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.

editor.commands.setDiagramInputType('bar')

setDiagramInputView

Switches the open input between the text box and a table, keeping what was typed.

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

editor.commands.setDiagramInputDelimiter(';')

• 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.

editor.commands.editChartAsText()

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.

editor.commands.editDiagramAsText()

• 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.

editor.commands.editChartAsTable()

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.