mermaid

Create GitHub-ready Mermaid diagrams with dark/light mode styling conventions.

1|Updated Nov 15, 2022

Search Tags:#documentation #markdown #mermaid #github #styling #diagrams #dark-mode

Ready to run

npx skills add https://github.com/BfdCampos/dotfiles --skill mermaid-bfdcampos

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/BfdCampos/dotfiles/tree/main/claude/skills/mermaid
Command: npx skills add https://github.com/BfdCampos/dotfiles --skill mermaid-bfdcampos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams render inconsistently on GitHub due to theme variations and styling choices. This guide helps you apply best practices so diagrams look correct in both dark and light modes.

Core Features & Use Cases

Provides color and stroke guidelines for readability across themes.
Establishes a canonical template and subgraph conventions to keep diagrams consistent in documentation.
Includes practical use cases for architecture diagrams, flowcharts, and data pipelines in Markdown.

Quick Start

Create a Mermaid diagram following the canonical GitHub-friendly template to ensure dark/light mode compatibility.

Frequently Asked Questions about mermaid

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

FAQPage Schema

What is the best way to style Mermaid flowcharts for Markdown documentation?▼

Styling Mermaid flowcharts for Markdown documentation is best handled by using a canonical template with subgraph conventions, ensuring diagrams remain visually consistent and readable across architecture diagrams and data pipelines.

Why do my Mermaid diagrams look unreadable in GitHub dark mode?▼

Mermaid diagrams become unreadable in GitHub dark mode due to theme variations and improper styling choices. Applying specific color and stroke guidelines ensures text and shapes stay visible across both themes.

Can I use Mermaid diagrams in GitHub PRs and READMEs without external image hosting?▼

You can embed Mermaid diagrams directly in GitHub PRs and READMEs using Markdown code blocks. This approach generates diagrams natively, ensuring they render seamlessly without requiring external image hosting.

How do I structure Mermaid subgraphs to keep documentation diagrams consistent?▼

Structuring Mermaid subgraphs consistently involves following established conventions for labeling and grouping. This maintains visual clarity and ensures complex architecture diagrams remain readable across various GitHub themes.