Bfdcampos Mermaid Contrast
bfdcampos-mermaid-contrast is a Claude Code plugin for the Build phase that produces high-contrast Mermaid diagrams readable in light mode, dark mode, and on GitHub.
by BfdCampos · github.com/BfdCampos/mermaid-contrast
Add this plugin when you want Claude to emit Mermaid diagrams that stay readable on GitHub in both light and dark themes.
Add it to Claude Code
Install the plugin in Claude Code. One command, paste-ready.
/plugin install bfdcampos-mermaid-contrast@BfdCampos/mermaid-contrastBuilt to be called by your agent
Skillselion is itself an MCP server. Your agent can pull this entry and a paste-ready install config straight from the API - no copy-paste.
Retrieve this entry with skillselion.get_details("plugin:BfdCampos/mermaid-contrast") and the paste-ready config with skillselion.get_install_config("plugin:BfdCampos/mermaid-contrast").
What it does
bfdcampos-mermaid-contrast is a one-plugin Claude Code extension aimed at solo builders who document systems with Mermaid but hate illegible pastel boxes on GitHub or in dark-mode previews. Instead of manually tuning classDef and theme variables every time, you register the marketplace and let the plugin steer Claude toward contrast-safe palettes and line weights that survive real viewers. It fits technical founders writing architecture notes, API guides, and onboarding docs during Build, especially when diagrams are a primary explanation layer. The scope is intentionally narrow: it is not a general diagramming suite or a full design system—only Mermaid contrast and styling discipline. If your deliverable is a crisp, shareable diagram embedded in markdown, this plugin reduces rework and review churn from unreadable exports.
Highlights
- Single focused plugin for high-contrast Mermaid diagram styling.
- Works in light and dark viewing modes without washed-out nodes or edges.
- GitHub-compatible styling so README and issue diagrams stay legible.
- Beautiful default contrast rules so solo builders skip hand-tuning theme variables.
- Create flowcharts, sequence diagrams, and other Mermaid types with consistent visual hierarchy.
Why builders use it
Mermaid diagrams often look fine in the editor but fail on GitHub or dark themes, forcing you to redo styling by hand.
After install, Claude-generated Mermaid in your docs uses contrast-aware styling that stays readable without manual theme tweaking.
At a glance
- Type - Plugin in Development Tools.
- Adoption - 0 installs, 0 stars, 0 votes.
FAQ
Who is bfdcampos-mermaid-contrast for?
It is for developers and technical writers using Claude Code to generate Mermaid diagrams in markdown documentation.
When should I use bfdcampos-mermaid-contrast?
Use it whenever you are building or updating docs, READMEs, or specs that include Mermaid and must render well on GitHub in light and dark modes.
How do I add bfdcampos-mermaid-contrast to my agent?
Register the BfdCampos/mermaid-contrast repository as a Claude Code plugin marketplace and enable the included contrast plugin for your project or user scope.
Comments
Share how you use bfdcampos-mermaid-contrast, gotchas, or tips for other indie builders.
No comments yet - be the first to share how you use it.