or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

client-usage.md components.md index.md plugin-setup.md

tile.json

@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;
}