Project: Diagram Webapp

For our project, our group decided to make a webapp that would allow the user to easily and quickly diagram and visualize their code before they actually start coding. There are many forms of visualizations such as UML diagrams and graphical SQL schemas but creating these diagrams can be a bit complex with a number of tools so we aimed to simplify this. 

Our design ideas were simple, most tools make you drag buttons and go through multiple dialog boxes to get the information that you want on the screen; we aimed to keep the controls simplistic and allow the user to get all the information out of their head with as little interaction as possible. We went with a simple double click on the grid will spawn a new object or node. When it spawns, it will allow the user to edit the name immediately without any interaction. When a user clicks on an attribute inside an object, you can edit it directly there in the object. Want to add another attribute? Just hit enter while you are adding attributes and it will create another. Made too many? Just click and delete. 

All of this information can also be accessed on the sidebar on the right side. Just click on an object and the information will become available for edit. When you edit the information on the side, the changes are reflected immediately. You can also change the colors and collapse/expand the objects from the sidebar for each object.

Another feature we made available is the ability to add relationships between the object's attributes. Just click on the circle next to an attribute and click on the circle that you want to connect it to. An arrow will be automatically drawn between the objects and will track the object when you move it around the screen. 

Once you are all done with your diagram, you should be able to visualize your thoughts about what you want to code. Right now, you can export SQL code for the diagram you created. Future enhancements will also include XML export and PNG export for direct image conversion. 

Sources:

Github

Voicethread

Public Link

Team: Peter McNeill, Steven Loudermilk, Juan Gonzalez, Keith Council