mermaid-theme

Generate a shell script that configures Mermaid diagram color themes via environment variables.

2|Updated Oct 16, 2025
One-click install
npx skills add https://github.com/musingfox/cc-plugins --skill mermaid-theme
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mermaid-theme
Source: https://github.com/musingfox/cc-plugins/tree/main/mermaid-viz/skills/mermaid-theme
Command: npx skills add https://github.com/musingfox/cc-plugins --skill mermaid-theme

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Activates a streamlined workflow to configure Mermaid diagram color themes by generating and applying a single theme script.

Core Features & Use Cases

  • Configure color themes for Mermaid diagrams by managing the MERMAID_COLOR_SCHEME environment variable.
  • Supports built-in schemes (Tokyo Night, Nord, Catppuccin, Dracula, GitHub, Solarized, etc.) and a custom color option via exports.
  • Use case: A developer wants consistent diagram visuals in docs and dashboards; they choose a scheme and apply it system-wide via the generated script.

Quick Start

Select a color scheme from the available options and source the generated script to apply the Mermaid theme.

Frequently Asked Questions about mermaid-theme

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Mermaid diagram color themes using environment variables?

Configure Mermaid diagram color themes by setting the MERMAID_COLOR_SCHEME environment variable. This Skill generates a shell script at ~/.mermaid-theme.sh that applies your chosen built-in scheme or custom colors system-wide.

What built-in color schemes are available for Mermaid diagrams?

Available built-in color schemes for Mermaid diagrams include Tokyo Night, Nord, Catppuccin, Dracula, GitHub, and Solarized. You can select any of these options to generate a theming script for consistent visuals.

How do I apply a custom color scheme to Mermaid diagrams across multiple documents?

Apply a custom color scheme to Mermaid diagrams by defining custom colors via exports. The Skill generates a single shell script that you source to enforce consistent visual themes across all documents and dashboards.

Does the Mermaid theme configuration require any external dependencies?

No external dependencies are required for Mermaid theme configuration. The Skill independently generates a shell script at ~/.mermaid-theme.sh to manage color scheme settings without needing additional packages.

Why source a shell script to apply Mermaid themes instead of configuring each diagram individually?

Sourcing a shell script applies Mermaid themes system-wide, ensuring consistent diagram visuals across docs and dashboards. This approach maps user choices to environment variables, preventing the need to configure each diagram individually.

Can I use this Mermaid theming approach for both built-in schemes and fully custom colors?

Yes, you can use this Mermaid theming approach for both built-in schemes and custom colors. It generates a shell script that maps your selection to the MERMAID_COLOR_SCHEME environment variable, supporting any Mermaid usage.