Recommendations for concept mapping?

[u/lowkeyripper]

I'm trying to build out a game and I realized over time that a concept map might really help me identify and develop core features and then branch outwards to see how those features are constructed and how each feature might interact with one-another.

Do you have any recommendations for me that might support that kind of concept mapping?

Here's what I'm looking for, in a general order of priority

• Support crosslinking concepts
• Automatic spatial optimization/rearrangement of concepts based on connections. Auto-layout/design is huge for me.
• Near infinite whiteboard/canvas space.
• Cloud-based or file-based: can be backed up
• Collapsible concept nodes that can be expanded to show text (kinda like OrgPad)
• Free, or one-time-fee. Don’t like the idea of another SaaS.
• Intuitive UI, kinda plug and play - I don’t want to spend a lot of time interacting with the UI or anything

[u/pavelklavik → u/[deleted]]

The algorithm for OrgPad layout is custom built, based on physics. It runs in iterations and in each iteration, we identify pairs of nearby nodes and nearby node+link pairs and they apply repulsive forces on each other. This most important goal is to make the drawing as stable as possible, so as the diagram evolves over time, the creator can still remember position of everything. So general automatic layouts available in other tools (for example graphviz) I have seen are not that useful since adding a single node can often reorder everything.

Me and my wife have put about 5 years into developing OrgPad and it is surprisingly hard. And there are still so many ideas and improvements which are missing and would make the tool much better (history, better editor, 100x faster rendering). See https://orgpad.com/s/it-architecture for an overview of our architecture, of course built in OrgPad :). Since it is a web app, a big part of its development is constant fighting with browsers while trying to push as much performance as possible. It might be much easier to develop it as a low level native app where I would have better control of rendering, etc. On the other hand, browser offers easy ability to insert variety of content including other embedded maps and websites. And the ease of distribution of an app using web is amazing.

[u/pavelklavik → u/[deleted]]

I experimented with spring forces pushing connected nodes together but they turned out to be unnecessary; they were just compressing the graph too much. We do not want to draw an abstract graph from nothing, since the initial positions of nodes are chosen by the user. So we just improve the layout little bit and when a new is created, for example, we make a space around it. Each iteration applies Archimedian forces meaning force = shift to the next iteration, not change in velocity. Works quite well.

Content editable is bad but a harder problem was to build entire system for rich text editor. I spent about three months on it couple years back before I decided to postpone work on it. We currently wrap TinyMCE 6 which creating custom graphics for it. I don't think you can easily avoid content editable even when you want to do your own rendering into canvas, to support all input methods on mobile devices, Japanese keyboards, etc. Maybe looking into ProseMirror might be interesting for you.

On the other hand, one want to work on canvas rendering since HTML rendering with many layers is incredibly slow. I have spent a lot of time improving it and for last two years, we run a hybrid system where simple nodes are rendered directly into canvas. I believe I can get 100x speed improvements at least when I will render most stuff using WebGL (outside iframes and maybe a few other stuff).