Visualization Libraries for AaC - DevOps-MBSE/AaC GitHub Wiki

Why diagramming libraries?

Now that visualization of AaC definitions has become a priority (for end-user acceptance) we need an idea of the tools available to us for providing that functionality.

To that end, this is an evaluation of several JavaScript diagramming libraries that we could use to make that available for the AaC VSCode Extension.

Criteria

Following is the criteria on which these libraries will be evaluated.

Criteria Question to answer Scale
Documentation What is the availability of technical documentation available for the specified approach? What is the quality of that documentation? 1-10
Flexibility How much flexibility does the option allow for making changes and adapting to new information when we get feedback from users, etc.? 1-10
Maturity How long has the project been in development? Will we run into issues that arise as a result of the project not having seen much use? 1-10
Complexity How involved will it be to set up something simple (i.e. a "hello world" style application)? Will a junior developer be able to hit the ground running, or will they have to spend days/weeks getting up to speed before being able to be productive? H/M/L/0
License Is the license compatible with the AaC license? Y/N/?

React Diagrams

Documentation Flexibility Maturity Complexity License
5 8 6 L Y
  • Written in TypeScript
  • Specific to React
  • Documentation is still a work in progress
  • Several examples of varying complexity
  • MIT License
  • First release 3 years ago
  • Still actively developed (last merge into master branch on 2022-05-04)
  • CRUD can likely be supported by JS/TS events, etc
  • Interactivity comes out of the box (React)
  • UML diagramming would likely be straightforward to implement once the examples are working, etc

Resources

Eclipse Sprotty/Eclipse GLSP

Documentation Flexibility Maturity Complexity License
8 10 7 9 ?
  • Generic (doesn't depend on any IDE or client)
  • Already has the ability to be integrated into VSCode
  • GLSP is based on LSP
  • Uses web technologies (HTML/CSS/SVG/etc)
  • Several available examples in the glsp-examples repo on GitHub
  • Vanilla JavaScript
  • Seems fairly mature
  • Eclipse Public License v2.0
    • It seems like EPL-2.0 may not be compatible with MIT license – need to check on this

Resources

TLDraw

Documentation Flexibility Maturity Complexity License
4 7 3 5 Y
  • Has a VSCode extension
  • MIT License
  • Actively being worked on
  • Simple
  • Limited examples
  • Limited (possibly outdated) documentation
  • Based on React
  • New project (first commit 2021-05-09)
  • Several releases (most recent release on NPM is from 2022-04-25)
  • Complexity is estimated since I'm not familiar enough with React right now to determine this

Resources