Home › About › Features › Mermaid diagrams

Live collaborative Mermaid diagrams — type, render, share

Drop a Mermaid block into any text node on a cnvs.app board and it renders as a proper diagram. Edit the source — the diagram re-renders for every connected collaborator in real time. No separate editor, no copy-paste from mermaid.live.

Try it on a fresh board →

Diagram types supported

Flowcharts

flowchart LR / graph TD — boxes, arrows, decisions.

Sequence diagrams

sequenceDiagram — actor → actor messages, perfect for API and request flows.

Class diagrams

classDiagram — OOP class boxes with attributes, methods, relationships.

State diagrams

stateDiagram-v2 — states + transitions, ideal for state machines.

ER diagrams

erDiagram — entity-relationship modelling for databases.

Gantt charts

gantt — project timelines with tasks and durations.

Mindmaps

mindmap — hierarchical idea trees. Perfect for brainstorming.

User journeys

journey — user experience step ratings.

Timelines

timeline — chronological events.

Git graphs

gitGraph — branch / merge visualisation.

C4 architecture

C4Context / C4Container — system-design diagrams.

Pie charts

pie — single-line declarations for share-of-X visuals.

How to use Mermaid on cnvs.app

Click anywhere on the board to drop a text node.
Start the content with a fenced Mermaid block:

```mermaid
flowchart LR
  A[User] --> B{Logged in?}
  B -- Yes --> C[Dashboard]
  B -- No  --> D[Login page]
```

Click outside the node to render. Everyone connected sees the rendered diagram in real time.
Click back inside to edit; the diagram re-renders on save.

Rule: one diagram per text node. The whole content must be a single fenced mermaid block.

Why this is better than mermaid.live + screenshot

Live edit, live render. Edit the source on the canvas, the diagram updates for everyone. No "screenshot, paste, repeat".
Shareable URL. The diagram is on the cnvs.app board — anyone with the URL sees it. No image hosting.
Mix with sketches. Sticky notes next to the diagram, freehand circles around concerns, pasted reference images — all on the same canvas.
AI can edit it. Via the MCP endpoint, Claude or any MCP-compatible agent can read the Mermaid source from get_board and propose updates.
Print to PDF. The diagram renders into the PDF export the same as any other text node.

Sequence diagram example

sequenceDiagram
  participant Client
  participant API
  participant Worker
  participant DB
  Client->>API: POST /upload (file)
  API->>Worker: enqueue(job_id)
  API-->>Client: 202 Accepted
  Worker->>DB: write status=processing
  Worker->>DB: write status=done
  Client->>API: GET /status/{job_id}
  API-->>Client: { status: "done" }