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 converts simple markup into visual diagrams, making it easy to create and maintain documentation without manually drawing charts or graphics.

Getting Started with Mermaid

Mermaid diagrams are created using simple text syntax.

For example:

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

This creates a basic flowchart showing a simple ticket workflow.

Basic Mermaid Structure

Flowchart Direction

flowchart TD

The direction controls how the diagram flows:

Basic Shapes

Square Box

A[Start]

Rounded Box

A(Process)

Decision Box

A{Decision}

Connecting Steps

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]

How to Add Mermaid Diagrams in Hudu

Step 1. Edit the KB Article

Open your KB article or rich text field in Hudu.

Step 2. Add the Mermaid Diagram Code

• Open the Source Code from the editor toolbar or,
• Open the Insert/Edit Code Sample from the editor toolbar
  • Choose Mermaid for the language when using the code block

Step 3. Paste the Mermaid Block

Use this format:

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

Step 4. Save the Article

After saving, Hudu will automatically render the diagram.

Troubleshooting

Diagram Displays as Plain Text

If the diagram does not render:

• Verify the opening tag is:

<pre class="mermaid">

• Verify the closing tag is:

</pre>