CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Overview
Eval results
Files

@docusaurus/theme-mermaid

@docusaurus/theme-mermaid is a Docusaurus theme plugin that provides Mermaid diagram rendering capabilities for documentation websites. It integrates the popular Mermaid library (>=11.6.0) to enable rendering of diagrams and flowcharts directly in Markdown content with automatic theme switching, error boundaries, and client-side rendering support.

Package Information

  • Package Name: @docusaurus/theme-mermaid
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @docusaurus/theme-mermaid

Core Imports

import themeMermaid, { validateThemeConfig } from "@docusaurus/theme-mermaid";

For client-side usage:

import {
  useMermaidConfig,
  useMermaidThemeConfig,
  useMermaidRenderResult,
  MermaidContainerClassName
} from "@docusaurus/theme-mermaid/client";

For React components:

import Mermaid from "@theme/Mermaid";

Basic Usage

Plugin Registration

// docusaurus.config.js
import themeMermaid from "@docusaurus/theme-mermaid";

export default {
  themes: [themeMermaid()],
  themeConfig: {
    mermaid: {
      theme: {
        light: 'default',
        dark: 'dark',
      },
      options: {
        // Mermaid config options
      },
    },
  },
};

Component Usage

import React from "react";
import Mermaid from "@theme/Mermaid";

export default function MyComponent() {
  const mermaidCode = \`
    graph TD
      A[Start] --> B[Process]
      B --> C[End]
  \`;
  
  return <Mermaid value={mermaidCode} />;
}

Architecture

@docusaurus/theme-mermaid is built around several key components:

  • Plugin System: Main theme plugin that integrates with Docusaurus plugin architecture
  • Theme Configuration: Joi-based validation and management of Mermaid theme settings
  • Client Hooks: React hooks for managing Mermaid configuration and rendering
  • React Components: Pre-built components with error boundaries and safe rendering
  • Theme Integration: Automatic light/dark mode support based on Docusaurus color mode

Capabilities

Plugin Configuration

Main plugin factory and theme configuration validation for setting up Mermaid in Docusaurus.

function themeMermaid(): Plugin<void>;

function validateThemeConfig(
  context: ThemeConfigValidationContext<ThemeConfig>
): ThemeConfig;

Plugin Setup

Client Rendering

Client-side hooks and utilities for rendering Mermaid diagrams with theme integration.

function useMermaidConfig(): MermaidConfig;

function useMermaidThemeConfig(): ThemeConfig['mermaid'];

function useMermaidRenderResult(params: {
  text: string;
  config?: MermaidConfig;
}): RenderResult | null;

const MermaidContainerClassName: string;

Client Usage

React Components

Pre-built React components for rendering Mermaid diagrams with error handling.

interface Props {
  value: string;
}

function Mermaid(props: Props): ReactNode;

Components

Types

interface ThemeConfig {
  mermaid: {
    theme: {
      light: mermaidAPI.Theme;
      dark: mermaidAPI.Theme;
    };
    options: mermaidAPI.Config;
  };
}

type UserThemeConfig = DeepPartial<ThemeConfig>;

interface Plugin<T> {
  name: string;
  getThemePath?(): string;
  getTypeScriptThemePath?(): string;
}

Install with Tessl CLI

npx tessl i tessl/npm-docusaurus--theme-mermaid
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@docusaurus/theme-mermaid@3.8.x
Publish Source
CLI
Badge
tessl/npm-docusaurus--theme-mermaid badge