Merge pull request #6 from LiHowe/dev

dev merge v0.1.16
LiHowe · Jan 16, 2023 · 2ab57af · 2ab57af
2 parents e411715 + c2fc4bb
commit 2ab57af
Show file tree

Hide file tree

Showing 14 changed files with 4,213 additions and 14,956 deletions.
diff --git a/README.md b/README.md
@@ -1,56 +1,112 @@
 # vuepress-plugin-mermaid-next
 
-[中文说明](./README_ZH.md)
+![npm](https://img.shields.io/npm/v/vuepress-plugin-mermaid-next?style=flat-square)
+![npm](https://img.shields.io/npm/dm/vuepress-plugin-mermaid-next?style=flat-square)
+![mv](https://img.shields.io/static/v1?label=mermaid&message=^9.2.1&color=blue&style=flat-square)
 
-> This plugin is only for [`vuepress-next`](https://vuepress.github.io)
+> 该插件仅适用于 [`vuepress-next`](https://vuepress.github.io)
 
-## Installation
+[English Version](./README_EN.md)
+
+![dark theme](https://s2.loli.net/2023/01/13/NTaYjKcpb1L8wZt.gif)
+
+## 安装
 
 ```shell
 # use npm
 npm install mermaid vuepress-plugin-mermaid-next
-
-# use yarn
-yarn add mermaid vuepress-plugin-mermaid-next
 ```
 
-## Usage
+## 使用
+
+### 基础使用
 
-### `.vuepress/config.ts` or (`config.js`)
+在 `.vuepress/config.ts` or (`config.js`) 中配置
 
 ```typescript
+import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'
+
 export default {
-  // ...
   plugins: [
-    // ...other plugins
-    ['mermaid-next', {}]
-  ]
-  // ...
+    MermaidPlugin({
+      theme: Themes.forest,
+      darkTheme: 'forest', // 非必填, 默认值为 `dark`
+    }),
+  ],
 }
-// or 
-import MermaidPlugin from 'vuepress-plugin-mermaid-next'
+```
+
+本插件支持明亮模式与暗黑模式独立配置, 需要在配置中表明 `darkTheme` 即可.
+如未提供 `darkTheme` 配置, 则使用 `dark` 作为默认暗黑主题.
+
+### Mermaid 配置
+
+你可以传入插件配置来自定义mermaid, 传入的配置将会用于 `mermaid.initialize()`
+
+Mermaid 完整的配置字段可以查看 [Mermaid - Configuration](https://mermaid-js.github.io/mermaid/#/./Setup?id=mermaidapi-configuration-defaults)
+
+### 主题配置
+
+除了mermaid提供的开箱即用的主题外, 插件还补充了以下主题:
+
+#### 明亮主题
+
++ `Themes.sky`: 浅蓝色调
+![浅蓝色主题](https://s2.loli.net/2023/01/13/e8Y3Rqu4KowCjN6.png)
++ `Themes.ocean`: 深蓝色调
+
+#### 暗黑主题
+
++ `Themes.brown`
+![棕色主题](https://s2.loli.net/2023/01/13/NGYc2A4e7BytmOR.png)
+
+#### 自定义主题
+
+如果你想修改内置主题的部分颜色, 可以在配置中添加 `themeVariables` 来覆盖主题颜色, 具体可覆盖颜色参考[官网](https://mermaid.js.org/config/theming.html)
+
+```ts
+import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'
 export default {
   plugins: [
     MermaidPlugin({
-      // *optional, plugin option
+      theme: Themes.sky,
+      themeVariables: {
+        fontSize: '14px',
+        primaryColor: '#FFC3A1',
+      }
     })
   ]
 }
 ```
 
-### Customization
-
-You can config mermaid by using plugin settings.
+如果你想完全自定义一个主题, 本插件提供了 `registerTheme` 来自定义主题.
 
-The settings you configured will be use in `mermaid.initialize()`
+API: `registerTheme(id, themeVariables)`
 
-Fully configuration fields can be find in [Mermaid - Configuration](https://mermaid-js.github.io/mermaid/#/./Setup?id=mermaidapi-configuration-defaults)
+```ts
+import { MermaidPlugin, Themes, registerTheme } from 'vuepress-plugin-mermaid-next'
 
+const fire = registerTheme('fire', {
+  background: '#FFC3A1',
+  fontSize: '14px',
+  primaryColor: '#FFC3A1',
+  noteBkgColor: '#F0997D',
+  noteTextColor: '#333',
+  lineColor: '#A75D5D',
+})
 
-## Feature
+export default {
+  plugins: [
+    MermaidPlugin({
+      theme: fire,
+    })
+  ]
+}
+```
 
-[x] Dark mode supported
-[x] mermaid config supported
-[ ] External Diagrams
-[ ] Preset themes
+## 功能
 
++ [x] Dark mode supported
++ [x] mermaid config supported
++ [x] Preset themes
++ [ ] External Diagrams(MindMap)
diff --git a/README_EN.md b/README_EN.md
@@ -0,0 +1,108 @@
+# vuepress-plugin-mermaid-next
+
+![npm](https://img.shields.io/npm/v/vuepress-plugin-mermaid-next?style=flat-square)
+![npm](https://img.shields.io/npm/dm/vuepress-plugin-mermaid-next?style=flat-square)
+![mv](https://img.shields.io/static/v1?label=mermaid&message=^9.2.1&color=blue&style=flat-square)
+
+> This plugin is only for [`vuepress-next`](https://vuepress.github.io)
+
+![dark theme](https://s2.loli.net/2023/01/13/NTaYjKcpb1L8wZt.gif)
+
+## Installation
+
+```shell
+# use npm
+npm install mermaid vuepress-plugin-mermaid-next
+```
+
+## Usage
+
+### `.vuepress/config.ts` or (`config.js`)
+
+```typescript
+import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'
+
+export default {
+  plugins: [
+    MermaidPlugin({
+      theme: Themes.sky,
+      darkTheme: Themes.forest, // not required, default value is `dark`
+    }),
+  ],
+}
+```
+
+The plugin support out-of-the-box dark mode , you can specified dark mode theme with `darkTheme` field.
+If `darkTheme` is null or unavaliable value, it use `dark` as default.
+
+### Mermaid config
+
+You can use the plugin config to customize the Mermaid, the config will be used for `mermaid.initialize(config)`
+
+The full list of Mermaid configuration can be found in [Mermaid - Configuration](https://mermaid-js.github.io/mermaid/#/./Setup?id=mermaidapi-configuration-defaults)
+
+### Theme config
+
+Except Mermaid built-in theme, the plugin add some additional themes like:
+
+#### Light Mode Themes
+
++ `Themes.sky`: light blue
+![浅蓝色主题](https://s2.loli.net/2023/01/13/e8Y3Rqu4KowCjN6.png)
++ `Themes.ocean`: dark blue
+
+#### Dark Mode Themes
+
++ `Themes.brown`
+![brown themes](https://s2.loli.net/2023/01/13/NGYc2A4e7BytmOR.png)
+
+#### Theme customization
+
+If you want to modify the part of theme colors, you can use `themeVariables` field to overwrite the theme color configuration.
+
+The full list of `themeVariables` can be found in [Mermaid Theming](https://mermaid.js.org/config/theming.html)
+
+```ts
+import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'
+export default {
+  plugins: [
+    MermaidPlugin({
+      theme: Themes.sky,
+      themeVariables: {
+        fontSize: '14px',
+        primaryColor: '#FFC3A1',
+      }
+    })
+  ]
+}
+```
+
+Or you want to create a new theme, just use `registerTheme(id, themeVariables)`.
+
+```ts
+import { MermaidPlugin, Themes, registerTheme } from 'vuepress-plugin-mermaid-next'
+
+const fire = registerTheme('fire', {
+  background: '#FFC3A1',
+  fontSize: '14px',
+  primaryColor: '#FFC3A1',
+  noteBkgColor: '#F0997D',
+  noteTextColor: '#333',
+  lineColor: '#A75D5D',
+})
+
+export default {
+  plugins: [
+    MermaidPlugin({
+      theme: fire,
+    })
+  ]
+}
+```
+
+## Feature
+
++ [x] Dark mode supported
++ [x] mermaid config supported
++ [x] Preset themes
++ [ ] External Diagrams(MindMap)
diff --git a/README_ZH.md b/README_ZH.md
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -1,7 +1,30 @@
-// import mermaidPlugin from '../../lib/node/index'
+import { MermaidPlugin, Themes, registerTheme } from '../../lib/node'
+
+const cc = registerTheme('fire', {
+  background: '#EFF5F5',
+  fontSize: '14px',
+  primaryColor: '#EFF5F5',
+  noteBkgColor: '#497174',
+  noteTextColor: '#333',
+  darkMode: true,
+  lineColor: '#EB6440',
+  primaryBorderColor: '#D6E4E5',
+  primaryTextColor: '#497174',
+  git0: '#D6E4E5',
+  git1: '#D6E4E5',
+  git2: '#D6E4E5',
+  git3: '#D6E4E5',
+  git4: '#D6E4E5',
+  git5: '#D6E4E5',
+  git6: '#D6E4E5',
+  git7: '#D6E4E5',
+})
 
 export default {
   plugins: [
-    // mermaidPlugin({})
+    MermaidPlugin({
+      theme: cc,
+      darkTheme: cc,
+    })
   ]
 }