Architecture Diagrams

This section documents the key architectural diagrams for the AAC system. These diagrams provide both a structural and conceptual view of how the frontend and domain model are organized.

AAC Application – Frontend Architecture

This diagram illustrates the Vue-based frontend architecture of the AAC system. State is managed through a custom stateService.js module, UI components compose the AACBoard, and service layers abstract speech synthesis and offline persistence. The SpeechService implements the Strategy pattern to allow dynamic selection between different speech engines (for example, the browser SpeechSynthesis API, ResponsiveVoice, configurable external speech services, and ElevenLabs as a planned integration).

This layered structure improves separation of concerns by keeping presentation logic, state management, and infrastructure services decoupled from one another.

AAC System – Domain Model Class Diagram

This diagram represents the core domain entities of the AAC system. A User owns multiple Board objects, each Board contains multiple Tile objects, and Tile instances may link to other Board instances to form a navigational hierarchy.

UsageLog entities track interaction history for analytics and potential adaptive features. Together, these classes define the core data model and relationships that drive application behavior.

---