department-of-veterans-affairs/mermaid-charts
.claude/skills/mermaid-charts/SKILL.md
Creates and standardizes Mermaid decision flowcharts in VA Design System documentation, including templates, node types, accessibility alternatives, and the standard Jekyll include pattern.
$ install --global
skillsauthnpx skillsauth add department-of-veterans-affairs/vets-design-system-documentation mermaid-chartsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 4, 2026, 5:11 PM6.0s1 file scanned
SKILL.md
- name:
- mermaid-charts
- description:
- Creates and standardizes Mermaid decision flowcharts in VA Design System documentation, including templates, node types, accessibility alternatives, and the standard Jekyll include pattern.
SKILL: Mermaid Chart Implementation
Overview
This skill enables efficient creation and standardization of Mermaid decision flowcharts in the VA Design System documentation following established patterns and best practices.
When to use this skill
- Creating new decision flowcharts for component or pattern guidance
- Converting existing text-based guidance into visual flowcharts
- Updating existing Mermaid charts to follow current standards
- Implementing charts that help users make decisions about design system usage
Key files and resources
/docs/ai-mermaid-implementation-guide.md- Complete AI implementation guide/docs/mermaid-chart-templates.md- Ready-to-use templates for common patterns/docs/mermaid-node-types.md- Standardized node types and styling reference/docs/mermaid-chart-data-driven.md- JSON-based approach for complex charts/src/assets/stylesheets/application.scss- Chart styling (lines 145-230)
Quick implementation checklist
- Choose appropriate template based on decision structure
- Replace template variables with specific content
- Use correct width class (.mermaid-width or .mermaid-width-wide)
- Apply standardized node types (:::node-start, :::node-question, etc.)
- Add specific details to answer nodes without "Example:" labels
- Ensure all primary text uses
<b>tags - Merge duplicate result outcomes
- Include screen reader alternative text
- Add text-based decision list using va-details component
- Test build locally
Standard pattern
<div class="mermaid-width-wide">
{% include mermaid-chart.html
id="unique-chart-id"
caption="Descriptive caption for accessibility"
chart="
flowchart TD
Start[\"<b>Main question</b>\"]:::node-start --> Decision{\"<b>Decision point?</b>\"}:::node-question
Decision --> Option1([\"<b>Option 1</b><br/>Examples:<br/>Example A, Example B\"]):::node-answer-primary
Decision --> Option2([\"<b>Option 2</b><br/>Examples:<br/>Example C, Example D\"]):::node-answer-secondary
Option1 --> Result1[\"<b>Outcome A</b><br/>Additional details\"]:::node-result-button
Option2 --> Result2[\"<b>Outcome B</b><br/>Additional details\"]:::node-result-link
" %}
</div>
<va-details label="View text-based decision list for [topic]" id="chart-id-decision-list">
<h4>Main question</h4>
<ul>
<li><strong>Decision point?</strong>
<ul>
<li><strong>Option 1</strong> (Example A, Example B) → <strong>Outcome A</strong></li>
<li><strong>Option 2</strong> (Example C, Example D) → <strong>Outcome B</strong></li>
</ul>
</li>
</ul>
</va-details>
Templates available
- Simple Binary Decision: For yes/no decisions with two clear outcomes
- Platform-Specific Decision Tree: For different web vs mobile app behavior
- Multi-Step Sequential Decision: For multiple decision points in sequence
Success criteria
- Chart renders correctly without errors
- All nodes use appropriate styling classes
- Decision flow is logical and easy to follow
- Specific details make options concrete and clear
- Screen reader users can understand the decision process
- Chart width is appropriate for content complexity
- Text-based alternative provided using va-details component
- Text alternative exactly matches visual chart (same paths, questions, details, outcomes, capitalization)
- No unnecessary "Example:" labels cluttering the design
Related Skills
department-of-veterans-affairs/writing-vads-guidance
documentation
VerifiedTrustedCommunity
Use when making documentation changes in the doc-queue workflow, writing new component/pattern/template guidance, or updating existing VADS documentation - ensures compliance with VADS templates and style standards
75SKILL.mdUpdated Apr 4, 2026
department-of-veterans-affairs/merge-approved-prs
testing
VerifiedTrustedCommunity
Use when the user wants to merge all PRs they have approved - updates each branch from main, waits for CI checks to pass, merges, then summarizes results
75SKILL.mdUpdated Apr 4, 2026
department-of-veterans-affairs/guidance-grooming
documentation
VerifiedTrustedCommunity
Use after selecting a documentation issue from the doc-queue to groom it - analyzes the issue, identifies gaps, prompts the designer for clarity, and posts a structured grooming comment so the issue is ready for the writing-vads-guidance skill or an async agent
75SKILL.mdUpdated Apr 4, 2026
department-of-veterans-affairs/doc-queue
documentation
VerifiedTrustedCommunity
Use when a designer asks to work on guidance or documentation issues, process documentation queue, or close out doc tickets - fetches oldest issue from quarterly epic and guides through resolution
75SKILL.mdUpdated Apr 4, 2026