Examples

This section contains live examples that demonstrate the remark-kroki-a11y plugin in action. Each page shows diagrams with their automatically generated accessible descriptions.

The following pie charts show general accessibility support for PlantUML and Mermaid diagram types.

PlantUML A11y Coverage

Mermaid source for "PlantUML A11y Coverage"

pie showData
    title PlantUML A11y Support
    "With A11y support" : 4
    "Planned/None" : 12

Pie chart with title "PlantUML A11y Support" showing 2 segments. With A11y support: 4 (25%) Planned/None: 12 (75%)

Mermaid A11y Coverage

Mermaid source for "Mermaid A11y Coverage"

pie showData
    title Mermaid A11y Support
    "With A11y support" : 2
    "Planned/None" : 13

Pie chart with title "Mermaid A11y Support" showing 2 segments. With A11y support: 2 (13%) Planned/None: 13 (87%)

---

UML Introduction: Red Riding Hood as UML diagrams

• Red Riding Hood as UML diagrams - A gentle introduction to (some) UML diagrams
• Roodkapje in UML diagrammen - Een toegankelijke introductie in (enkele) UML diagrammen
• UML Quiz (Multiple Choice) - Interactive quiz using current component
• UML Quiz (Syntax) - Syntax-based quiz with single, multiple, and open-answer types

Class Diagrams

PlantUML

• PlantUML Class Diagrams (English) - Test class diagrams with English A11y descriptions
• PlantUML Klassendiagrammen (Nederlands) - Test klassendiagrammen met Nederlandse A11y beschrijvingen

Mermaid

• Mermaid Class Diagrams - Test Mermaid class diagrams via Kroki with A11y descriptions
• Mermaid: Kroki vs Theme - Compare server-side (Kroki) vs client-side (@docusaurus/theme-mermaid) rendering

Domain Models

• Domain Models: Larman vs Fowler - Demonstrates analysis-phase vs design-phase domain modeling styles
• Domeinmodellen: Larman vs Fowler - Demonstreert analyse-fase vs ontwerp-fase domeinmodellen

Domain Storytelling

• Domain Stories (PlantUML) - Example of DomainStory-PlantUML notation for stakeholder-friendly process narratives

Sequence Diagrams

• Café Ordering Example - Demonstrates a11yDescriptionOverride for diagrams without automatic parsing

Data Visualizations

• Mermaid Pie Chart - Pie charts with automatically generated accessibility descriptions

---

Meta

This documentation site is itself a test site for the plugin. Every diagram you see here uses remark-kroki-a11y to generate accessible descriptions!