Can I use this to replace existing ASCII art in my docs?

Absolutely. The skill is specifically instructed to convert ASCII art on sight into maintainable, professional Mermaid or DOT code blocks.

Does this skill support accessibility standards?

Yes, it automatically includes accTitle and accDescr attributes to ensure all diagrams comply with WCAG AA accessibility standards for screen readers.

What is the Cagle color palette?

It is a standardized set of hex colors used by this skill to provide semantic meaning, such as specific colors for infrastructure, services, data, and security nodes.

Which tool should I use: Mermaid or DOT?

The skill defaults to Mermaid for most documentation and web-native rendering, but switches to DOT/Graphviz for pure network graphs and maximum layout control.

Professional Diagramming

Name: Professional Diagramming
Author: sparkling

bysparkling

0•

학습 및 문서화

Generates accessible, high-quality Mermaid and DOT/Graphviz diagrams with semantic coloring for technical architecture and documentation.

This skill empowers Claude to generate professional-grade visual representations of complex software systems, workflows, and data models. By enforcing the use of Mermaid and DOT/Graphviz over legacy ASCII art, it ensures all diagrams are maintainable, version-controllable, and WCAG AA accessible. The skill includes a specialized 'Cagle' color palette for consistent semantic styling across infrastructure, services, and data layers, making it an essential tool for developers and architects documenting everything from database schemas and API flows to Kubernetes deployments.

주요 기능

01Support for specialized formats including RDF, SHACL, and property graphs

020 GitHub stars

03Semantic 'Cagle' color palette for consistent infrastructure and service visualization

04Advanced ELK layout support for high-density network and architecture graphs

05Automatic conversion of legacy ASCII art into modern Mermaid or DOT formats

06WCAG AA accessibility compliance using mandatory screen-reader metadata

사용 사례

01Mapping complex microservices architecture and service-to-service interactions

02Visualizing CI/CD pipelines, state machines, and project Gantt charts

03Generating ER diagrams and database schemas for technical design documents

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sparkling/claude-config diagramming

For use in Claude.ai and ChatGPT

Download Skill