The @docmd/plugin-mermaid plugin integrates the powerful Mermaid.js engine into your documentation pipeline. It allows you to transform plain-text descriptions into high-fidelity, interactive diagrams with built-in support for themes, panning, and zooming.

Configuration

The Mermaid plugin is bundled with @docmd/core and enabled by default. No mandatory configuration is required.

Example

import { defineConfig } from '@docmd/core';

export default defineConfig({
  plugins: {
    mermaid: {} // Enabled by default
  }
});

Features

• Theme Awareness: Diagrams automatically adapt to Light or Dark mode transitions.
• Interactive Controls: Built-in Pan, Zoom, and Fullscreen buttons for every diagram.
• Lazy Loading: Diagrams are initialised only as they enter the user’s viewport for optimum performance.
• Icon Support: Deep integration with the Lucide icon pack (use icon:name syntax).

Usage

Embed diagrams using a fenced code block with the mermaid language identifier.

Sequence Diagram Example

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Enters URL
    Browser->>Server: HTTP Request
    Server-->>Browser: HTTP Response
    Browser-->>User: Displays Page
```

Architecture Example