GitHub Mermaid Diagrams

Create Mermaid diagrams that render beautifully in GitHub markdown — in both light and dark mode.

Why This Skill Exists

GitHub renders Mermaid diagrams with its own renderer that behaves differently from mermaid.live or local tools:

• Dark mode overrides text color to light gray, making text on light-filled nodes invisible
• Edge labels get opaque background boxes that clash with the diagram
• Thin edges become nearly invisible in dark mode
• classDef with class keyword can create phantom nodes in some renderers
• HTML tags like <br/> work for line breaks, but <i>, <b> render as raw text in some renderers
• The color: property in style directives is sometimes respected, sometimes ignored depending on the theme

This skill encodes proven patterns for making diagrams work in both modes.

Quick Start