rspress-plugin-mermaid 0.1.1 → 0.1.2-beta.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # rspress-plugin-mermaid
 
+## 0.1.2-beta.0
+
+### Patch Changes
+
+- 932dbb7: compat component path
+- Updated dependencies [932dbb7]
+  - rspress-plugin-devkit@0.1.2-beta.0
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -1,5 +1,7 @@
 # rspress-plugin-mermaid ![NPM Version](https://img.shields.io/npm/v/rspress-plugin-mermaid)
 
+[简体中文](./README.zh-CN.md)
+
 Rspress plugin to render mermaid diagrams in markdown files.
 
 Write mermaid as code blocks in markdown files and they will be rendered as SVGs:

package/README.zh-CN.md

@@ -0,0 +1,63 @@
+# rspress-plugin-mermaid ![NPM Version](https://img.shields.io/npm/v/rspress-plugin-mermaid)
+
+为 Rspress 支持基于 [Mermaid](hhttps://mermaid.js.org/#/) 的流程图、时序图等图表。
+
+编写 Mermaid 图表时，只需使用 `mermaid` 代码块，插件会自动将其转换为 SVG。
+
+````markdown
+```mermaid
+flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]
+```
+````
+
+<div align="center">
+  <img src="./image.png" alt="sample" width="400" height="560" />
+</div>
+
+## 使用
+
+```bash
+npm i rspress-plugin-mermaid
+pnpm add rspress-plugin-mermaid
+```
+
+```ts
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import mermaid from 'rspress-plugin-mermaid';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  plugins: [mermaid()],
+});
+```
+
+## 配置
+
+### mermaidConfig
+
+Mermaid 配置选项，将传递给 `mermaid.initialize` 函数。查看 [mermaid 文档](https://mermaid.js.org/config/schema-docs/config.html) 了解更多细节。
+
+- Type: `object`
+
+```ts
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import mermaid from 'rspress-plugin-mermaid';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  plugins: [
+    mermaid({
+      mermaidConfig: {
+        theme: 'forest',
+      },
+    }),
+  ],
+});
+```

package/doc_build/static/search_index.e342ad1c.json

@@ -0,0 +1 @@
+[{"id":0,"title":"RSPress x Mermaid","content":"#\n\n","routePath":"/","lang":"","toc":[],"domain":"","frontmatter":{},"version":""}]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rspress-plugin-mermaid",
-  "version": "0.1.1",
+  "version": "0.1.2-beta.0",
   "description": "Rspress plugin to render mermaid diagrams",
   "keywords": [
     "rspress",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@rspress/shared": "^1.17.1",
     "mermaid": "^10.9.0",
-    "rspress-plugin-devkit": "^0.1.1"
+    "rspress-plugin-devkit": "^0.1.2-beta.0"
   },
   "devDependencies": {
     "@types/node": "^20.12.5",

package/src/index.ts

@@ -3,6 +3,7 @@ import path from 'node:path';
 import {
   PresetConfigMutator,
   RemarkCodeBlockToGlobalComponentPluginFactory,
+  getCompatComponentPath,
 } from 'rspress-plugin-devkit';
 
 import type { RspressPlugin } from '@rspress/shared';
@@ -22,7 +23,11 @@ export default function rspressPluginMermaid(
     components: [
       {
         lang: 'mermaid',
-        componentPath: path.join(__dirname, './components/MermaidRender.tsx'),
+        componentPath: path.join(
+          __dirname,
+          './components',
+          getCompatComponentPath(__dirname, 'MermaidRender.tsx'),
+        ),
         childrenProvider() {
           return [];
         },

package/doc_build/static/search_index.8a52de80.json

@@ -1 +0,0 @@
-[{"id":0,"title":"RSPress x Mermaid","content":"#\n\nMERMAID\n\nflowchart TD\n\nA[Christmas] -->|Get money| B(Go shopping)\n\nB --> C{Let me think}\n\nC -->|One| D[Laptop]\n\nC -->|Two| E[iPhone]\n\nC -->|Three| F[fa:fa-car Car]","routePath":"/","lang":"","toc":[],"domain":"","frontmatter":{},"version":""}]