npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuepress-plugin-mermaid-next

v0.1.16

Published

A Mermaid plugin for vuepress-next

Downloads

50

Readme

vuepress-plugin-mermaid-next

npm npm mv

该插件仅适用于 vuepress-next

English Version

dark theme

安装

# use npm
npm install mermaid vuepress-plugin-mermaid-next

使用

基础使用

.vuepress/config.ts or (config.js) 中配置

import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'

export default {
  plugins: [
    MermaidPlugin({
      theme: Themes.forest,
      darkTheme: 'forest', // 非必填, 默认值为 `dark`
    }),
  ],
}

本插件支持明亮模式与暗黑模式独立配置, 需要在配置中表明 darkTheme 即可. 如未提供 darkTheme 配置, 则使用 dark 作为默认暗黑主题.

Mermaid 配置

你可以传入插件配置来自定义mermaid, 传入的配置将会用于 mermaid.initialize()

Mermaid 完整的配置字段可以查看 Mermaid - Configuration

主题配置

除了mermaid提供的开箱即用的主题外, 插件还补充了以下主题:

明亮主题

  • Themes.sky: 浅蓝色调 浅蓝色主题

暗黑主题

  • Themes.brown 棕色主题
  • Themes.plain 朴素主题

自定义主题

如果你想修改内置主题的部分颜色, 可以在配置中添加 themeVariables 来覆盖主题颜色, 具体可覆盖颜色参考官网

import { MermaidPlugin, Themes } from 'vuepress-plugin-mermaid-next'
export default {
  plugins: [
    MermaidPlugin({
      theme: Themes.sky,
      themeVariables: {
        fontSize: '14px',
        primaryColor: '#FFC3A1',
      }
    })
  ]
}

如果你想完全自定义一个主题, 本插件提供了 registerTheme 来自定义主题.

API: registerTheme(id, themeVariables)

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,
    })
  ]
}

功能

  • [x] Dark mode supported
  • [x] mermaid config supported
  • [x] Preset themes
  • [ ] External Diagrams(MindMap)