Learn Sprotty
Ready to create beautiful, interactive diagrams for the web? Welcome to the Sprotty learning journey!
In this hands-on tutorial, you’ll build a complete diagram application from the ground up. By the time you finish, you’ll have created a fully interactive task management diagram and gained the skills to build your own custom diagram applications.
Your finished diagram will feature:
✅ Interactive task nodes with different states (running, finished, waiting)
✅ Dependency connections between tasks
✅ Rich interactions like selection, hover effects, and more
✅ Custom styling to make your diagram visually appealing
This tutorial offers two learning paths:
🚀 Fast Track: Use our Yeoman generator to scaffold a project and focus on understanding the concepts
🛠️ Step-by-Step: Build everything from scratch to deeply understand each component
Follow these steps to create your first Sprotty diagram:
- Getting Started - Set up your development environment
- Data Model - Define the structure of your diagram
- Views - Create custom renderers for your diagram elements
- Dependency Injection - Wire everything together
- Putting It Together - Build and run your diagram application
To get the most out of this tutorial, you should have:
- Basic knowledge of TypeScript and web development
- Node.js and npm installed on your machine
- A code editor of your choice
💡 Pro Tip: Even if you’re new to some of these technologies, the step-by-step instructions make this tutorial accessible to developers of various experience levels.
Ready to dive in? Let’s start by setting up your project environment!