mermaid-theme

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

2|Updated Oct 16, 2025

Search Tags:#mermaid #configuration #environment-variables #shell-script #color-scheme #diagram-theme

Ready to run

npx skills add https://github.com/musingfox/cc-plugins --skill mermaid-theme

💬 Prompt for ChatGPT / Claude Chat▼

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.