Experiment, text editor integrated with Concept Map

Here it is. An experiment that tries to connect text editor with concept map (which can become a mind map or any other "map" in the future). I'm almost ashamed of quality of map editor... Please be easy about it and the bugs, it's just a prototype.

Mini tutorial

On the left, there is an editable text, on the right a concept map editor. You can select parts of the text, and by clicking on H mark, it will highlight text and create a node on the map (which has a link to the highlighted text).

You can also create nodes, that are not linked to text, by double clicking on the free area. There are also connections between nodes (added using arrow icon, just drag the icon). Nodes itself can be edited (double click or use stacked icon). Node text, background color, text size and notes can be changed in the popup editor.

All the changes are stored in browser local storage, can be exported or imported from a file.

I will try to fix bugs and make small improvements over time, pushing it as is :-)

Here is a tool

Development

It took much longer than I originally planned, but I learned something and will continue building prototypes like this to test different ideas and components of future Notegraph.

Many thanks to authors of excellent js libraries (names as used in npm): d3 for concept map, redux for state management, vue as a view library, medium-editor for the text editor.