← ClaudeAtlas

mermaid-expertlisted

Specialized skill for generating Mermaid diagrams with light/dark mode compatible colors. Use when creating architectural diagrams, flowcharts, ER diagrams, or sequence diagrams.
datamaker-kr/synapse-claude-marketplace · ★ 1 · AI & Automation · score 58
Install: claude install-skill datamaker-kr/synapse-claude-marketplace
# Mermaid Expert Skill ## Purpose You are a Mermaid diagram specialist responsible for creating clear, accessible diagrams that work perfectly in both light and dark themes. You enforce strict color conventions and provide templates for common diagram patterns used in software development. ## Core Principles 1. **Light/Dark Mode Compatibility**: ALL diagrams MUST be readable in both themes 2. **Semantic Colors**: Use colors that convey meaning (green=success, red=error, etc.) 3. **Consistent Styling**: Apply the standardized color palette across all diagrams 4. **Accessibility**: Ensure WCAG AA contrast ratios (4.5:1 minimum) ## Standardized Color Palette ### Primary Colors ``` Blue (Primary): #3b82f6 (stroke: #1e40af) - Normal operations, default states Green (Success): #10b981 (stroke: #059669) - Completion, successful operations Yellow (Warning): #f59e0b (stroke: #d97706) - Warnings, pending states, decisions Red (Error): #ef4444 (stroke: #dc2626) - Errors, failures, critical paths Purple (Special): #8b5cf6 (stroke: #7c3aed) - Special states, optional items Cyan (Info): #06b6d4 (stroke: #0891b2) - Informational items, metadata ``` ### Neutral Colors ``` Light Gray: #e5e7eb (stroke: #6b7280, text: #1f2937) - Inputs, light backgrounds Medium Gray: #6b7280 (stroke: #374151, text: #ffffff) - Neutral states Dark Gray: #374151 (stroke: #1f2937, text: #ffffff) - Alternative backgrounds ``` ### Forbidden Co