Switching light/dark theme will crash Mermaid diagrams.

[hepheir]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

Toggle light/dark theme switch button on the sidebar to produce this bug.

Steps To Reproduce

1. enable mermaid on a post
2. open a post which includes mermaid diagrams
3. switch to light/dark theme by clicking toggle button on the sidebar

Expected Behavior

1. some or all diagrams will print error message on them: "Syntax error in text"

Before switching light/dark mode	After switching light/dark mode

Environment

• Ruby: 3.3.0 [arm64-darwin24]
• Jekyll: 4.3.4
• Chirpy: 7.2.2

Furthermore..

• Gem: 3.5.23
• OS: macOS Sequoia 15.2
• Arch: arm64 (Apple Silicon)
• Run Command: ./tools/run

Anything else?

I can fix this quickly. #2108

[cotes2020]

Thank you for your report, but it lacks sufficient information.

Please provide the following details:

1. The environment where the issue occurred
2. The Mermaid code block that caused the issue

[lotusk08]

Same here too.
When you switch the theme to dark/light, the Mermaid Diagram in the blog will get syntax errors.

[hepheir]

@cotes2020

1. Sure. Here is the environment setup:

• Ruby: 3.3.0 [arm64-darwin24]
• Jekyll: 4.3.4
• Chirpy: 7.2.2

I’ve also updated the description with screenshots and the environment information.

2. As requested, here are the Mermaid code blocks:

```mermaid
graph LR
1((4)) --> 2((3)) --> 3((5))
```

...

```mermaid
graph LR
1((2)) --> 2((1)) --> 3((3))
```

...

```mermaid
graph LR
1((1)) -.-x 2((0)) -.-x 3((2))
```

...

```mermaid
graph LR
1((1)) -.-x 2((0)) -.-x 3((2))
1 ---> 3
style 1 stroke-width:4px
style 3 stroke-width:4px
```

[hepheir]

I just enabled the browser debugger to take a deeper look at the code’s behavior.

As shown in the screenshot below, in the existing code, when refreshTheme() is called in _javascript/modules/components/mermaid.js, the previously backed-up Mermaid diagram is inserted via elem.textContent. During this process, the HTML < and > symbols are being escaped, which leads to incorrect insertion.

I believe this is the root cause of the issue.

---

Error description

1. Before Mermaid is rendered

2. Immediately after switching the theme, during the rendering process (while refreshTheme() is being executed)

> was replaced with >

3. After rendering is complete, syntax errors occur

[cotes2020]

1. Sure. Here is the environment setup:

• Ruby: 3.3.0 [arm64-darwin24]
• Jekyll: 4.3.4
• Chirpy: 7.2.2

I’ve also updated the description with screenshots and the environment information.

2. As requested, here are the Mermaid code blocks:
   ...

Thank you, a complete bug report should be like this.

[hepheir]

1. Sure. Here is the environment setup:

• Ruby: 3.3.0 [arm64-darwin24]
• Jekyll: 4.3.4
• Chirpy: 7.2.2

I’ve also updated the description with screenshots and the environment information.

2. As requested, here are the Mermaid code blocks:
   ...

Thank you, a complete bug report should be like this.

I’ll make sure to provide more detailed information when creating issues in the future. Thank you!

[github-actions]

🎉 This issue has been resolved in version 7.2.3 🎉

The release is available on:

• v7.2.3
• GitHub release

Your semantic-release bot 📦🚀