---
title: "Formats"
description: "Each diagram stores its source in one format, named by its format attribute."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats"
---

# Formats

Each diagram stores its source in one format, named by its format attribute.

## The formats

| `format`    | Source                       | Drawn by                                                                                                                                      |
| ----------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `'mermaid'` | Mermaid text                 | mermaid.js or Pele, see [Mermaid diagrams](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats.md#mermaid-diagrams)           |
| `'drawio'`  | draw\.io XML                 | The draw\.io Diagram Renderer, see [draw.io diagrams](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats.md#drawio-diagrams) |
| `'bpmn'`    | BPMN 2.0 XML with its layout | The BPMN Diagram Renderer, see [BPMN diagrams](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats.md#bpmn-diagrams)          |
| Another id  | Stored as it is              | A Diagram Renderer that lists it, see [Other formats](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/formats.md#other-formats)   |

## Mermaid diagrams

A diagram with `format: 'mermaid'` holds Mermaid text, stored as you typed it, but without
`%%{…}%%` directives and frontmatter. See [Source is data](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md#source-is-data).

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

The source starts with a Mermaid kind, such as `flowchart` or `sequenceDiagram`.
[Mermaid kinds](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md#mermaid-kinds) lists every kind a diagram can hold.

Register one of two Diagram Renderers for it,
[`mermaidDiagramRenderer`](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/mermaid.md#diagrams) or
[`peleDiagramRenderer`](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/pele.md).
[Next to mermaid.js](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/pele.md#next-to-mermaidjs) compares the two.

## draw\.io diagrams

A diagram with `format: 'drawio'` holds draw\.io XML. The
[draw.io Diagram Renderer](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/drawio.md) draws it and also connects the draw\.io
editor, so you can change it. Its page has a demo and
[the rules for the source](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/drawio.md#what-a-drawio-source-is).

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

## BPMN diagrams

A diagram with `format: 'bpmn'` holds BPMN 2.0 XML with its layout, stored as written. The
[BPMN Diagram Renderer](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/bpmn.md) draws it and also connects the bpmn-js
modeler, so you can change it. Its page has a demo and the rules for the source.

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

## Other formats

A Diagram Renderer of your own can draw a format of its own. The id rules, the size limit and what
happens when no Renderer draws it are on
[A format of your own](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/custom-diagrams.md#a-format-of-your-own).