在图表中编辑

图中的文本

在可编辑编辑器中，双击 Mermaid 图中的文本将在其上方打开一个文本字段。该字段保存该文本。

• 输入或离开该字段通过 updateFlowDiagram 将文本写入源。
• Escape 关闭该字段而不做任何更改。
• 仅文本发生变化。 形状和线条来自源。
• 从表格中绘制的图表不打开任何字段。其文本属于表格。

您自己需要的图表渲染器editing。

双击编辑

在任何其他类型中，扩展程序都会在源中查找单击的文本。这涵盖了时间线的周期和事件、看板的列和卡片、思维导图的节点以及旅程或甘特图的任务和部分。

文本必须在源中仅出现一次，作为完整的项目，而不是作为较长文本的一部分。项目从行首开始，在括号、引号、分隔符（例如 : 或 ,）之后，或者在 title 或 section 之后。它以右括号、引号、分隔符或行尾结束。

• 出现两次的文本不会打开任何内容。例如，在 gitGraph 中，分支名称出现在 branch dev 和 checkout dev 中。双击分支不会打开任何字段，两者都保持原样。
• Mermaid 添加到绘制的图表中的文本（例如计数）不在源中。它什么也没打开。
• **带有 :、;、,、|、%、#、"、<、>、括号或换行符的新文本不会以这些类型编写，因为它会比文本改变更多。
• 没有文本的边缘没有任何可双击的内容。在源中或使用 renameMermaidLabel.
• 作为一条语句编写的边，例如 A & B --> C，共享其文本。
• 文本中的直双引号变成印刷双引号（“ ”）。

移动形状

在可编辑编辑器中，您可以拖动 Mermaid 流程图的形状来移动它。

• 拖动形状旁边的空白点可平移放大的图表，请参阅大小和视图。
• 偏移 捕捉到图表中 10 个单位的步长。
• **当您放开指针时，**通过 setDiagramNodePosition.一次撤消即可恢复形状。
• 要将所有形状放回原处， 调用 resetDiagramPositions.

如何绘制移动的形状

Mermaid 首先从源开始布置图表。然后，在编辑器和每个导出中，在其偏移处绘制移动的形状。

• 移动形状的线条从一个边框直接绘制到另一个边框，其标签位于中间。
• 未移动的形状之间的线条保持其布线。
• 子图的框架保留在布局放置的位置，即使您将形状移出其中也是如此。
• 当您将形状移过其边缘时，图表会变大。

偏移量的保存位置

偏移量按节点 ID 存储在 options.positions 中。

• 重命名源中的 id 会丢失偏移量。
• 从源中消失的 id 不会移动任何内容。
• 源的更改会保留偏移量。
• 仅流程图可以通过这种方式移动。其他 Mermaid 类型的形状、draw.io 和 BPMN 图则不能。您自己需要的图表渲染器nodeAt和movePositions。

图中的线条

您可以使用 linkStyle 在其源中设置Mermaid 流程图线条的样式。在源之外没有他们的领域。

flowchart LR
  a --> b --> c
  linkStyle 0 stroke-dasharray: 5 5, stroke-width: 2px

命令

setDiagramNodePosition

将选定 Mermaid 流程图的一种形状或 pos 处的形状移离布局放置的位置。

editor.commands.setDiagramNodePosition({ nodeId: 'ship', dx: 40, dy: 60 })

对于不是 Mermaid 流程图的图表、带有除 - 和 _ 之外的空格或标点符号的 id 以及不是数字或超过 10,000 的偏移量，返回 false。

resetDiagramPositions

将每个移动的形状放回布局放置的位置。

editor.commands.resetDiagramPositions()

对于未移动形状的图表，返回 false。

不带编辑器

@tiptap-pro/extension-diagrams/core 中的这些函数在源上运行，无需编辑器或绘制图表：

import { renameMermaidLabel } from '@tiptap-pro/extension-diagrams/core'

const source = renameMermaidLabel(
  'flowchart LR\n  A[Order] --> B{Paid?}',
  { kind: 'edge', id: 'L_A_B_0' },
  'placed',
)
// 'flowchart LR\n  A[Order] -->|"placed"| B{Paid?}'

target 为 { kind, id }: