Project

General

Profile

Actions

Feature #44425

open

Render Mermaid code blocks as diagrams

Added by Mizuki ISHIKAWA 2 days ago. Updated about 1 hour ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
Text formatting
Target version:
Resolution:

Description

This patch adds support for rendering code blocks written in Mermaid syntax as diagrams using Mermaid.js.

For example, with CommonMark:

```mermaid
flowchart LR
    A[Start] --> B[Process]
    B --> C[End]
```

Or with Textile:

<pre><code class="mermaid">
flowchart LR
    A[Start] --> B[Process]
    B --> C[End]
</code></pre>

These are rendered as diagrams instead of code blocks:

This allows flowcharts, sequence diagrams, class diagrams, and other diagrams to be described as text in wikis, issue descriptions, and other formatted text fields.

Mermaid.js is widely used, and supporting it in Redmine would make it possible to preserve information in a more visual form using diagrams.

Implementation

  • Adds mermaid.min.js 11.17.2
  • Detects mermaid code blocks and renders them as diagrams
  • Loads Mermaid.js lazily only when a Mermaid code block is present, since the library is several MB in size
  • Handles invalid Mermaid syntax without affecting the rest of the page
  • Uses securityLevel: 'strict' to prevent scripts and other unsafe content from being executed from Mermaid diagrams
  • Supports both Textile and CommonMark
  • Adds license information for Mermaid.js and its bundled dependencies
  • Adds tests for the above behavior

Patch

The patch could not be attached directly to this issue because it exceeds the attachment size limit, so it is available from the following GitHub pull request instead: https://patch-diff.githubusercontent.com/raw/ishikawa999/redmine/pull/19.patch
(Source: https://github.com/ishikawa999/redmine/pull/19 )

To download and apply the patch:

curl -o mermaid.patch https://patch-diff.githubusercontent.com/raw/ishikawa999/redmine/pull/19.patch
git am mermaid.patch


Files

mermaid-example.png (51.6 KB) mermaid-example.png Mizuki ISHIKAWA, 2026-09-07 06:33
Actions

Also available in: Atom PDF