How do I install the Docs Creating Accessible Diagrams skill?

Run npx skillmds@latest add wahidyankf/docs-creating-accessible-diagrams-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Docs Creating Accessible Diagrams safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Docs Creating Accessible Diagrams?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Docs Creating Accessible Diagrams free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Docs Creating Accessible Diagrams?

wahidyankf (@wahidyankf) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Docs Creating Accessible Diagrams by wahidyankf

Name: Docs Creating Accessible Diagrams
Author: wahidyankf

Docs Creating Accessible Diagrams

WCAG-compliant Mermaid diagrams using verified accessible color palette. Use when creating diagrams, flowcharts, or any color-dependent visualizations requiring accessibility compliance for color blindness.

wahidyankf Updated Sep 21, 2026

File contents

Color Accessibility for Diagrams

This Skill provides guidance on creating accessible Mermaid diagrams using a verified color-blind friendly palette that meets WCAG AA standards. Use this when creating visual diagrams to ensure accessibility for all users, including those with color blindness (~300 million people worldwide).

Purpose

Use this Skill when:

Creating Mermaid diagrams, flowcharts, or visualizations
Working with color-dependent visual content
Need to ensure WCAG compliance for diagrams
Supporting users with color blindness (protanopia, deuteranopia, tritanopia)
Choosing colors for documentation, diagrams, or UI components

Color Palette and Colors to Avoid

See Color Palette and Colors to Avoid for the full 8-color verified WCAG AA palette with hex codes and use cases, plus the colors that must never carry information (red, green, yellow, pink, magenta).

Core Accessibility Principles

See Core Accessibility Principles for the four principles — never rely on color alone, use color as enhancement, maintain WCAG AA contrast, and test for color blindness before publishing.

Mermaid Diagram Best Practices

See Mermaid Best Practices for the standard accessible Mermaid template, the ten essential Mermaid rules, comment syntax, and the special-character escaping table for node text and edge labels.

Common Mistakes and Testing Tools

See Common Mistakes and Testing Tools for the six most common accessibility mistakes with fixes, plus color blindness simulators and contrast checkers to verify diagrams before publishing.

Integration with Repository Conventions

This Skill integrates with:

Color Accessibility Convention - Complete color accessibility standards
Diagrams Convention - Mermaid diagram standards, comment syntax, special character escaping
Content Quality Principles - Quality standards for all content including diagrams

Quick Reference

See Quick Reference for the copy-paste palette, the Mermaid classDef template, and the pre-commit accessibility checklist. This also contains the worked Mermaid template referenced by Mermaid Best Practices.

References

Color Accessibility Convention - Complete standards, research citations, WCAG compliance
Diagrams Convention - Mermaid syntax, comment rules, special character escaping
Accessibility First Principle - Foundational accessibility principle

Related Skills

repository-architecture - Understanding how accessibility fits into governance layers
apps-ayokoding-www-developing-content - ayokoding-web diagram requirements
factual-validation-methodology (Phase 2) - Verifying color accessibility claims

Note: This Skill provides action-oriented guidance for creating accessible diagrams. The authoritative Color Accessibility Convention contains complete scientific research, WCAG standards, and detailed testing procedures.

---name: docs-creating-accessible-diagrams-2description: WCAG-compliant Mermaid diagrams using verified accessible color palette. Use when creating diagrams, flowcharts, or any color-dependent visualizations requiring accessibility compliance for color blindness.---# Color Accessibility for DiagramsThis Skill provides guidance on creating accessible Mermaid diagrams using a verified color-blind friendly palette that meets WCAG AA standards. Use this when creating visual diagrams to ensure accessibility for all users, including those with color blindness (~300 million people worldwide).## PurposeUse this Skill when:- Creating Mermaid diagrams, flowcharts, or visualizations- Working with color-dependent visual content- Need to ensure WCAG compliance for diagrams- Supporting users with color blindness (protanopia, deuteranopia, tritanopia)- Choosing colors for documentation, diagrams, or UI components## Color Palette and Colors to AvoidSee [Color Palette and Colors to Avoid](./reference/color-palette-and-avoided-colors.md) for thefull 8-color verified WCAG AA palette with hex codes and use cases, plus the colors that mustnever carry information (red, green, yellow, pink, magenta).## Core Accessibility PrinciplesSee [Core Accessibility Principles](./reference/core-accessibility-principles.md) for the fourprinciples — never rely on color alone, use color as enhancement, maintain WCAG AA contrast, andtest for color blindness before publishing.## Mermaid Diagram Best PracticesSee [Mermaid Best Practices](./reference/mermaid-best-practices.md) for the standard accessibleMermaid template, the ten essential Mermaid rules, comment syntax, and the special-characterescaping table for node text and edge labels.## Common Mistakes and Testing ToolsSee [Common Mistakes and Testing Tools](./reference/common-mistakes-and-testing.md) for the sixmost common accessibility mistakes with fixes, plus color blindness simulators and contrastcheckers to verify diagrams before publishing.## Integration with Repository ConventionsThis Skill integrates with:- **[Color Accessibility Convention](../../../repo-governance/conventions/formatting/color-accessibility.md)** - Complete color accessibility standards- **[Diagrams Convention](../../../repo-governance/conventions/formatting/diagrams.md)** - Mermaid diagram standards, comment syntax, special character escaping- **[Content Quality Principles](../../../repo-governance/conventions/writing/quality.md)** - Quality standards for all content including diagrams## Quick ReferenceSee [Quick Reference](./reference/quick-reference.md) for the copy-paste palette, the Mermaid`classDef` template, and the pre-commit accessibility checklist. This also contains the workedMermaid template referenced by [Mermaid Best Practices](./reference/mermaid-best-practices.md).## References- **[Color Accessibility Convention](../../../repo-governance/conventions/formatting/color-accessibility.md)** - Complete standards, research citations, WCAG compliance- **[Diagrams Convention](../../../repo-governance/conventions/formatting/diagrams.md)** - Mermaid syntax, comment rules, special character escaping- **[Accessibility First Principle](../../../repo-governance/principles/content/accessibility-first.md)** - Foundational accessibility principle## Related Skills- `repository-architecture` - Understanding how accessibility fits into governance layers- `apps-ayokoding-www-developing-content` - ayokoding-web diagram requirements- `factual-validation-methodology` (Phase 2) - Verifying color accessibility claims---**Note**: This Skill provides action-oriented guidance for creating accessible diagrams. The authoritative Color Accessibility Convention contains complete scientific research, WCAG standards, and detailed testing procedures.

Frequently asked questions