feat: 支持在md文件里使用Mermaid

[lane9k]

What problem does this feature solve?

项目里存在很多md文件Mermaid 时序图，官方dumi 默认不支持Mermaid，社区也没有相关可用包。期待官方支持下

Possible Solution (optional)

No response

[Jinbao1001]

npm package: rehype-mermaid

config: extraRehypePlugins

[lane9k]

@Jinbao1001 感谢，我尝试在配置文件.dumirc.ts里增加如下： export default defineConfig({

extraRehypePlugins:[ require('rehype-mermaid'), ], ##其他配置.. run时 报错： [cause]: Error [ERR_REQUIRE_ESM]: require() of ES Module /home/fire/5-6/spin/node_modules/.pnpm/[email protected]/node_modules/rehype-mermaid/dist/rehype-mermaid.js from /home/fire/5-6/spin/.dumirc.ts not supported. 不知道如何正确配置使得dumi2.4.18工作

[Jinbao1001]

install then extraRehypePlugins: ['rehype-mermaid']

[lane9k]

@Jinbao1001 试过了
run起来后 页面无法识别mermaid指令 无法渲染 按普通文档显示。

确定是这个extraRehypePlugins插件配置接口吗

[Jinbao1001]

sorry 指引有误, 测试了一下,

插件不生效的原因: Mermaid 的原理是在构建时, 会将<pre> | <code> 标签转换为 svg dumi 的 tag 增强插件, 会在构建时将 <pre> & <code> 转换为 <sourceCode> 标签, 代码块高亮能力会在运行时再生成对应的 <pre> | <code> 标签 此插件和 dumi 在运作与设计模式上存在冲突

目前没有计划支持此类依靠构建时识别并替换源码标签的图表类插件增强能力

如果你对此有兴趣, 并有合理方案, 欢迎 pr

[sogud]

现在还不支持mermaid渲染吗？ 有什么办法支持？