feat: integrate Mermaid plugin with server-side rendering for ByteMD editor

[Copilot]

Adds Mermaid diagram support to the ByteMD editor with server-side pre-rendering, enabling users to create flowcharts, sequence diagrams, and other Mermaid visualizations directly in markdown. Diagrams are pre-rendered to SVG during save, eliminating the need to load mermaid.js on article pages.

Changes

• Added @bytemd/plugin-mermaid@^1.22.0 dependency for editor UI features (toolbar, syntax highlighting)
• Added rehype-mermaid@^3.0.0 dependency for server-side rendering
• Created custom pluginMermaidSSR() that uses rehype-mermaid with inline-svg strategy
• Separated plugin configuration into editor plugins and processor plugins
• Updated markdown processing to async to support rehype-mermaid's rendering
• Registered mermaid plugin alongside existing plugins (gfm, math, breaks)

How It Works

• Editor: Users can insert Mermaid diagrams using the toolbar and see live previews
• Save: Mermaid code blocks are automatically converted to inline SVG
• Article Pages: Display pre-rendered SVG directly without loading mermaid.js

Usage

```mermaid
graph TD
A[开始] --> B{判断}
B -->|是| C[执行方案一]
B -->|否| D[执行方案二]

### Performance Benefits
- Article pages no longer need to load mermaid.js (reduced client-side JavaScript)
- Faster page load times with pre-rendered SVG
- Better SEO with static content

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



<details>

<summary>Original prompt</summary>

> 
> ----
> 
> *This section details on the original issue you should resolve*
> 
> <issue_title>功能建议 给ByteMD集成Mermaid插件</issue_title>
> <issue_description>给ByteMD集成Mermaid插件的过程并不复杂，核心是正确安装插件并在编辑器和查看器中配置。下面是一个汇总了所有必要依赖和步骤的指南，能帮助你快速完成集成。
> 
> ### 📚 所需依赖包一览
> 
> 开始之前，你的项目需要安装以下依赖：
> 
> <table><thead><tr><th><span>依赖类型</span></th><th><span>包名</span></th><th><span>说明</span></th></tr></thead><tbody><tr><td><span>核心依赖</span></td><td><code style="white-space:pre;font-family:SFMono-Regular,Consolas,Monaco,monospace">bytemd</code></td><td><span>ByteMD的核心库</span><a href="https://blog.csdn.net/gitblog_00041/article/details/138146704" target="_blank" rel="noreferrer" style="cursor: default;"></a></td></tr></tbody></table>
> 
> 。框架适配`@bytemd/react`用于React项目的组件[https://blog.csdn.net/gitblog_00041/article/details/138146704](https://blog.csdn.net/gitblog_00041/article/details/138146704)
> 
> 。（根据你的框架选择）`@bytemd/vue`用于Vue 2项目的组件[https://developer.aliyun.com/article/900370](https://developer.aliyun.com/article/900370)
> 
> 。`@bytemd/vue-next`用于Vue 3项目的组件[https://developer.aliyun.com/article/900370](https://developer.aliyun.com/article/900370)
> 
> 。**关键插件**`@bytemd/plugin-mermaid`**实现Mermaid图表功能的核心插件**[https://juejin.cn/post/7230339089617125434](https://juejin.cn/post/7230339089617125434)
> 
> 。辅助插件`@bytemd/plugin-gfm`支持GitHub风格的Markdown语法（如表格、删除线）[https://blog.csdn.net/gitblog_00041/article/details/138146704](https://blog.csdn.net/gitblog_00041/article/details/138146704)
> 
> 。样式文件`bytemd/dist/index.css`ByteMD的基础样式[https://blog.csdn.net/gitblog_00041/article/details/138146704](https://blog.csdn.net/gitblog_00041/article/details/138146704)
> 
> <table><tbody><tr><td><span>。</span></td></tr></tbody></table>
> 
> ### 🛠️ 集成步骤（以React为例）
> 
> 下面的步骤以React项目为例，其他框架思路类似。
> 
> 1.  **安装依赖**
>     在项目根目录下，通过npm或yarn安装所有必需的包。
>     
>     
>     
> 
> ```
> # 使用 npm
> npm install bytemd @bytemd/react @bytemd/plugin-mermaid @bytemd/plugin-gfm
> 
> # 或使用 yarn
> yarn add bytemd @bytemd/react @bytemd/plugin-mermaid @bytemd/plugin-gfm
> ```
> 
> **导入组件和插件**
> 在你的React组件文件中，导入所需的模块。
> 
> javascript
> 
> ```
> import React, { useState } from 'react';
> // 导入Editor组件
> import { Editor } from '@bytemd/react';
> // 导入Mermaid和GFM插件
> import mermaid from '@bytemd/plugin-mermaid';
> import gfm from '@bytemd/plugin-gfm';
> // 导入基础样式
> import 'bytemd/dist/index.css';
> ```
> 
> **配置插件**
> 初始化插件并放入一个数组中。
> 
> javascript
> 
> ```
> // 配置插件
> const plugins = [
>   gfm(),   // 启用GFM扩展语法
>   mermaid(), // 启用Mermaid图表支持
>   // 你可以继续添加其他插件...
> ];
> ```
> 
> **使用组件**
> 在组件中使用`Editor`，并将插件数组和内容状态绑定上去。
> 
> javascript
> 
> ```
> const App = () => {
>   // 使用state来保存Markdown内容
>   const [value, setValue] = useState('');
> 
>   return (
>     <Editor
>       value={value}
>       plugins={plugins}
>       onChange={(v) => setValue(v)}
>     />
>   );
> };
> 
> export default App;
> ```
> 
> 完成以上步骤后，你的ByteMD编辑器就已经支持Mermaid图表了。你可以尝试在编辑器中输入以下Mermaid代码进行测试：
> 
> markdown
> 
> \`\`\`mermaid graph TD A\[开始\] --> B{判断} B -->|是| C\[执行方案一\] B -->|否| D\[执行方案二\] C --> E\[结束\] D --> E \`\`\`</issue_description>
> 
> ## Comments on the Issue (you are @copilot in this section)
> 
> <comments>
> </comments>
> 


</details>

- Fixes halo-sigs/plugin-bytemd#44

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

✨ Let Copilot coding agent [set things up for you](https://github.com/halo-sigs/plugin-bytemd/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from ruibaby. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from ruibaby. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[ruibaby]

@copilot 能将 mermaid 渲染的结果保存吗？避免需要在文章页面再加载 mermaid 进行渲染。

[Copilot]

@copilot 能将 mermaid 渲染的结果保存吗？避免需要在文章页面再加载 mermaid 进行渲染。

目前 @bytemd/plugin-mermaid 插件默认是在浏览器端渲染 Mermaid 图表。要实现预渲染（避免文章页面再次加载 mermaid），有两个方案：

方案1：使用 rehype-mermaid 插件实现服务端预渲染

• 需要添加 rehype-mermaid 依赖
• 在编辑器保存时将 mermaid 代码块转换为 SVG
• 优点：文章页面无需加载 mermaid.js，性能更好
• 缺点：需要额外的服务端依赖，增加构建复杂度

方案2：保持当前客户端渲染方式

• 保持现有的简单集成
• 文章页面需要加载 mermaid.js 进行渲染
• 优点：实现简单，与其他 ByteMD 插件一致
• 缺点：文章页面需要额外加载和执行 mermaid.js

请问您希望采用哪种方案？如果选择方案1，我可以添加 rehype-mermaid 来实现预渲染。

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.npmjs.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[ruibaby]

@copilot 能将 mermaid 渲染的结果保存吗？避免需要在文章页面再加载 mermaid 进行渲染。

目前 @bytemd/plugin-mermaid 插件默认是在浏览器端渲染 Mermaid 图表。要实现预渲染（避免文章页面再次加载 mermaid），有两个方案：

方案1：使用 rehype-mermaid 插件实现服务端预渲染

• 需要添加 rehype-mermaid 依赖
• 在编辑器保存时将 mermaid 代码块转换为 SVG
• 优点：文章页面无需加载 mermaid.js，性能更好
• 缺点：需要额外的服务端依赖，增加构建复杂度

方案2：保持当前客户端渲染方式

• 保持现有的简单集成
• 文章页面需要加载 mermaid.js 进行渲染
• 优点：实现简单，与其他 ByteMD 插件一致
• 缺点：文章页面需要额外加载和执行 mermaid.js

请问您希望采用哪种方案？如果选择方案1，我可以添加 rehype-mermaid 来实现预渲染。

Warning  警告

Firewall rules blocked me from connecting to one or more addresses (expand for details)
防火墙规则阻止我连接到一个或多个地址（展开查看详情）

@copilot 方案一

[Copilot]

@copilot 能将 mermaid 渲染的结果保存吗？避免需要在文章页面再加载 mermaid 进行渲染。

目前 @bytemd/plugin-mermaid 插件默认是在浏览器端渲染 Mermaid ...

已实现方案一：使用 rehype-mermaid 进行服务端预渲染。

实现方案：

• 添加了 rehype-mermaid 依赖用于服务端渲染 Mermaid 图表
• 创建了自定义插件 pluginMermaidSSR() 使用 rehype-mermaid 的 inline-svg 策略
• 分离了编辑器插件和处理器插件配置：
  • 编辑器使用 @bytemd/plugin-mermaid 提供工具栏和语法高亮
  • 处理器使用 pluginMermaidSSR() 将 Mermaid 代码块预渲染为 SVG
• 更新了处理逻辑为异步处理以支持 rehype-mermaid

效果：

• 编辑时可以使用 Mermaid 工具栏和预览功能
• 保存时 Mermaid 代码块会被转换为内联 SVG
• 文章页面直接显示 SVG，无需加载 mermaid.js

提交 hash: 6ce1472