Visualizing Mind Maps
Learn how to integrate well-structured mind maps into your application
Mind maps display information and concepts in a visual form. They develop a single idea, notion, or subject which they transform from a thought that comes from the human brain in an organized visualization on a page.
Almost everybody has come into a situation where a topic or an idea, which is not necessarily visually easy to grasp, has to be presented and explained to an audience. What is the first thing that most people in this situation do? They start drawing a sketch in which the main idea lies in the center while all other related ideas lie around it. This sketch reflects what a mind map visualization is.
Mind maps are quite useful in presenting an idea with clarity, organizing the information around a subject, problem-solving, brainstorming, and decision making. Hence, they can be helpful not only in business or in education but also in our everyday lives.
There exist some guidelines on how to create a mind map drawing. In general, each node in this visualization should represent an idea/concept/topic, whereas each edge should connect related ideas/concepts/topics. The main idea or concept is in the center of the visualization. All other primary topics are connected to the central node, creating branches. Each such branch should be well distinguishable through a characteristic label or image. Less important ideas can connect to their corresponding related branches.
A mind map visualization is built hierarchically and should support images, text labels, colors, and different node/edge styles. It should also be extendable so that the users can add new information at any time while this addition of new elements must not disturb the mental map of the user. A mind map diagram should also support interactions that will facilitate operations like branch/relation creation or deletion, navigation, styling changes, display of additional information, custom node ordering, and many more.
There exist several tools for generating mind map visualizations, among which are LucidChart, MindMeister, XMind, Mindomo, and many others. While such tools are sufficient to create mind maps, the user might have specific requirements that general tools do not meet. For example, the user may need custom interactions, different or complex rendering of nodes/edges of the diagram, or additional information to display. In these cases, he/she has to create a custom tool that meets his/her requirements.
Building a custom mind map visualization can be a challenging task depending on the complexity of the user’s requirements. The user can save a lot of money, time, and workforce using a software library that provides ready-to-use components for this task.
yFiles is a commercial programming library that facilitates the creation of mind maps on many different platforms. yFiles for HTML comes with a Mind Map Sample Application that demonstrates an interactive mind map editor. The topic of included example data is “hobbies” but users can create new diagrams, too. In the diagram, each branch is visualized using a different color and can be collapsed if desired using arrow icons to increase the clarity of larger mind maps.
The mind map also supports interactions. For example, the user can create new branches/relations, remove existing ones, add images, change colors, or create cross-reference relations using a popup menu. It is also possible to use either the mouse or the keyboard to navigate between the nodes.
Every time that the diagram changes, the arrangement of the nodes is modified and adapted to the new changes. However, this operation is carefully done, and only minor changes are performed to the existing elements of the diagram so that the user’s mental map remains stable.
Test the yFiles for HTML diagramming library with a 60-day, fully functional trial package.
To implement your own Mind Map application, start with the Mind Map Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your own project. yFiles makes it easy to customize all aspects of this application, for example adjust user interaction or the visualizations.
Download the trial version of yFiles for HTML for your target platform at the yWorks Customer Center.
Navigate to the source directory of the Mind Map Sample Application.
Explore the sample application’s features and
adjust its source code to match your requirements or
copy the source code of the features you like to your own project.