Can I use Font Awesome icons with this skill?

No, GitHub's Mermaid renderer does not support Font Awesome icons. This skill provides styling alternatives that use shapes and colors to differentiate nodes instead.

Why use fill:none for subgraphs?

Setting subgraph fills to 'none' allows the diagram's background to be transparent, ensuring the subgraph borders and labels adapt naturally to whichever theme the viewer is using.

How does this skill handle subgraph labels with spaces?

It enforces the use of quoted labels (e.g., subgraph Name["Label Text"]) which is the required syntax to prevent parsing errors in GitHub's markdown environment.

Why are my Mermaid diagrams invisible in GitHub dark mode?

This typically occurs when using default light fills with dark text. This skill implements a dark-fill/light-stroke pattern with white text that remains legible on both light and dark backgrounds.

GitHub-Optimized Mermaid Diagrams

Name: GitHub-Optimized Mermaid Diagrams
Author: aiskillstore

byaiskillstore

•

114

•

学习与文档

Generates professional, theme-compatible Mermaid diagrams specifically optimized for GitHub markdown rendering.

This skill provides specialized guidance and templates for creating Mermaid diagrams that render perfectly across GitHub's light and dark modes. It solves common rendering issues by enforcing a 'dark fill, light stroke' methodology, ensuring high contrast and readability regardless of the user's theme. By utilizing transparent subgraph backgrounds and proper syntax quoting, the skill helps developers create architectural visualizations, flowcharts, and system designs that look production-grade in PRs, READMEs, and technical documentation.

主要功能

01Automatic dark and light mode compatibility using high-contrast styling

02GitHub-specific syntax validation to prevent common parsing errors

03114 GitHub stars

04Standardized rounded node shapes for professional visual consistency

05Pre-defined color palettes for categorized node types like users, processes, and databases

06Transparent subgraph styling to adapt to any interface background

使用场景

01Documenting complex system architectures in project README files

02Visualizing logic flows and decision trees within GitHub Pull Requests

03Mapping out data pipelines and component interactions for technical wikis

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add aiskillstore/marketplace bfdcampos

For use in Claude.ai and ChatGPT

Download Skill