Tectograms - a new generation of mindmaps

Clickable image
TextBeauty

Software for order


In the field of organizing thoughts in the form of notes, there is a huge amount of software. Three approaches and, accordingly, three types of programs were most widely used:

  1. Wiki - Hypertext Notes
  2. Layered Lists - Outliners
  3. “Intellect cards” (mental cards, “mind cards”, mind maps, mind maps)

For textual information (plan, task list, selection of links), a multilevel list is enough. The list is visually uniform and easy to scan. But it’s worth putting a picture in the text, as it immediately draws attention to itself and breaks the flow of reading.



Mindmaps are implemented in the form of a tree, the leaves of which can contain not only text, but pictures. The text should be short and the pictures should be small, otherwise the structure will deteriorate. If you illustrate each element, then with a large amount of data, the order in the diagram will not. Mindmap is easy and fun to draw, but pretty hard to read.



We set the task to develop another way of presenting short notes (thoughts, ideas) in the form of a diagram that would be read no worse than a list or a maidmap.

Redesign


We will go from top to bottom, from the highest hierarchical level to the lowest. So, there is an element consisting of a title and a description. Newspaper headlines are much larger in size than the main text; we will do the same:



You can insert an illustration into such a design; regardless of the actual size, we will limit it in width.



The hierarchy is visually represented by text of a qualitatively different size, so we will make the headings of the nested elements the same size as the description of the top element.



We show the nested elements below, so that they do not need connecting lines. You can arrange items in a row, column, in several rows (like words).



If the structure is supplemented with inter-element bonds, then also in the form of a matrix or graph.



The multi-level system device is easy to read, zooming in and out on the map. For navigation, you can not do without changing the scale. The resulting display method has much more in common with an ordinary card than the "intelligence cards". We call this method a system card , or a tectogram (Greek. Τεκτονικός - relating to construction).

Advantages: visual uniformity, levels are clearly visible, at the same time with a look you can cover 2-3 hierarchical levels. Compared to mind maps, it is easier to read; Compared to lists, more flexibility.

The main drawback of the format is that it is convenient for active work only in an interactive digital form. You can’t draw such a pencil in a notebook. But you can print it in the form of a poster, read-only. On paper, it makes sense to print tectograms of systems up to 5 levels deep. On the A4 format, two-level tectograms are well read, A2 - three-level, A1 - four-level.

Tektograph


A tektograph is a tool for creating system maps. You can take a look at the demo , or you can take the source code .

Screenshot


Now it is a tool for individual work. The system is stored in localstorage, can be exported to a JSON file and imported from it.

There is a “simplified editor” in which the entire system is presented in text form in one field. In this format, some elements of system formatting are missing. This is done in order to be able to fix thoughts "in the stream" and not waste time on design. It’s convenient to put the diagram as a whole, then gradually edit individual elements.

The emphasis is on working with the content of the tectogram; stylization is reduced to the selection of one of the predefined styles. You need beauty - you can export it to SVG and bring it to standard in a vector editor or make it up like a web page.

Hotkeys work, cancel and return actions.

Like any other instrument, the tektograph has its limitations. It is best suited for taking notes, organizing thoughts, modeling programs, planning articles and speeches - all that has a hierarchical structure.

A couple of examples (pictures are clickable): For the to-do lists, tables, flowcharts, and illustrations, the tektograph is most likely not suitable. Each of these data types has its own convenient tools. However, no one bothers to try. This is what a checklist might look like: Library on Github Demo Works in Chrome and Firefox. There are problems with IE. Waiting for feedback and comments in the comments.

42 Development Ltd.


javascript




Checklist






Also popular now: