Architecture Overview

Sprotty is a diagramming framework that provides a robust foundation for building interactive, web-based diagram editors. At its core, Sprotty follows a clear architectural pattern that ensures maintainability, testability, and extensibility.

The foundation of Sprotty’s architecture is built around three main components that work together in a unidirectional flow:

1. Action Dispatcher: The central hub that receives and processes all diagram operations
2. Command Stack: The state manager that maintains the diagram’s history and current state
3. Viewer: The renderer that transforms the internal model into a visual representation

These components form a cyclic flow of information that prevents feedback loops and ensures predictable behavior.

flowchart TD;
    ActionDispatcher[Action Dispatcher]
    CommandStack[Command Stack]
    Viewer[Viewer]
    ActionDispatcher -->|Command| CommandStack
    CommandStack -->|SModel| Viewer
    Viewer -->|Action| ActionDispatcher

This architecture provides several key benefits:

• Predictable State Management: The unidirectional flow makes it easy to track and debug state changes
• Testability: Each component has a clear responsibility and can be tested in isolation
• Extensibility: New features can be added by extending any of the core components
• Performance: The architecture minimizes unnecessary updates and optimizes rendering

This documentation series will guide you through Sprotty’s architecture in logical steps:

1. Core Components: Deep dive into the three main architectural components
2. Data Flow: Understanding how information moves through the system
3. Extension Points: How to customize and extend Sprotty’s functionality
4. Best Practices: Guidelines for building robust Sprotty applications

Each section builds upon the previous ones, providing a comprehensive understanding of how to build effective diagramming applications with Sprotty.

Start with the Core Components section to understand the fundamental building blocks of Sprotty’s architecture, then progress through each section to build a complete understanding of the framework.