vuepress 引入 mermaid 失败, 求解.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 274 天前的主题，其中的信息可能已经有所发展或是发生改变。

安装了 npm i vuepress-plugin-mermaidjs.

清空了.temp, 重新 npm install, 在 config.js -> pluins 引入了 'vuepress-plugin-mermaidjs'

然后就是 npm run docs:dev 启动

graph TD A[开始] --> B[对接方使用 URL 链接进行免登录] B --> C{验证免登录信息} C -- 验证成功 --> D[跳转到首页] C -- 验证失败 --> E[跳转到首页] D --> F[用户访问个人中心] F --> G[显示用户信息] E --> H[用户访问个人中心] H --> I[跳转到登录页]

config.js 配置如下:

export default defineUserConfig({ title: "", description: " ", lang: "zh-CN", port: 8081, dest: "public", // plugins: [ 'vuepress-plugin-mermaidjs' ], bundler: viteBundler(), theme: defaultTheme({ lastUpdated: false, // 时间戳 contributors: false, // 作者 logo: '/images/icon.png', }), });

还是没成功. 还是显示代码块. 不知道什么原因, 也没报错. 问了 ai 和搜索引擎.有没有踩过坑的 v 大佬们帮下忙.

vuepress

mermaid

plugins

6 条回复 2025-01-09 09:20:17 +08:00

sibusana

274 天前

graph TD
A[开始] --> B[对接方使用 URL 链接进行免登录]
B --> C{验证免登录信息}
C -- 验证成功 --> D[跳转到首页]
C -- 验证失败 --> E[跳转到首页]
D --> F[用户访问个人中心]
F --> G[显示用户信息]
E --> H[用户访问个人中心]
H --> I[跳转到登录页]

这部分前面有写 ```mermaid 吗

Foxalone

274 天前

@sibusana 写了. 不然 V2EX 这里不会显示代码块了. 我现在的问题就是变成代码块了, 而不是流程图

sibusana

274 天前

可以找到 node_modules 里面的 plugin 的源码，打断点看看

Foxalone

274 天前

@sibusana 我没做过前端. 只是按照文档进行部署. 用 1.8 版本的 vuepress 好像是可以的. vuepress1.x 版本应该都可以. 或者使用其他主题. 目前还是没有找到任何解决办法

Plumbiu

274 天前

文档里不就写了只支持 1.x 版本的的...

Foxalone

273 天前

@Plumbiu 文档里面也支持 2, 你应该没注意到最下面的说明:
VuePress 2 Support
You can use this plugin with the upcoming (next) release of VuePress aka VuePress 2. To do so, use version 2.0.0-beta.1 or above.