---
title: "Collaboration"
description: "Charts and diagrams are Nodes like any other, so Tiptap Collaboration shares them without extra setup."
canonical_url: "https://tiptap.dev/docs/diagrams/guides/collaboration"
---

# Collaboration

Charts and diagrams are Nodes like any other, so Tiptap Collaboration shares them without extra setup.

## Where to register Diagrams

Register `Diagrams` everywhere the shared document is opened:

- in every editor
- in a read-only viewer
- in an agent
- on the collaboration server

Make sure every client uses `@tiptap/y-tiptap` 3.0.10 or later, so a client you missed cannot
delete anything.

## A client without Diagrams

A client whose Schema has no `chart` or `flowDiagram` Node cannot build those Nodes. The same
holds for a client with `chart: false` or `flowDiagram: false`: it cannot build the charts or the
diagrams.

What happens then depends on the version of `@tiptap/y-tiptap` that client uses:

| `@tiptap/y-tiptap` | The shared document                                                    | That client                                              |
| ------------------ | ---------------------------------------------------------------------- | -------------------------------------------------------- |
| 3.0.10 or later    | Stays as it is. Everybody else keeps their charts and diagrams         | Shows an empty document, cannot be edited, sends nothing |
| 3.0.9 or earlier   | Loses its charts and diagrams. The deletion reaches every other client | Its binding deletes them while the document is loaded    |

`enableContentCheck` does not prevent the deletion: the Node is dropped before a Transaction
exists that the check could look at.

## A client that shows nothing

A client that does not draw registers `Diagrams` without any Renderer or Diagram Renderer.

- It needs no DOM and no chart library.
- It keeps every chart and diagram as it is.

```ts
import { getSchema } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Diagrams } from '@tiptap-pro/extension-diagrams'

const extensions = [StarterKit, Diagrams.configure({ renderers: [] })]
const schema = getSchema(extensions)
```

In an editor, such a chart or diagram says that it can't be drawn here, or shows what
[`unavailable`](https://tiptap.dev/docs/diagrams/api-reference/options.md#unavailable) returns. Its data stays untouched.

## Turning away a client without Diagrams

If clients you do not control can connect, let the server refuse those that do not declare
`Diagrams`. With Hocuspocus, for example, the client adds a parameter to its connection, and the
server checks it before the document is loaded:

```ts
// client
const provider = new HocuspocusProvider({
  url: 'wss://collaboration.example.com?schema=diagram-1',
  name: 'document-id',
})

// server
const server = new Hocuspocus({
  async onConnect({ requestParameters }) {
    if (requestParameters.get('schema') !== 'diagram-1') {
      throw new Error('This document needs the Diagrams extension.')
    }
  },
})
```

## Mixed versions

- A client keeps the attributes of a chart it does not know only until it changes that chart.
  Then they are gone.
- Update every client to the same version of `@tiptap-pro/extension-diagrams` before you use a
  feature that a newer version added.