Will these diagrams work outside of GitHub?

Yes, while optimized for GitHub's specific constraints, these high-contrast styles provide excellent readability in any Mermaid-compatible environment like Notion or Obsidian.

Why should I use dark fills for diagrams?

Dark fills with light strokes ensure that nodes remain clearly visible against both white (light mode) and dark (dark mode) background themes on GitHub.

How do I make subgraphs look good in both modes?

The skill uses 'fill:none' for subgraphs, allowing the background to adapt to the theme while using a colored stroke and dashed border for definition.

Does this skill support Font Awesome icons?

No, GitHub's Mermaid renderer does not support Font Awesome; this skill encourages using descriptive text and rounded shapes instead to prevent rendering errors.

Mermaid Diagram Designer

Name: Mermaid Diagram Designer
Author: BfdCampos

byBfdCampos

0•

学习与文档

Generates professional, high-contrast Mermaid diagrams optimized for GitHub's light and dark mode themes.

This skill empowers Claude to create visually consistent and accessible Mermaid diagrams specifically tailored for GitHub markdown. By enforcing a 'dark fill, light stroke' methodology, it ensures that flowcharts, architecture diagrams, and process maps remain perfectly legible regardless of the user's interface theme. It eliminates common pitfalls like broken Font Awesome icons, unreadable light-mode colors, and subgraph parsing errors, providing a standardized template for high-quality technical documentation.

主要功能

01Transparent subgraph styling with fill:none adaptation

02Pre-defined GitHub-compatible color palettes

03High-contrast 'Dark Fill + Light Stroke' styling methodology

04Automatic GitHub dark/light mode compatibility

05Standardized rounded node shapes for professional aesthetics

060 GitHub stars

使用场景

01Creating system architecture diagrams for GitHub READMEs

02Visualizing CI/CD pipelines and developer workflows

03Documenting complex logic and decision flows in pull requests

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bfdcampos/mermaid-contrast mermaid

For use in Claude.ai and ChatGPT

Download Skill