drichard/mindmaps

An open source, offline capable, mind mapping application leveraging HTML5 technologies

PSA: This project is not actively maintained. I consider it feature complete for what it set out to do. I'll fix critical bugs should they pop up but I won't be adding new features.

mindmaps

mindmaps is a HTML5 based mind mapping application. It lets you create neat looking mind maps in the browser.

This project started in 2011 as an exploration into what's possible to do in browsers using modern APIs. Nowadays, most of this stuff is pretty common and the code base is a bit outdated. This was way before React, ES6, webpack. Heck, it doesn't even use Backbone.

However, there is no reason to change any of that and it makes the code base quite easy to grok. There is no compilation step, no babel plugins, no frameworks. Just a JavaScript application and a very simple Model-View-Presenter pattern.

HTML5 stuff which was cool in 2011

• 100% offline capable via ApplicationCache
• Stores mind maps in LocalStorage
• FileReader API reads stored mind maps from the hard drive
• Canvas API draws the mind map

Try it out

The latest stable build is hosted here.

Build

• First run npm install to install required dependencies
• Run npm run start to launch a local dev server. The app will be hosted at http://localhost:3000.
• Run npm run build to compile the production bundle. The artifacts will be located in /dist.

Host yourself

All you need is a web server for static files. After building, copy all files from /dist into your web directory and launch the app with index.html. Make sure your web server serves .appcache files with the mime type text/cache-manifest for the application to be accessible offline.

In Apache add the following line to your .htaccess:

AddType text/cache-manifest .appcache

In nginx add this to conf/mime.types:

text/cache-manifest appcache; 

Alternatively, you can launch a local debug server with npm start which starts a server on localhost:8080.

License

mindmaps is licensed under AGPL V3, see LICENSE for more information.

mindmaps's Issues

Can i take this source code and use it for commercial application

Hello Richard,

Can i take this source code and modify and use it for commercial purpose. Can i buy this source code and use it for my commercial purpose, please let me know.

Save to mysql database.

Hi,

I was wondering whether it is possible to save the data of the mindmap in a mysql database.
Also is it possible to directly export the image rather than having to right click and then save it.

Thanks a lot and keep up the good work.

OwnCloud app

Hi, I like your idea of a mind mapping app very much, since I do work with mind maps in every day projects.
However, i love to see it as an Owncloud app as well or tightly integrated. Any possibility of achievement?
https://apps.owncloud.com/i
regards, hitam4450

load Json to view Json as a mindmap

Hi Richard
what would you think of a loader entry point , apply action or transformations
if such a thing exists I'd be well motivated to write up the process to load a json file
the same for export as Json
I see it as a 2 way tool to read and write json
I beleive this could come in really handy to many developpers nowadays
Cheers
Tibor

Element out of canvas limits

Hello:

I've moved an element and now I can't access it because it is out of the canvas limits. I can view it if I export the diagram to an image.

Can not select multiple nodes

Hi, I really love your application.

Its very nice and simple to use. But one feature might needs to be their to select multiple nodes and apply inspector action to them at one time.

May be this feature will make this application more productive.

Thanks,
Amit

delete

install on windows, npm install run fine but no /bin folder ?

Hi
I followed the steps
npm install run fine but no /bin folder ?
maybe the run the jake file was unclear , what exactly should be run ?
is there a specific windows process for generating the static files
Thanks for this great project
Regards

https://github.com/drichard/mindmaps/archive/master.zip link does not work

Some custom modifications

Hello Richard, i tried to find an email to you. But i did not see any contact information.

I want to do some custom modifications to this mindmap and i was wondering if you are available for freelancing ?

In that case please send me an email to: [email protected]

Best Regards
Marten

Support iPad in the future?

The event might be modified in order to support dragging fingers on the iPad~
I love your work!

delete

Google Drive

This might provide a good workaround for the inability to save to file on a local app (Google Chrome app)? It would be fantastic if I can just save direct to my Google Drive and perhaps collaborate however I admit I have no idea of how much work this would be though!

This is one of the most simple mindmap app I've ever used, and so easy to use too. Fantastic work, the only thing that's a small annoyance is that it's a bit of a workaround to share mindmap files.

Nested nodes with relationships

Would love to see the ability to drag and drop a node, "some node," from underneath a "child a" onto "child b," and have the relationship change per the move so "child b" would be the new parent of "some node." Also, graphically, the moved node should drop underneath its new parent. Currently, what happens if you drop a node on top of another, is that it just visually combines the 2- you see one on top the other and it's hard to make them out. I see nesting behavior with drag drop movement in some other mind mapping apps, however, this particular library has the distinct advantage of being JSON exportable and can run on our own servers, so I would like to see it here.

Load JSON from PHP-File on startup

Hello,

on my Server I had a PHP-File wich sends the JSON of a mind map.
Is there a way to load the JSON automaticly on start?

I add this code at the bottom of the index.html, but it doesn't work.

<script type="text/javascript">
    $.ajax(
    {           
        url : './json.php',
        type : 'post',
        data : { action : 'load' },
        dataType : 'json',
        success : function(data)
        { 
    doc = mindmaps.Document.fromObject(data);
        mindmapModel.setDocument(data);                         
        }
    });

</script>

Has someone an idea?

oc6 support?

this app are great.. there's any tip how to support the owncloud 6...

i have only one deploy of oc7 and the oders nodes of cluster have many usres and data sync between nodes to made upgrades to oc7.. also yi cannot update the php version (oc 7 needs now php > 5.3.8 and i uses 5.3.3 with patched security fixed or lower due performance issues)

Text Alignment?

I don't think this is necessary, since this framework is already great, it just would be nice to set the text to be either left, center, or right aligned.

Maybe even a (un)sorted list as well? Sometimes a node leads to a list.

Thanks

la svolta

What is the best way i can contribute code? (added linking ability to nodes)

Hi, it's me again.
I have kept working on adding features, though i am sure they are far from 'pretty'. What is the best way to share this code? Can i send them to you ? Or is it best to just paste it here so others can add it to their MindMap files?
I find myself using your mindmap tool for organizing projects, brainstorming, bookmarking and organizing my files and urls!!! It has changed my life!!!!

I have made the Saving to file from pendrive "pretty" (i cannot execute a portable broswer in several of the systems i use). I have also added export options that create a summary of the map: you can create an html with the children node as headers, then each child node is a bulleted line where the color of the bullet is the same as the line color, and the text characteristics are preserved. You can export the full tree or only the shown branches (great for creating presentations!!).
I have also added a linking function (i piggybacked it on the clipboard functions): if u press 'x', it opens up the url in another tab else if it is a file (starts with 'file:') it tries to open the file, like when u click on a pdf link. I might add later more/better filters for file extensions....

Right now i am looking to add encryption to the text in the nodes (under the save functions i added). That way i can protect my project files.... Anyone have any interest to help?

Node relationship

I really like your app; in its simplicity there is a lot, but I'm wondering if in a new release there will be the possibility to draw a relationship between two nodes (and may be to add a note/icon!!!)

Luca

adding a node programmatically (socket.io)

@drichard - with your help i got my node server to successfully listen for events and broadcast a response to all other connected maps, on receiving a node created event from the server, im trying to reconstitute that node on the connected users maps, combing through the source i found the following functions:

mindmaps.MindMap.addNode()
mindmaps.MindMapModel.createNode()
mindmaps.NodeMap.add()

i've tried calling each of these and passing in the created node, but the new node is not drawn on the connected maps, my console logs show that i am passing a valid node object to all the connected users, it is simply not being added to their maps...what am i missing here?

Licensing

The License used for the software is changed AGPL 3. It is a problem for some of us who plan to use the software internally or for commercial purposes. It would be great if you could dual license it or License it with some other more a "liberal" License.

load content

is there any way to open a mid map the first time it opens and not use the "princial Idea" Node

Call function from parent?

Hi,

i load the mindmap in an iframe. in the main page i want to use a function from the mindmap with a button

$j('#save').live("click", function ()
{
var iframe = document.getElementById("frame");
iframe.contentWindow.mindmaps.MindMapModel.saveToLocalStorage();
});

but it does not work. In Chrome i get the error "Uncaught TypeError: Object function (eventBus, commandRegistry, undoController)...."

Any idea?

Save to file workaround...

Hi, I was able to get a workaround for saving the mindmaps to file while in DEBUG mode ( the offline /nonWeb version).
In file js/Sotrage.js change :

saveDocument : function(doc) {
try {
localStorage.setItem(prefix + doc.id, doc.serialize());
return true;
}

to:

saveDocument : function(doc) {
try {
localStorage.setItem(prefix + doc.id, doc.serialize());
alert('Downloading mindmap to file:' +view.fileNameRequested()+' .json ');
uriContent = "data:application/octet-stream," + encodeURIComponent(doc.serialize());
newWindow=window.open(uriContent, ' ');

    return true;
  }

---

When u press the button to save to local storage, it will show an alert with the file name (you must copy this) and then a file dialog window for saving the file. Here u must paste the name or add your own because by default it puts a random name with a .part extension.

The disadvantage is that it works with the save to local storage button. Can someone figure out how to make it work with the save to file button?
Maybe JGJones can adapt this to make it save to Google Docs or any other online storage!

Hopes this helps anyone who wants to make it portable.
Thanks again Dave for the app!!!

Steven

A fantastic widget for iBooks Author !!!

I haven't seen notes about an iBooks Author widget in the issue list, but it seems to me that your MindMaps has almost everything to be used as a autonomous widget which could be dropped into an iPad-specific .ibooks file. I'd like to help you do it, but I don't know enough about programming iBooks-compatible widgets yet. I've explored some of them and they're essentially made of HTML5, CSS and .js files.
What your Mindmaps does is much superior to the one developed by ibook-widgets (see: http://www.ibook-widgets.com/tour and scroll down to MindMap)
Well, maybe someone else could help you...
Charles Camirand (ccamirand "at" gmail.com)

delete

Links in node

Dave, your app is awesome! Simple and totally portable (i have to use linux and windows machines alot). I have it as part of my pendrive office, along with other html5 tools (as svgedit).
One question: will a future release include the ability to add hyperlinks to a node? For example, a button on the Inspector panel would open a file dialog window to link to a local file, or else to a website. Another possibility is to link to another mindmap on the local storage or file.
Thanks for the great work!
Steven

Translate MindMaps

Hello,

First thanks for development, I want to copy the git and to make a translation in Spanish, what would be the best way?

Looking for strings and replace them? Or create a call to a file where the strings to concentrate?

Thank you

Connect two nodes with a third node

Hello!
I really like the application, but I think it would be much better, if instead of only tree topology, every topology would be permitted. For example:
I have A and B topic, and some in information(C), that is relevant to both topics. At the moment the only way to do this is to do this:
A B
| |
C C
In my opinion, It would be better this way:
A B
\ /
C
Are you planning to do this feature? If no, why? Thanks for your answer.
Edit:
Sorry, I didn't pay enough attention to the earlier issues.This can be closed as duplicate of #10

Database?

How about an option to save to a local database, maybe PHP?

-PS-
I have tried implementing this myself, but I can't seem to load the serialized data back because of the mindmapmodel. I have it saving and listing the minmaps saved... how do I load a mindmap? If I wanted to hard code a basic mindmap object to load how could this be done? This might help me figure out how to load my saved data.

Thanks

open another json in mindmap

Hi,

Is there a wrapper to fit any json into a structure that can be opened here. As seen from a saved mindmap, it has more info elements in json than just what appears in the file. Example

{"id":"18ffca21-ec69-4add-8910-f677bad71973","title":"Central Idea","mindmap":{"root":{"id":"252f573a-69fe-4322-8bc1-0900391bbb31","parentId":null,"text":{"caption":"Central Idea","font":{"style":"normal","weight":"bold","decoration":"none","size":20,"color":"#000000"}},"offset":{"x":0,"y":0},"foldChildren":false,"branchColor":"#000000","children":[{"id":"8128c30a-1d3c-4d31-a3e0-cfb9933a90a7","parentId":"252f573a-69fe-4322-8bc1-0900391bbb31","text":{"caption":"test","font":{"style":"normal","weight":"normal","decoration":"none","size":15,"color":"#000000"}},"offset":{"x":-79,"y":-258},"foldChildren":false,"branchColor":"#0e6fe6","children":[]},{"id":"055d9bbe-96de-4b08-9179-8babb6f74726","parentId":"252f573a-69fe-4322-8bc1-0900391bbb31","text":{"caption":"result","font":{"style":"normal","weight":"normal","decoration":"none","size":15,"color":"#000000"}},"offset":{"x":61,"y":358},"foldChildren":false,"branchColor":"#ffbc9d","children":[]}]}},"dates":{"created":1441948237286,"modified":1441948450987},"dimensions":{"x":4000,"y":2000},"autosave":false}

If my json file does not have an id ( like the one above ) it will not open. Error

"File is not a valid mindmap"

How is it possible to open any json here. ❓

Edit : does there exists an api that will help edit any json file to fit into here . How to use this api, if it exists ?

Not working with jQuery 1.80

Hello,

I have update the two Javascript Files jquery-1.8.0.min.js and jquery-ui-1.8.22.custom.min.js
There are no Javascript-Errors but I can't create a Node with my mouse.

Some idea?

Allow Running in jQuery noConflict Mode

First of all its a wonderful work.

It would be great if you could modify bits of the code so that it runs in jQuery noConflict mode to improve interoperability. I saw parts of the code where in the global namespace we have "$" variable which does not allow the app to run smoothly in noConflict Mode.

It would be great if you could replace all occurrences of "$." and "$(" with "jQuery." and "jQuery(" and commit it to the master branch which would enable running the app in noConflict mode.

Thanks in Advance.

Collaboration, Freemind compatibility -> planned features?

Great work, looks really neat!

I was wondering if you consider adding these features or if you would accept code in this direction?

Capture backspace event so that deleting a node doesn't go back in history

STR:

create a node
select the node
hit the delete key on a mac running os x lion and chrome 16.0.912

expected:
node is deleted

actual:
browser goes back in history, and all unsaved state is lost.

Mindmap unable to support on IE

Hi,

Thanks for sharing such a wonderful mindmap. The mindmap is unable to support for IE but able to be supported by chrome & firefox.
I am unable to troubleshoot what is the error?

file location: storage.js
SCRIPT5007: Unable to get value of the property 'getItem': object is null or undefined
script.js, line 463 character 116

return localStorage.getItem(key);

I not sure whether did u encounter the same problem as me.
Please save me

Regards
Jian Zhang

Concept mapping tool

First, really awesome project! Next, I wanted to get your thoughts on using this as a 'concept mapping' tool [1]. Concept mapping is very similar to mind mapping; however, 'linking phrases' are used to join concepts together. In the words of wiki, "A well-made concept map grows within a context frame defined by an explicit "focus question", while a mind map often has only branches radiating out from a central picture". Important note: concept maps do not follow a 'tree' structure but are more generically a graph.

Screenshot of an example concept map in [2].

I believe concept mapping would be very possible with just a few small(ish) tweaks. Thoughts?

[1] http://en.wikipedia.org/wiki/Concept_map
[2] http://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Conceptmap.gif/450px-Conceptmap.gif

Load mindmap from local JSON file on startup

Hi!
I have been trying to get my local (debug mode) mindmaps in Firefox to load a map at startup from a local mindmap file (in the same directory as index.html).

I tried apollon0815's code right before closing body in index.html with no success:

<script type="text/javascript">
 $.ajax(`
 {           
    url : 'deaultMap.json',
    type : 'post',
    data : { action : 'load' },
    dataType : 'json',
    success : function(data)
    { 
    alert( data.id );  //json loads just fine
    doc = mindmaps.Document.fromJSON(data);
    mindmapModel.setDocument(data);                         
    }
}); 
</script>

I have also tried:

$.getJSON('deaultMap.json', function(data){
     alert( data.id ); //json loads just fine
  doc = mindmaps.Document.fromJSON(data);
     mindmapModel.setDocument(data);    
});

Also called both mindmaps.Document.fromObject(data) and mindmaps.Document.fromJSON(data) with no results.

Can anyone point me in the right direction? Thanks !

Saving to file on debug mode....

Does anyone have a solution to activating saving to file with "To File - Save" button on debug mode?
Thanks.

Save to file doesn't work

While the "Local Storage - Save" button works fine, pressing the "To File - Save" button doesn't have any effect.

Using the Chrome developer tools, I've seen that this button has an object inside:

<object type="application/x-shockwave-flash" id="downloadify_1330502003324" name="downloadify_1330502003324" data="media/downloadify.swf" width="65" height="29" style="visibility: visible; ">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<param name="flashvars" value="queue_name=downloadify_1330502003324&amp;width=65&amp;height=29&amp;downloadImage=img/transparent.png">
</object>

Do I need an external plugin or something else?

Building with jake fails

# mkdir build
# cd build/
# jake
path.existsSync is now called `fs.existsSync`.
Creating new directory structure
Extracting script file names from index.html
Minifying and concatting scripts.
> Skipping: js/libs/jquery-ui-1.8.11.custom.min.js is already minified.
jake aborted.
TypeError: Cannot call method 'parse' of undefined
    at /usr/local/lib/node_modules/mindmaps/Jakefile.js:70:23
(See full trace by running task with --trace)
root@......:/usr/local/lib/node_modules/mindmaps/build# jake --trace
path.existsSync is now called `fs.existsSync`.
Deleting old bin directory
Creating new directory structure
Extracting script file names from index.html
Minifying and concatting scripts.
> Skipping: js/libs/jquery-ui-1.8.11.custom.min.js is already minified.
jake aborted.
TypeError: Cannot call method 'parse' of undefined
    at /usr/local/lib/node_modules/mindmaps/Jakefile.js:70:23
    at Array.forEach (native)
    at minifyScripts (/usr/local/lib/node_modules/mindmaps/Jakefile.js:61:17)
    at null.action (/usr/local/lib/node_modules/mindmaps/Jakefile.js:35:3)
    at TaskBase.run (/usr/local/lib/node_modules/jake/lib/task/task.js:207:21)
    at TaskBase.runPrereqs (/usr/local/lib/node_modules/jake/lib/task/task.js:117:12)
    at TaskBase.invoke (/usr/local/lib/node_modules/jake/lib/task/task.js:97:10)
    at TaskBase.nextPrereq (/usr/local/lib/node_modules/jake/lib/task/task.js:164:21)
    at TaskBase.runPrereqs (/usr/local/lib/node_modules/jake/lib/task/task.js:114:12)
    at TaskBase.invoke (/usr/local/lib/node_modules/jake/lib/task/task.js:97:10)

Unable to create the binaries.
node.js 0.8.17

trying to wrap my head around event broadcasting for a socket.io implementation

any light to shine on how one would respond to the events triggered by the app and emit them to the server?

How to export mindmaps to HTML

Hi All,
I have tried this mindmaps tool it was nice.

I want to export mindmaps as HTML file, How to do that?

I want to export mindmap output to support HTML5 and jQuery..

Thanks,

"Save to file" doesn't work?

There is no response when I click the "Save to file" button.

Is that a bug?

Mindmap not visible after resize

I call Mindmap from an small iframe, that can resize via jquery.

On Chrome it works very well.
On firefox the mindmap is not visible after resize.
I must search on the map or must use the navigator to see it. (position is the left upper Corner of Map)

It there a workaround???

Simple code for testing:

http://jsfiddle.net/EerKL/embedded/result/

I think in MainViewController.js

$(window).resize(function() {
self.setSize();
});

must be a function that center the mindmap.
But i do not know how to do?

Can't view mindmap after print

After I print my mindmap in Google Chrome, the mindmap is invisible.
Just when I use the Navigator I can see it again.

Request feature - ))) Add links, files, screenshots to ideas

and videos, for example adding youtube link

Thanks

Licensing Again and COntribution

Hi, we are using this mind-map as a library in a commercial learning management system. Its not yet available to users due to the licensing AGPL issue

We have made some changes to the code to simplify
a. saving data to database.
b. saving as image.

Before we open this to users can we get confirmation that for AGPL, we should share the changes we make to the library as a Fork here?

use remoteStorage.js to enable people to save & sync their mindmaps online

remoteStorage.js is a client-side library to add remoteStorage support to your client-side app. There is a tutorial for example usage and more info in the readme of the repository.

Basically, remoteStorage is an open standard to decouple web apps from per-user data storage – whereas at the moment, most web apps are an app+storage package deal. Check the website of the unhosted movement for more info, and feel free to join our chat room if you have questions.

Since Mindmaps is client-side, it would be really fitting to use remoteStorage for user data management (whereas now it’s only possible to use localStorage or saving to file).