Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Aug 1, 2025

This PR fixes a critical bug in the Mermaid diagram integration where diagrams were not rendering properly after the actual Mermaid library was added.

Problem

After replacing the placeholder mermaid.min.js with the actual Mermaid library, diagrams were not rendering - they appeared as plain text code blocks instead of visual diagrams.

Root Cause

The markdown-it parser was treating ````mermaidcode blocks as regular syntax-highlighted code, converting them to

` elements. However, the Mermaid initialization code was looking for elements with an incorrect CSS selector (`pre code.language-mermaid`), which didn't exist in the rendered HTML.

Solution

  • Fixed markdown-it highlight function to detect mermaid language blocks and render them as <div class="mermaid"> elements instead of code blocks
  • Updated Mermaid initialization to use the correct CSS selector (.mermaid)
  • Fixed dynamic theme switching to also target the correct elements

Result

Now all Mermaid diagram types (flowchart, sequence, class, ER, state, gantt, pie, git, journey, C4, quadrant, requirement, timeline) render correctly in both light and dark themes.

Usage

Simply use fenced code blocks with the mermaid language identifier:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

![Mermaid Integration Demo](https://github.com/user-attachments/assets/dfc59ff0-0c12-40dc-b15e-658b6d8fbffd)

Fixes #1729.

<!-- START COPILOT CODING AGENT TIPS -->
---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click [here](https://survey.alchemer.com/s3/8343779/Copilot-Coding-agent) to start the survey.

Co-authored-by: emako <24737061+emako@users.noreply.github.com>
@Copilot Copilot AI changed the title [WIP] [Feature Request] Support Mermaid for QuickLook.Plugin.MarkdownViewer Add Mermaid diagram support to QuickLook.Plugin.MarkdownViewer Aug 1, 2025
@Copilot Copilot AI requested a review from emako August 1, 2025 17:03
Copilot finished work on behalf of emako August 1, 2025 17:03
@emako
Copy link
Member

emako commented Aug 1, 2025

@copilot I replace the mermaid.min.js from my commit e5fc61c, but the mermaid is not work (nothing render as mermaid from markdown file).

Co-authored-by: emako <24737061+emako@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Aug 1, 2025

@copilot I replace the mermaid.min.js from my commit e5fc61c, but the mermaid is not work (nothing render as mermaid from markdown file).

I've identified and fixed the issue! The problem wasn't with the mermaid.min.js file itself, but with how the Mermaid code blocks were being processed.

Root Cause:
The markdown-it parser was treating ```mermaid blocks as regular code blocks and passing them through the syntax highlighter, which converted them to <pre><code> elements. However, the Mermaid initialization code was looking for the wrong CSS selector (`pre code.language-mermaid` instead of `.mermaid`).

Fix Applied (commit f79422e):

  1. Modified the markdown-it highlight function to detect mermaid language blocks and render them as <div class="mermaid"> elements instead of code blocks
  2. Updated Mermaid initialization to use the correct CSS selector (.mermaid)
  3. Fixed theme switching to also use the correct selector

Now when you use:

```mermaid
graph TD
    A[Start] --> B[End]

It will properly render as a Mermaid diagram instead of showing the raw text. The fix ensures all Mermaid diagram types (flowchart, sequence, class, etc.) work correctly with both light and dark themes.

@Copilot Copilot AI changed the title Add Mermaid diagram support to QuickLook.Plugin.MarkdownViewer Fix Mermaid diagram rendering in QuickLook.Plugin.MarkdownViewer Aug 1, 2025
Copilot finished work on behalf of emako August 1, 2025 18:06
@emako emako marked this pull request as ready for review August 1, 2025 18:09
@emako emako merged commit 9fe3752 into master Aug 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants