Enable HTML labels in Mermaid diagram rendering #152

New issue

Open

opened 2026-01-23 10:18:53 +00:00 by mprihoda · 0 comments

mprihoda commented

2026-01-23 10:18:53 +00:00

(Migrated from github.com)

Problem

Mermaid diagrams rendered in the dashboard don't support HTML/Markdown in labels, causing formatting issues. For example, when a diagram uses line breaks and italics in node labels like:

flowchart LR
  A["DocumentMatrixTableEnhanced<br/><i>modified</i>"]

The   and  tags are rendered literally instead of being interpreted as HTML, resulting in labels like DocumentMatrixTableEnhancedmodified instead of:

DocumentMatrixTableEnhanced
modified (in italics)

GitLab renders these correctly because it runs Mermaid in "Markdown-compatible" mode with HTML labels enabled.

Solution

Update the Mermaid configuration to enable HTML labels:

mermaid.initialize({
  flowchart: {
    htmlLabels: true,
    useMaxWidth: false
  }
  // ... other config
});

This will allow:

  for line breaks in labels
, , etc. for text formatting
Markdown syntax like _italic_ in labels (depending on Mermaid version)

Security Consideration

Enabling htmlLabels: true allows HTML in diagram labels. Since we control the content being rendered (review artifacts, analysis documents), this should be safe. However, if user-provided content is ever rendered, sanitization would be needed.

References

## Problem Mermaid diagrams rendered in the dashboard don't support HTML/Markdown in labels, causing formatting issues. For example, when a diagram uses line breaks and italics in node labels like: ```mermaid flowchart LR A["DocumentMatrixTableEnhanced modified"] ``` The ` ` and `` tags are rendered literally instead of being interpreted as HTML, resulting in labels like `DocumentMatrixTableEnhancedmodified` instead of: ``` DocumentMatrixTableEnhanced modified (in italics) ``` GitLab renders these correctly because it runs Mermaid in "Markdown-compatible" mode with HTML labels enabled. ## Solution Update the Mermaid configuration to enable HTML labels: ```javascript mermaid.initialize({ flowchart: { htmlLabels: true, useMaxWidth: false } // ... other config }); ``` This will allow: - ` ` for line breaks in labels - ``, ``, etc. for text formatting - Markdown syntax like `_italic_` in labels (depending on Mermaid version) ## Security Consideration Enabling `htmlLabels: true` allows HTML in diagram labels. Since we control the content being rendered (review artifacts, analysis documents), this should be safe. However, if user-provided content is ever rendered, sanitization would be needed. ## References - [GitLab Mermaid documentation](https://docs.gitlab.com/ee/user/markdown.html#mermaid) - [Mermaid flowchart configuration](https://mermaid.js.org/config/schema-docs/config-defs-flowchart-diagram-config.html)