Mermaid Diagrams

Hudu supports Mermaid diagrams for creating flowcharts, network maps, process documentation, decision trees, and more directly inside KB articles and rich text fields. Mermaid is a text-based diagramming tool that turns simple markup into visual diagrams, so you can build and maintain diagrams without drawing them by hand or attaching image files that go stale.

Visit Knowledge Base for additional information on creating and editing KB articles.

How to add a Mermaid diagram

Step 1. Edit the article or rich text field

Open the KB article or rich text field where you want the diagram and enter edit mode.

Step 2. Insert a code block and set the language to Mermaid

Insert a code block in the editor, then choose Mermaid from the code block's language dropdown.

Step 3. Add your Mermaid syntax

Type or paste your Mermaid syntax directly into the code block. No HTML tags are needed. For example:

flowchart TD
    A[User Submits Ticket] --> B[Help Desk Reviews Ticket]
    B --> C[Issue Resolved]

Preview before publishing by hovering over the code block and clicking the Preview option in the top right next to the language selector.

Step 4. Save the article

Save or publish the article. Hudu renders the diagram automatically when the article is viewed.

Always add diagrams with a Mermaid code block. Diagrams written as <pre class="mermaid"> HTML are not supported and display as plain text instead of a diagram. If you add diagrams through the API or MCP, see the FAQ below for the correct format.

Mermaid syntax basics

The example above creates a simple flowchart of a ticket workflow. The sections below cover the building blocks.

Flowchart direction

flowchart TD

The direction controls how the diagram flows:

Syntax	Direction
TD	Top down
LR	Left to right

Shapes

Shape	Syntax
Square box	`A[Start]`
Rounded box	`A(Process)`
Decision box	`A{Decision}`

Connecting steps

Connection	Syntax
Arrow	`A --> B`
Arrow with label	`A -->\|Yes\| B`

Example MSP workflow

flowchart TD
    A[User Submits Ticket] --> B[Help Desk Reviews Ticket]
    B --> C{Priority Level}

    C -->|Low| D[Assign Tier 1]
    C -->|High| E[Escalate to Tier 2]

    D --> F[Resolve Issue]
    E --> F

    F --> G[Close Ticket]

Browse the Mermaid documentation for more diagram types, including sequence diagrams, entity relationship diagrams, and more.

FAQ

Where can I use Mermaid diagrams?

Mermaid diagrams can be added to KB articles and rich text fields.

Do diagrams show in PDF exports and shared articles?

Yes. Diagrams render in exported PDFs and in read-only views, including shared articles.

Do diagrams support dark mode?

Yes. Diagrams adjust to display correctly in both light and dark mode.

Can I add Mermaid diagrams through the API or MCP?

Yes. When creating or editing articles through the API or MCP, wrap the Mermaid syntax in a code block with the language-mermaid class on both the pre and code elements:

<pre class="language-mermaid"><code class="language-mermaid">
flowchart TD
    A[User Submits Ticket] --&gt; B[Help Desk Reviews Ticket]
    B --&gt; C[Issue Resolved]
</code></pre>

Troubleshooting

Diagram displays as plain text

If the diagram does not render:

Confirm the content is inside a code block and the code block's language is set to Mermaid.
If the diagram was added as HTML using <pre class="mermaid">, recreate it as a Mermaid code block in the editor, or update the HTML to the format shown in the API and MCP FAQ above.
Check the syntax for typos, such as mismatched brackets or a missing or misspelled diagram type (for example, flowchart) on the first line. Testing the syntax in the Mermaid Live Editor can help pinpoint errors.

Large diagram is too small to read

Diagrams wider than the article are scaled down to fit. Try changing the direction (for example, from LR to TD), shortening node labels, or splitting the diagram into several smaller diagrams.