Show HN: An intuitive, offline capable HTML5 mind mapping application | Hacker News Reader

Show HN: An intuitive, offline capable HTML5 mind mapping application

drichard.org

112 pointsdrichard39 comments

As someone who makes extensive use of mind mapping and outlining tools, this is very ho-hum. The keyboard shortcuts are nearly non-existent, which immediately kills it. There is also no control over layout. For small maps the fan-out format is fine but for large maps, you really need a format that looks more like a vertical outline.

For an example of outlining done right, check out http://www.checkvist.com/ (I am not affiliated in any way, other than as a customer.)

+1 for linking to (new to me) checkvist. Keyboard shortcuts done extremely right.

Is there any kind of demo or do you have to register to even get a glimpse of this thing? Also looks like it has nothing to do with mind-mapping.

this list has died for me when i opened it, it asks for my email. unlike checkvist, this mind map is instantly working, fast solution.

I am currently using FreeMind [1]. I love the idea of exporting the mind maps to HTML. Here are some of my mind maps [2] --

[1] http://freemind.sourceforge.net/

[2] http://www.vaibhavbajpai.com/mindmaps.html

I'm a big fan and user of mind maps and I like what you have created.

But there is one thing missing - unless I missed it:

Keyboard shortcuts to create sibling and childnodes from any given currently selected node.

The reasoning is that mind-mapping happens fast and I've refused any tool that would need me use my mouse instead of just 'throwing' nodes out there.

Please note that this was the one capability that made me not use most of the desktop apps out there and also had me pay for a license of novamind without asking twice.

Also, but this is to me secondary, the ability to make edges between random nodes can be of great benefit as well. Again, see novamind for their implementation.

Other than that, congratulations to your application!

PS: Novamind's shortcuts are easy, too:

If you have a node selected and

* hit <TAB> it creates and preselects a new child node. * hit <SHIFT><TAB> it creates and preselects a new sibling node.

Good feedback, thanks!

The shortcuts TAB and SHIFT+TAB make total sense (Why didn't I think of this?). Will push an update tomorrow with those features added.

Never call anything "intuitive". Chances are overwhelming that it isn't for the majority of people.

For the programmer himself, even a "change into meta-workflow-hyper-mode" may seem intuitive, but for someone who never has used a computer, even the moving and clicking of a mouse is _not_ intuitive.

"Intuitive" is a completely subjective concept. A reviewer or user may say "this feels intutive to me", but the programmer or designer cannot sensibly use that word in any stronger way than "I hope that it feels intutive for a large part of my intended audience."

You could say that about almost every adjective. Your logic seems to imply that no one should ever dare hold an opinion or make an assertion.

No. While there always is a difference between someone claiming a certain property of a thing and that thing actually having that property, some properties are easily verifiable but others are not. For example, "offline capable" is easily verifiable.

For "intuitive" on the other hand, even the meaning of the word is not clear. I think that it means "aligns well with one's previous experiences". That, however, means that it is idiotic to say that "this UI is intuitive", just as it is idiotic to say that "this line is orthogonal"---you have to specify _to_what_ that line is orthogonal, and _to_whom_ the UI is intuitive.

Great UI ... will play with this more.

One thing - if I have entered some text and then click somewhere else it should save the text that have I changed instead of reverting back.

The UI on this is lovely.

What is keeping my office from switching to this is sharing ability. Instead of a file base system, consider having it work like google spreadsheets where I can create a link, specify if it read only or editable, and share it around.

A nit pick. Your directions are well written and awesome, but when I create new items, please slide them down so they don't cover my ideas.

I would second "cloud based" (cringe) saving and sharing. Whilst I'm personally not bothered about collaboration, I would love to be able to work on maps across multiple computers (with no Dropbox for local storage).

It's a dream to use, congrats on putting something so impressive together.

Thank you very much!

Saving maps online, sharing and collaboration is definitely something I'd like to add in the future.

But if I want to keep the offline editing capability (and I really do) these features are not trivial to implement. Synchronization and conflict resolution hell awaits...

Quick few points

* Using scroll for zoom in a 2d workspace probably makes sense with a mouse, but with the macbook touchpad it was rather annoying to be unable to pan around (as moving quickly around is rather a benefit to flicking through a mindmap). Not sure how to fix that, but my inclination would be to offer keybinds for zooming in and out, or an option to allow panning with scroll.

* Behaves badly with browser zoom, you probably want to do some kind of dpi detection and rescale the interface as required.

* Possibly allow moving of the central idea.

* Showing/hiding child branches is very nice.

* Select a links child if you click on it? (as link settings are associated with the child) Also, possible to update the link colour immediately?

Overall very nice.

Very, very nicely done!

My own (minor) suggestions:

* Make the child note "inherit" the font size of the parent. For example, if I decrease the font size of a node, then create a child, have it use that font size rather than reverting to the default. I guess you could also argue the same for siblings. Or, as an alternative, provide a way to set the default size.

* Ability to change line thickness (and perhaps have the same rules apply as above for inheriting that thickness, where it at least goes to the next size down from the parent's modified size.)

I can't upvote this enough.

From what I can see you started this as a concept which is why it doesn't have advanced features like saving etc. I think saving is probably the most important one. I tried it on chromebook and works great, saves to local storage. Some other persistence, like on your site would be great. Well actually since I am complaining, and this is open source :) (silly right?!) I am used to closed ones where you have to ask dev to implement feature.

Great work, thanks.

Anyone know of a good app along these lines (not necessarily browser based) for working with timelines?

I've been reading a lot, opening a lot of tabs, and taking a lot of notes lately. I'm finding that organizing things by date/time works really well for making sense of piles of stuff.

I'd like to be able to throw things onto a timeline and then later read back the timeline in chronological order to get a sense of what kinds of trends are at work.

Any great recommendations will be much appreciated!

I really like the way you implemented the "drag to create a branch" mechanic, it feels very natural. Did you come up with that yourself? Have you seen it elsewhere?

As cool as the red drop drag is, implementing some standard keys for this will help those who do a lot of mind mapping from the keyboard only.

Other than that, looks good so far.

You can press INS to create a new node. Basically, most actions are accessible via the keyboard. Just hover over the toolbar buttons, the hint text contains the shortcut.

edit: As pointed out there are no INS keys on macbooks. Will change this to TAB key ASAP.

Didn't seem to notice them in chrome - maybe I didn't hover long enough? I don't have an INS on my macbook pro keyboard. :(

Maybe also an interesting mindmapping tool for HN: www.mindmeister.com

They have their mindmapping software running in HTML and Javascript since it was called "DHTML"

They focus a crazy amount of time on UX improvements.

Example of their mindmaps: http://www.mindmeister.com/de/107112097/how-to-organize-a-ba...

How does it differ from http://www.mindmeister.com/ ?

It's slower with less features.

Like you mentioned on the about page, image saving would be a nice addition, but it is already quite usable with Local Storage. Another cool feature would be the ability to attach documents to a branch. Do you have it up on github/bitbucket yet? Great work.

You can find the link to github by clicking on About mindmaps at the bottom left of the screen.

Looks excellent! One suggestion would be to allow the user to draw lines to pre-existing idea node. This would allow a more organic approach to thinking about things. The current version only allows you to create a line to a new node.

Offline capability is a great feature. The main reason I tend to not use web applications and prefer desktop ones is because webapps usually require having Internet connection available all the time.

Also, looks really nice :).

I love the intuitive nature of this tool. Well thought out.

Just curious, how are you generating the id of each node (eg. bc970e26-8d1c-4c92-baf0-aa9f3f792266)?

Thanks!

For ID generation, take a look at the source: https://github.com/drichard/mindmaps/blob/master/src/js/Util...

Didnt know you have open sourced this. Awesome.

Well done friend, good execution! Congrats! And I love to hear this words: This one is free, open source and it's full of HTML5 goodness.

Very nice UI, except that it uses the dreaded scroll wheel zoom. Especially annoying for magic mouse users.

Hum, I have never used a magic mouse. Can you explain what the problem is?

The mouse's too sensitive. A tiny flick of the finger and it is maximally zoomed in or zoomed out. Zooming a small step is practically impossible, at least for me.

Google maps has the same problem for me. I prefer to use the scroll wheel only for scrolling.

I need an "Arrange" feature.

Very nice!

Reply on news.ycombinator.com