#2196: Mermaid diagrams in knowledge base articles

Отредактирована: вчера

What it is

Starting from version v6.2.0, knowledge base articles can contain diagrams written in Mermaid syntax: flowcharts, sequence diagrams, Gantt charts and more. A diagram is described as text, and Swarmica draws it when the article is viewed, both in the agent interface and in the public help center.

For example, this code:

```mermaid
flowchart LR
    A[New ticket] --> B{Is there a KB article?}
    B -- Yes --> C[Send a link to the article]
    B -- No --> D[Solve the ticket and write an article]
    C --> E[Ticket solved]
    D --> E
```

turns into this diagram:

flowchart LR
    A[New ticket] --> B{Is there a KB article?}
    B -- Yes --> C[Send a link to the article]
    B -- No --> D[Solve the ticket and write an article]
    C --> E[Ticket solved]
    D --> E

How to add a diagram

In the article editor, click the "Insert Mermaid diagram" button on the toolbar.
Write or paste the diagram code.
To check the result, hover over the diagram block and click the toggle button above it on the right: the block shows a preview. Click it again to return to the code.

In Markdown mode you can also add a diagram by hand, as a code block with the mermaid language.

When viewing an article, you can open a large diagram in full screen with the button in the top right corner of the diagram.

A diagram is stored in the article as an ordinary code block. Where Markdown is not rendered (for example, in emails), its code is shown instead of the picture.

Where to get the diagram code

You don't have to write the code by hand:

With AI. Describe the diagram in words to any AI assistant (ChatGPT, Claude, GigaChat, YandexGPT, etc.) and ask it for Mermaid code. For example: "Draw a Mermaid flowchart of ticket handling: a ticket comes in, the agent looks for a knowledge base article; if there is one, the agent sends a link, otherwise solves the ticket and writes an article."
In free editors:
- Mermaid Live Editor is the official open-source online editor: you write code and see the diagram right away, no sign-up needed;
- Mermaid AI offers a visual editor and AI diagram generation; the free plan limits the number of diagrams and AI requests.

Copy the finished code into the diagram block in the article editor.

Do not paste confidential information into external services: internal system addresses, customers' personal data and so on.

Mermaid syntax

The full description of the syntax and all diagram types is in the official Mermaid documentation. In articles you will most often need flowcharts and sequence diagrams.

If a diagram is not displayed, check its code in Mermaid Live Editor: it shows which line has the error.