Graph Display Tool
This is a simple tool to display graphs. While it was designed to display graphs of academic materials, it is fully configurable to display and edit any sort of mind map. You just need to create an appropriate "types file".
It was created by Ross Brunton as his Honours Project for Software Engineering and Heriot-Watt University, and is inspired by a similar project from Simon Antuon which used Flash.
Building the project requires nodejs and Python, and building has only been tested on a Linux system. But it can produce a script that has no external dependencies for deploying onto a web server.
mm.js file has been downloaded (from this repo) or produced (see below), it can be used just by adding the following to the head of a HTML document:
And then, anywhere a diagram is needed, code of the following style should be used:
<graph-display editor=editor src='objtest.json' types='acatypes.json'> Text to be displayed if the graph can't be loaded or crashes. </graph-display>
editor=editor part can be ommited, and if it is, then the editor component will be disabled resulting in a readonly diagram.
types are both JSON files. The
src is a diagram file representing the diagram to display (this is what is exported and imported by the editor). The
types file describes what the different types of nodes are, what information they contain and how to display them. One (
acatypes.json) has been distributed with this project, for academic diagrams.
src may be omitted from the editor, in which case an empty document is created.
First, clone the repo where you want the files to live:
git clone https://github.com/RossBrunton/MindMap path/to/destination; cd path/to/destination;
Then, install all the requirements (babel, babel-cli, babel-preset-es2015, babel-polyfill and babel-preset-stage-3):
And then create the final, full file containing all these packages:
Which will produce a file named
mm.js, which can be used when deploying.
To contribute to the project, simply clone the repo and make the environment as above, then set up the code to watch for and automatically compile changes:
Note that any changes to depedencies will need to be updated using a normal
A development server can then be set up thusly:
Then its a simple matter of editing files in
es6 to your heart's content.