OneDev currently bundles Mermaid 11.15.0 (the version string in server-core/src/main/java/io/onedev/server/web/asset/mermaid/mermaid.min.js). That was last upgraded from 10.9.1 in #2804 so git graph diagrams with hyphenated branch names render correctly.

Markdown usage is documented at Markdown Syntax (fenced mermaid code blocks). The docs do not pin a Mermaid library version.

Mermaid 11.17.2 is a patch on 11.17.x. Compared with 11.15.0 it adds newer diagram types/features (for example Cynefin, railroad, swimlane, collapsible flowchart subgraphs, extra flowchart shapes) and rendering fixes. 11.16.1 also added extra prototype-pollution hardening; Mermaid notes that user-controlled input already had protections.

We do not automatically track every Mermaid release. If you need a specific 11.17.x feature, or you have a diagram that fails on 11.15.0 and works on 11.17.2, please describe it here and we can treat this as an improvement request.

It appears that the following class definitions are not compatible.

flowchart TD
    classDef oldDefault fill:#f9f9f9,stroke:#999,color:#333
    classDef oldCsrf fill:#fff3cd,stroke:#ffc107,color:#333
    classDef oldSync fill:#d4edda,stroke:#28a745,color:#333
    classDef oldCookie fill:#d1ecf1,stroke:#17a2b8,color:#333
    classDef oldError fill:#f8d7da,stroke:#dc3545,color:#333

...

There is an issue with class definitions

Those classDef statements are valid on the bundled Mermaid 11.15.0. The classDef name fill:…,stroke:…,color:… form has been supported for a long time; 11.17.2 does not change how this syntax is parsed.

A minimal diagram using your classes should render in OneDev:

If the diagram fails, the problem is likely in the omitted part (the ...), not these class names or hex colors. The 11.15.0-specific classDef limitation is applying :::className after the newer @{ shape: ... } node syntax; that combination was fixed in 11.17.

If that is what the rest of the diagram uses, or if a complete diagram works on Mermaid Live at 11.17.2 but not in OneDev, please paste the full diagram and the error text.

@servicedesk That's exact diagram that you did in the last comment is working on Mermaid Live, but it's not working in OneDev.

@servicedesk

Title: [Bug] Mermaid rendering fails when combining @{ shape } syntax with :::className (v11.15.0)

Description

When rendering Mermaid flowcharts using version 11.15.0, the chart fails to render if the newer @{ shape: ... } node syntax is combined with class definitions (:::className) on the same node.

Steps to Reproduce

1. Define a classDef style in a Mermaid flowchart.
2. Create a node using the newer @{ shape: ... } syntax.
3. Append the class assignment :::className to that node.

Example of failing syntax:

Expected Behavior

The node should render using the specified custom shape and correctly apply the styles defined in the classDef.

Actual Behavior

The Mermaid parser encounters a limitation and fails to render the diagram entirely when both the @{...} shape syntax and the :::className assignment are used together.

Root Cause

This is a known parsing limitation specific to Mermaid v11.15.0. The parser cannot properly handle the class assignment immediately following the newer shape definition syntax.

Resolution

This combination was fixed upstream in Mermaid v11.17.0.

Action Items:

• Upgrade the Mermaid library/renderer to version 11.17.0 or higher.

@zaakiy Confirmed. That combination is a Mermaid 11.15.0 parser gap: :::className is not accepted after @{ shape: ... } (mermaid#7826). The grammar fix is mermaid#7838 and shipped in 11.17.x (including 11.17.2).

Until the bundled library is upgraded, apply the class with a separate class statement (this form already works on 11.15.0):

Traditional nodes such as A[Error Node]:::oldError should also parse on 11.15.0. Mermaid Live defaults to a newer library, so a diagram that works there can still fail here.

@robin Please take the upgrade of the bundled Mermaid from 11.15.0 to 11.17.2 (server-core/src/main/java/io/onedev/server/web/asset/mermaid/mermaid.min.js).

@zaakiy The example diagram is valid on the bundled Mermaid 11.15.0. I rendered that exact classDef source with OneDev's mermaid bundle; the nodes get the expected fills.

What fails in OneDev is markdown post-processing, not the library version. Fenced mermaid blocks become a <div class="mermaid">. Issue-reference rewriting then treats numeric hex colors as issue numbers:

• stroke:#999 becomes a link to #999
• color:#333 becomes a link to #333

#f9f9f9 and #fff3cd are left alone because they are not all digits. After #999 / #333 are turned into links, Mermaid can no longer parse the classDef line. Mermaid Live does not rewrite #NNNN, so the same source works there.

Until this is patched, avoid # plus digits-only colors in mermaid (and plantuml) source. Use a named color, rgb(...), or a hex value that includes a letter (#999999 still matches as an issue number; #9a9a9a does not):

I do not have write permission on this project, so I cannot land the server-side fix (skip issue-reference rewriting inside .mermaid / .plantuml). Upgrading to Mermaid 11.17.2 would not fix this.

@servicedesk please assign to @robin

@zaakiy Assigned this to @robin. The remaining work is the server-side fix (skip issue-reference rewriting inside mermaid/plantuml) and the Mermaid 11.15.0 → 11.17.2 upgrade.

@servicedesk @robin markdown color post processing is not the only issue.

@zaakiy Agreed — hex-color rewriting is not the only problem. There are two independent failures:

1. Markdown post-processing. After a fenced mermaid block becomes <div class="mermaid">, issue-reference rewriting turns digits-only hex colors such as #999 and #333 into issue links. That breaks classDef. A Mermaid upgrade does not fix this.

2. Bundled Mermaid 11.15.0. :::className after @{ shape: ... } does not parse (mermaid#7826, fixed in mermaid#7838 and shipped in 11.17.x). This is the diagram you reported; it works on Mermaid Live (newer library) and fails here even when colors are not digits-only (#f8d7da, #dc3545). Until 11.17.2 is bundled, apply the class separately:

@robin Both items remain: skip issue-reference rewriting inside mermaid/plantuml, and upgrade server-core/src/main/java/io/onedev/server/web/asset/mermaid/mermaid.min.js from 11.15.0 to 11.17.2.

@zaakiy If you are seeing a third failure (a diagram that still breaks after avoiding digits-only # colors and avoiding @{...}:::class), please paste the full source and the error text.

State changed as build OD-8270 (16.5.9) is successful

Thanks @robin