tessl/npm-docusaurus--theme-mermaid
Mermaid diagram rendering components for Docusaurus websites with theme integration and error handling
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
plugin-setup.mddocs/
Plugin Setup
Configuration and setup functionality for integrating @docusaurus/theme-mermaid with Docusaurus.
Capabilities
Theme Plugin Factory
Creates a Docusaurus theme plugin for Mermaid integration.
/**
* Creates a Docusaurus theme plugin for Mermaid integration
* @returns Plugin configuration object for Docusaurus
*/
function themeMermaid(): Plugin<void>;
interface Plugin<T> {
name: string;
getThemePath?(): string;
getTypeScriptThemePath?(): string;
}Usage Example:
// docusaurus.config.js
import themeMermaid from "@docusaurus/theme-mermaid";
export default {
themes: [themeMermaid()],
themeConfig: {
mermaid: {
theme: {
light: 'default',
dark: 'dark',
},
},
},
};Theme Configuration Validation
Validates and normalizes theme configuration for Mermaid settings.
/**
* Validates and normalizes theme configuration for Mermaid settings
* @param context - Validation context with validate function and themeConfig
* @returns Validated and normalized theme configuration
*/
function validateThemeConfig(
context: ThemeConfigValidationContext<ThemeConfig>
): ThemeConfig;
interface ThemeConfigValidationContext<T> {
validate: (schema: any, config: any) => T;
themeConfig: any;
}Default Configuration
Default theme configuration values used when not specified.
const DEFAULT_THEME_CONFIG: ThemeConfig;
interface ThemeConfig {
mermaid: {
theme: {
dark: string;
light: string;
};
options: Record<string, any>;
};
}The default configuration provides:
- Light theme:
'default' - Dark theme:
'dark' - Empty options object:
{}
Configuration Schema
Joi validation schema for theme configuration structure.
const Schema: Joi.ObjectSchema<ThemeConfig>;Valid Configuration Example:
const config = {
mermaid: {
theme: {
light: 'forest', // Any valid Mermaid theme
dark: 'dark', // Any valid Mermaid theme
},
options: {
startOnLoad: false, // Mermaid configuration options
theme: 'base', // Will be overridden by theme.light/dark
},
},
};Install with Tessl CLI
npx tessl i tessl/npm-docusaurus--theme-mermaid