How does it prevent Mermaid syntax errors?

The skill enforces 'SyntaxSafety' by automatically quoting labels containing spaces or special characters and escaping markdown-specific symbols that often break rendering engines.

Why does this skill discourage linear diagrams?

Linear sequences like A to B to C are more efficiently expressed as numbered lists. This skill ensures diagrams are only used when branches, decisions, or parallel paths make visual representation necessary.

Are the diagrams compatible with dark mode?

Yes. The skill follows strict accessibility requirements, using black text on light backgrounds and semantic palettes that ensure visibility and 3:1 contrast across different theme settings.

What types of diagrams can this skill create?

It supports a wide range of types including Flowcharts, Sequence diagrams, State diagrams, ER diagrams, Class diagrams, Gantt charts, Mindmaps, and Sankey diagrams.

Mermaid Diagram Architect

Name: Mermaid Diagram Architect
Author: stueeey

bystueeey

0•

Learning & Documentation

Generates meaningful, accessible Mermaid diagrams for markdown documentation while enforcing best practices for clarity and syntax.

The Mermaid Diagram Architect skill optimizes how Claude creates visual representations by prioritizing information density and technical accuracy. It moves beyond simple generation by enforcing a 'Cardinal Rule' against redundant linear diagrams, ensuring complex syntax is properly quoted to prevent rendering breaks, and mandating accessibility through WCAG AA contrast standards. Whether mapping database schemas, system architectures, or complex workflows, this skill ensures every diagram provides more value than a simple list or table while remaining readable in both light and dark modes.

Key Features

01Automates syntax safety with proper quoting and escaping for special characters.

02Provides a decision framework for 15+ specialized diagram types including ERD, Gantt, and Sankey.

03Implements WCAG AA accessibility standards including 3:1 contrast ratios.

04Enforces high-value diagramming by filtering out redundant linear sequences.

050 GitHub stars

06Injects semantic comments (MEANING, GOTCHA) to improve AI context and human readability.

Use Cases

01Visualizing complex decision logic and branching paths in system documentation.

02Documenting multi-party interactions and API request flows over time.

03Modeling database relationships and entity hierarchies using ER diagrams.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add stueeey/repoql.public mermaid-diagrams

For use in Claude.ai and ChatGPT

Download Skill