Mermaid Charts

Quick implementation checklist

1. Choose appropriate template based on decision structure
2. Replace template variables with specific content
3. Use correct width class (.mermaid-width or .mermaid-width-wide)
4. Apply standardized node types (:::node-start, :::node-question, etc.)
5. Add specific details to answer nodes without "Example:" labels
6. Ensure all primary text uses <b> tags
7. Merge duplicate result outcomes
8. Include screen reader alternative text
9. Add text-based decision list using va-details component
10. 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 design40:["$","$L47",null,{"content":"$48","frontMatter":{"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.","triggers":["mermaid chart","decision flowchart","mermaid diagram","flowchart TD","create a chart","add a chart"]}}]