(Enhancement) Generate UML Diagrams of entire system

design-first / system-designer

A low-code development platform for creating systems 🇺🇦#standwithUkraine

https://designfirst.io/systemdesigner/

Apache License 2.0

933 stars 145 forks source link

(Enhancement) Generate UML Diagrams of entire system #96

Closed kuccello closed 6 years ago

kuccello commented 6 years ago

Since System Designer builds upon UML it would be great to have a way to generate model (and as a stretch sequence) diagrams of a project.

ecarriou commented 6 years ago

When you create a system and export it in JSON format, you have in fact the model of your system described in the schemas and models properties of the JSON file.

What we can do now is to export the model of the system in a XML format that others tools can use. It is that your use case ?

zeeMonkeez commented 6 years ago

Sorry to highjack the issue, but this seems related: is there an easy way to turn models and their dependencies into graphviz graphs? That would be very useful.

ecarriou commented 6 years ago

I do not know a lot about Graphviz, I need to look at the Dot Language. But it seems not quite difficult to generate a graph description of a system. I need to investigate.

Do you have a concrete use case ? It will help me to know what kind of information / graph I need to export.

zeeMonkeez commented 6 years ago

For me, it’d be great to generate graphs as shown here: http://www.agilemodeling.com/artifacts/classDiagram.htm including the class hierarchy

ecarriou commented 6 years ago

Ok, I will think on the best way to display this information.

I think I will add DOT language as export format to get the entire system described as a class hierarchy.

I will then find a way to display the graph in the UI (probably with d3-graphviz). Maybe as a new extension.

ecarriou commented 6 years ago

In System Designer we have now a class diagram viewer, it shows the class diagram of the entire system. To enable it, you have just to click on the new button on the toolbar.

Features:

you can zoom in/out
you can restore the initial size
you can move the diagram with your mouse
a new format Graphviz has been added to the export, so that you can export the class diagram in a DOT language file to edit it on other tools.

This feature is enabled on web / electron (macOS/windows), but will not be enabled on Cordova (iOS/Android) due to the size of the lib used (Viz.js) that will slow down the experience.

Example of class diagram we generate now: