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
• External .puml via src - Load PlantUML class and C4 context diagrams from external files
• PlantUML Visual Modes: For devs / Simpler - Test mode toggle, stereotype hiding in Simpler mode, and auto legend
• PlantUML Visual Modes: Omgekeerde diamond-notatie (NL) - Test reverse --o en --* notatie met mode toggle en legend

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
• User Story Map Roadmap (TextUSM) - Roadmap map with current features, Domain Stories expansion, online editor, and VS Code live-a11y wish

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!