快速输入

快速入门

输入数据行即可生成图表。第一行可以指定图表类型：

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

Mermaid 流程图源码也可通过快速输入生成流程图：

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

按 Escape，或在末行为空时按 Enter，即可确认输入。编辑图表或流程图中的文本时，按 Escape 会关闭输入框并撤销本次修改。

输入内容的处理方式

pie 下方的行（例如 Dogs, 3）是数据行，不是 Mermaid 源码。快速输入按照粘贴中的规则读取文本。

快速输入是名为 diagramInput 的节点。您可以通过下方命令从自定义工具栏控制它。

编写图表

图表使用图表语法编写：每行表示一条记录，第一行也可以指定图表类型。该页面介绍标题规则、默认类型、分隔符、数字和引号。

编写流程图

您可以使用 Mermaid、draw.io 或 BPMN 各自的语法编写流程图。快速输入会保留您输入的源码。

• Mermaid，例如包含 A --> B 连线的 flowchart LR。第一行指定流程图类型。请参阅流程图。
• draw.io XML 或 BPMN XML，您可以从绘制它们的工具中粘贴它们。请参阅 draw.io 和 BPMN。

返回文本

editChartAsText 和 editDiagramAsText 会重新打开快速输入，分别编辑图表或 Mermaid 流程图。修改第一行可以更改图表类型或流程图类型。

以文本形式打开流程图，然后输入 flowchart LR 和一条连线，例如 A --> B：

快速输入中的键

Mod 在 macOS 上为 Cmd，在其他系统上为 Ctrl。

如果第一行只有类型名称（例如 pie 或 bar），按 Enter 会开始新行，并保留该类型行。在只有类型名称的行下方，快速输入会显示该类型的示例数据，直到您开始输入。

当快速输入关闭时

• 将选区移出快速输入会像确认输入一样生成图表或流程图。
• 空的快速输入将成为空段落。
• 无法解析的文本会使快速输入保持打开状态，并让 confirmDiagramInput 返回 false。

代码块中的 Mod-Enter

确认快速输入的按键也可将代码块转换为图表或流程图。

• Mermaid 图表源码，例如 pie 或 sankey-beta，会转换为图表，就像调用 convertCodeBlockToChart 一样。
• 其他 Mermaid 源码会转换为流程图，就像调用 convertCodeBlockToDiagram 一样。
• 在任何其他代码块中，该键都会执行其之前执行的操作。在 Tiptap 中，这就是离开代码块。

规范中包含 code: true 的任何节点都算作代码块。使用 codeBlockShortcut 选项设置另一个键，或设置 false（无键）。

命令

confirmDiagramInput

将当前打开的快速输入（或表格视图）转换为图表或流程图。

editor.commands.confirmDiagramInput()

detectDiagramInput 会识别输入内容。当 flowDiagram 节点包含在编辑器 schema 中时，Mermaid 流程图源码、draw.io XML 或 BPMN XML 会转换为流程图。

在没有打开输入或无法读取文本时返回 false。

setDiagramInputType

设置当前快速输入生成的图表类型。已有的类型行会被替换为新类型。

editor.commands.setDiagramInputType('bar')

如果类型未知或当前没有打开快速输入，则返回 false。

setDiagramInputView

在文本输入和表格视图之间切换当前快速输入，并保留已输入的内容。

editor.commands.setDiagramInputView('table')

表格视图要求编辑器 schema 中包含表格节点。

如果当前没有打开快速输入，或 schema 中没有表格节点但视图设为 'table'，则返回 false。

setDiagramInputDelimiter

让当前快速输入使用指定的分隔符拆分文本，而不是自动检测分隔符。

editor.commands.setDiagramInputDelimiter(';')

在快速输入打开期间，所选分隔符会保持有效。生成的图表也会记录用于拆分数据的分隔符。

在没有打开的快速输入或未配置分隔符的情况下返回 false。

editChartAsText

将图表转换为快速输入，其数据采用图表语法。

editor.commands.editChartAsText()

确认快速输入后，图表会恢复原有规格、渲染器和数据源。

对于链接源为只读的图表，返回 false。

editDiagramAsText

将 Mermaid 流程图转换为包含其源码的快速输入。

editor.commands.editDiagramAsText()

确认后，文本会按普通输入处理。类型行（例如 bar）下方的数据行会生成图表。若流程图仍保持原类型，则会保留其标题、描述、视图和节点位置。

对于 draw.io、BPMN 流程图，以及由表格生成的流程图，返回 false。

editChartAsTable

将图表转换为数据表，以编辑数据。

editor.commands.editChartAsTable()

当您将所选内容移出表格时，它会再次变成图表。

如果图表为只读，或 schema 中没有表格节点，则返回 false。