Skip to content

Conversation

Copy link

Copilot AI commented Dec 3, 2025

Adds Mermaid diagram support to the ByteMD editor, enabling users to render flowcharts, sequence diagrams, and other Mermaid visualizations directly in markdown.

Changes

  • Added @bytemd/plugin-mermaid@^1.22.0 dependency
  • Registered mermaid plugin alongside existing plugins (gfm, math, breaks)

Usage

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

> [!WARNING]
>
> <details>
> <summary>Firewall rules blocked me from connecting to one or more addresses (expand for details)</summary>
>
> #### I tried to connect to the following addresses, but was blocked by firewall rules:
>
> - `https://api.github.com//advisories`
>   - 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` (http block)
>
> If you need me to access, download, or install something from one of these locations, you can either:
>
> - Configure [Actions setup steps](https://gh.io/copilot/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](https://github.com/halo-sigs/plugin-bytemd/settings/copilot/coding_agent) (admins only)
>
> </details>

<!-- 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
Copy link

f2c-ci-robot bot commented Dec 3, 2025

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 f2c-ci-robot bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. do-not-merge/release-note-label-needed Indicates that a PR should not merge because it's missing one of the release note labels. labels Dec 3, 2025
Co-authored-by: ruibaby <21301288+ruibaby@users.noreply.github.com>
@f2c-ci-robot
Copy link

f2c-ci-robot bot commented Dec 3, 2025

[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:

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

1 similar comment
@f2c-ci-robot
Copy link

f2c-ci-robot bot commented Dec 3, 2025

[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:

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

Copilot AI changed the title [WIP] Integrate Mermaid plugin into ByteMD feat: integrate Mermaid plugin for ByteMD editor Dec 3, 2025
Copilot AI requested a review from ruibaby December 3, 2025 06:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

do-not-merge/release-note-label-needed Indicates that a PR should not merge because it's missing one of the release note labels. do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants