---
title: "格式"
description: "每个图表都以一种格式存储其源，由其格式属性命名。"
canonical_url: "https://tiptap.zhcndoc.com/diagrams/flow-diagrams/formats"
---

# 格式

每个图表都以一种格式存储其源，由其格式属性命名。

## 格式

| `format`    | 源                 | 由                                                                                                                  |
| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ |
| `'mermaid'` | Mermaid文本         | mermaid.js 或 Pele，请参阅 [Mermaid 流程图](https://tiptap.zhcndoc.com/diagrams/flow-diagrams/formats.md#mermaid-diagrams) |
| `'drawio'`  | draw\.io XML      | Draw\.io 图表渲染器，请参阅[draw.io 图](https://tiptap.zhcndoc.com/diagrams/flow-diagrams/formats.md#drawio-diagrams)        |
| `'bpmn'`    | BPMN 2.0 XML 及其布局 | BPMN 图渲染器，请参见 [BPMN 图](https://tiptap.zhcndoc.com/diagrams/flow-diagrams/formats.md#bpmn-diagrams)                 |
| 另一个 id      | 按原样存储             | A 图列出它的渲染器，请参阅[其他格式](https://tiptap.zhcndoc.com/diagrams/flow-diagrams/formats.md#other-formats)                   |

## Mermaid 流程图

带有 `format: 'mermaid'` 的图保存Mermaid文本，在您键入时存储，但没有 `%%{…}%%` 指令和 frontmatter。请参阅[来源是 data](https://tiptap.zhcndoc.com/diagrams/flow-diagrams/overview.md#source-is-data)。

```ts
editor.commands.insertFlowDiagram({ source: 'flowchart LR\n  A --> B', title: 'Order process' })
```

源以 Mermaid 类型开头，例如 `flowchart` 或 `sequenceDiagram`。 [Mermaid种类](https://tiptap.zhcndoc.com/diagrams/flow-diagrams/overview.md#mermaid-kinds) 列出了图表可以容纳的每种类型。

请为 Mermaid 源码注册 [`mermaidDiagramRenderer`](https://tiptap.zhcndoc.com/diagrams/renderers/mermaid.md#diagrams) 或 [`peleDiagramRenderer`](https://tiptap.zhcndoc.com/diagrams/renderers/pele.md)。[Pele 与 mermaid.js 的比较](https://tiptap.zhcndoc.com/diagrams/renderers/pele.md#next-to-mermaidjs)介绍了两者的区别。

## draw\.io 图表

带有 `format: 'drawio'` 的图表保存draw\.io XML。 [draw.io 图渲染器](https://tiptap.zhcndoc.com/diagrams/renderers/drawio.md) 绘制它并连接draw\.io 编辑器，因此您可以更改它。它的页面有一个演示和[源](https://tiptap.zhcndoc.com/diagrams/renderers/drawio.md#what-a-drawio-source-is)的规则。

```ts
editor.commands.insertFlowDiagram({ source: drawioXml, format: 'drawio', title: 'Order process' })
```

## BPMN 图

带有 `format: 'bpmn'` 的图保存 BPMN 2.0 XML 及其布局，按书面形式存储。 [BPMN 图渲染器](https://tiptap.zhcndoc.com/diagrams/renderers/bpmn.md) 绘制它并连接 bpmn-js 建模器，因此您可以更改它。它的页面有一个演示和源规则。

```ts
editor.commands.insertFlowDiagram({ source: bpmnXml, format: 'bpmn', title: 'Payment check' })
```

## 其他格式

您自己的图表渲染器可以绘制自己的格式。 id规则、大小限制以及没有渲染器绘制它时会发生什么都在[您自己的](https://tiptap.zhcndoc.com/diagrams/renderers/custom-diagrams.md#a-format-of-your-own)格式。