sprotty Examples

sprotty is a web-based diagramming framework. For information how to use these examples see Using sprotty.

Without server

  • Circles and lines:
    A basic diagram showing a graph of moveable nodes and edges.
  • Class diagram:
    A basic class diagram using node layouts and hovers.
  • SVG:
    Demonstrates how to use existing SVG figures.
  • Multicore:
    Shows a multi-core chip. The color of the cores changes with the code they execute. If you zoom in, the communication channels between the cores appear.

With server

(requires to run ./gradlew jettyRun in the directory server)
  • Flow with Xtext:
    An editor for an Xtext-based DSL that describes parallel algorithms. Tasks can be ordered and synchronized using barriers. The diagram shows the structure of the algorithm. It is synchronized on model and selection changes. When you walk through the steps of the algorithm, the diagram highlights which tasks are currently active and which ones are finished.
  • Multicore with Xtext:
    The same Xtext-based DSL as before also describes the allocation of the cores of a multicore-chip with tasks and their execution state at a given point in time. The diagram shows the chip with the allocated cores. If you select an active core, the diagram focusses on all cores executing the same task within the same timestep.
  • Multicore and Flow combined:
    A combination of the above.