Mermaid "quadrant" diagrams do not render in GitHub

[thibaudcolas]

Select Topic Area

Bug

Body

I’m trying to use GitHub’s support for displaying Mermaid files in Markdown or as standalone files. This seems to be broken for quadrant charts.

Here’s the sample quadrant chart from the Mermaid Live editor:

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Loading

Here is the code block to generate this for reference:

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

I can’t seem to get any quadrant chart working in GitHub, so I assume it’s the chart type as a whole that’s broken, rather than any specific syntax within.

---

Note I’ve opened this here because of the instructions on Troubleshooting Mermaid files. I can confirm the chart works fine in the Mermaid Live editor, but there is no way for me to label this discussion as "Mermaid" as instructed there.

[thibaudcolas]

Ah, it seems to me this is caused by GitHub’s Mermaid version being out of date (#37498, #70672) – looks like Mermaid added the quadrant chart type in June 2023, while GitHub is currently on v10.0.2 from March 2023.

[thibaudcolas]

GitHub has updated the version of Mermaid they use (see #70672), the above chart now renders. Unfortunately all of the labels are offset slightly compared to the expected rendering, which makes most of them unreadable.