This modular interconnected language (MIL) editor was created by a team of 10 undergraduate software engineers in a 3 week period during the Spring 2015 semester. It is designed to be a graphical frontend to take a complicated set of systems, and bring them into one, easy to understand, layout. This set of systems, represented by various graphs and subgraphs, allows for developers to run/compile their multiple linked programs and see, in real time, what is occuring. Our final product this semester allows for our client, Professor Purilo, to reach that level of interconnectedness and comprehension. Though we were not able to connect the API which brings that functionality to life, we were able to build it out in a manner that would allow for the connection of a systems' API to be easily integrated.


  • Front end graph representation of a system
  • Systems' graph is able to be imported or exported in a set XML diagram structure
  • Saving of systems' graphs to specific users
  • Run and Compile buttons implemented for future API integration
  • Nested graphs for making complex systems more understandable
  • Attribute based nodes to permit the use of ambiguous programming languages. As well as the ability to add flags at compile time.
  • Ability to represent nodes, connected nodes, and heirarchical node structures.
  • Ascend and descend in a graph's heirarchy.
  • Add attributes dynamically after node creation.
  • Edit preexisting nodes and their attributes.
  • All of these features included in an intuitive, and minimalistic, front end GUI
  • The majority of these features can be accessed through a terminal underneathe the GUI

GUI Explanation

  • A.) File Dropdown. Contains graph controls.
    • New. Create a new graph.
    • Open. Open an existing graph.
    • Save. Save current graph.
  • B.) Edit Dropdown.
    • Import XML. Upload a graph which contains the proper XML structure.
    • Export XML. Exports the current graph in XML format.
  • C.) GUI Tool Bar. Contains all GUI controls via clickable icons.
    • 1.) Create a node.
    • 2.) Delete a node.
    • 3.) Create edge between nodes.
    • 4.) Create parent-child relationship between nodes.
    • 5.) Save graph.
    • 6.) Add an attribute to a node.
    • 7.) Remove an attribute from a node.
    • 8.) Ascend a graph level (if possible).
    • 9.) Descend a graph level (if a node contains inner graph).
  • D.) Console command line interpreter. Allows for manipulation of the graph via a text-based interpreter.
  • E.) Graph canvas. Contains the system graphs, edges, and subgraphs for display.
  • F.) API Control Panel. A place holder for system API related command buttons when it is connected.

Terminal API

  • string -> any string of word characters “A-Z” “a-z” “0-9” or “_”. Cannot begin with a numeral. Is not contained between “ ”.
  • number -> any positive number, integer or floating point number
  • pair -> a collection of two numbers represented in code between two parenthesis, separated by a comma
  • list -> a collection of sequential infinite amount of numbers represented in code between two square brackets, separated by commas
  • key-value -> string keys mapped to number or string values represented in code by key “:” value
  • hash -> a collection of key-values represented in code between two curly brackets separated by commas.
  • node create name(string) location(pair) [ children(list) attributes(hash) ]
  • node delete id(number)
  • node replace name id(number) name(string)
  • node replace location id(number) location(pair)
  • node replace children id(number) children(list)
  • node replace attributes id(number) attributes(hash)
  • node add children id(number) id(number)
  • node add attribute id(number) attribute(key-value)
  • node print id(number)
  • link create id1(number) id2(number)
  • link delete id1(number) id2(number)
  • print nodes
  • print links id(number)
  • descend id(number)
  • ascend
  • file export
  • file import
  • file new
  • file save
  • file open id(string)

Built With

  • Node.js using the Node Express web app framework
  • Backbone.js
  • Built with Grunt
  • GUI built using D3.js
  • Terminal interpreter and parser built using Jison
  • Font Awesome CSS toolkit for icon designs
  • University of Maryland's CAS Authentication API
  • MySQL


(Placeholder space for future resources and documentation such as readmes and API assistance)