Картинка кликабельна
![TextBeauty](https://habrastorage.org/r/w1560/files/77a/0c1/e12/77a0c1e12b184dd491aea87f68ac1f3e.png)
В области организации мыслей в виде заметок существует огромное количество ПО. Наибольшее распространение получили три подхода и соответственно три вида программ:
Для текстовой информации (план, список задач, подборка ссылок) хватает многоуровневого списка. Список визуально однороден, его легко сканировать. Но стоит поместить в текст картинку, как она тут же перетягивает на себя внимание и разбивает поток чтения.
![](https://habrastorage.org/r/w1560/files/408/2c8/20b/4082c820b1f24f079519e1db436b0a40.png)
Майндмапы реализуются в виде дерева, листья которого могут содержать не только текст, но картинки. Текст должен быть коротким а картинки — маленькими, иначе структура испортится. Если иллюстрировать каждый элемент, то при большом объеме данных порядка на диаграмме не будет. Майндмап легко и интересно рисовать, но довольно тяжело читать.
![](https://habrastorage.org/r/w780q1/files/fa9/f35/68f/fa9f3568f09a47bdacb4e092f61c78d6.jpg)
Поставим задачу разработать еще один способ представления коротких заметок (мыслей, идей) в виде диаграммы, которая читалась бы не хуже списка или майдмапа.
Будем идти сверху вниз, от высшего иерархического уровня к низшим. Итак, есть элемент, состоящий из заголовка и описания. Газетные заголовки набираются гораздо большим кеглем, чем основной текст; сделаем и мы так же:
![](https://habrastorage.org/r/w1560/files/ed2/7f0/3cc/ed27f03ccdfa4ca28c44579a5e155c31.png)
В такую конструкцию можно вставить иллюстрацию; независимо от реальных размеров ограничим ее по ширине.
![](https://habrastorage.org/r/w1560/files/d57/e58/d36/d57e58d36915402ca0fd769cf335b46c.png)
Иерархия визуально представляется текстом качественно разного размера, поэтому сделаем заголовки вложенных элементов тем же кеглем, что и описание верхнего элемента.
![](https://habrastorage.org/r/w1560/files/9f6/0a9/d5a/9f60a9d5a40945289bfab6bf2291c763.png)
Вложенные элементы покажем ниже, так, чтобы они не нуждались в соединительных линиях. Расположить элементы можно в строку, столбцом, в несколько строк (подобно словам).
![](https://habrastorage.org/r/w1560/files/31b/6d4/1dc/31b6d41dcd0b421fb39a52132285f619.png)
Если дополнить структуру межэлементыми связями, — то также в виде матрицы или графа.
![](https://habrastorage.org/r/w1560/files/7d2/2f3/d6c/7d22f3d6c3ef4440bff7cbeec0a619d0.png)
Устройство многоуровневой системы легко читать, приближая и отдаляя карту. Для навигации не обойтись без изменения масштаба. У полученного способа отображения гораздо больше общего с обычной картой, чем у «интеллект-карт». Назовем этот способ системной картой, или тектограммой (греч. τεκτονικός — относящийся к строительству).
Преимущества: визуальная однородность, четко видны уровни, одновременно взглядом можно охватить 2-3 иерархических уровня. По сравнению с майндмапами — легче читается; по сравнению со списками — большая гибкость.
Главный недостаток формата в том, что для активной работы удобен только в интерактивном цифровом виде. Карандашом в блокноте такое не нарисуешь. Зато можно распечатать в виде плаката, только для чтения. На бумаге имеет смысл печатать тектограммы систем глубиной до 5 уровней. На формате А4 хорошо читаются двухуровневые тектограммы, А2 — трехуровневые, А1 — четырехуровневые.
Тектограф — это инструмент для создания системных карт. Можно взглянуть на демо, а можно взять исходный код.
Сейчас это инструмент для индивидуальной работы. Система сохраняется в localstorage, может экспортироваться в файл формата JSON и импортироваться из него.
Есть «упрощенный редактор», в котором вся система представлена в текстовом виде в одном поле. В таком формате отсутствуют некоторые элементы форматирования систем. Сделано это для того, чтоб можно было фиксировать мысли «в потоке» и не тратить времени на оформление. Удобно накидать диаграмму в целом, затем понемногу править отдельные элементы.
Акцент сделан на работу с содержанием тектограммы, стилизация сведена к выбору одного из предустановленных стилей. Нужна красота — можно экспортировать в SVG и доводести до кондиции в векторном редакторе или сверстать как веб-страничку.
Работают горячие клавиши, отмена и возврат действий.
Как у любого другого инструмента, у тектографа есть свои ограничения. Лучше всего он подойдет для конспектирования, систематизации мыслей, моделирования программ, планирования статей и выступлений — всего, что имеет иерархическую структуру.
Пара примеров (картинки кликабельны):
![42 Development Ltd.](https://habrastorage.org/r/w1560/files/6b8/46d/f86/6b846df863db4e84b5281338c957ecd2.png)
![javascript](https://habrastorage.org/r/w1560/files/543/03f/393/54303f393c6f4ff2b799a2c1a2ec0950.png)
Для списков дел, таблиц, блок-схем, иллюстраций Тектограф скорее всего не подойдет. Для каждого из этих типов данных есть свои удобные инструменты. Впрочем, никто не мешает попробовать. Вот так может выглядеть чеклист:
![Checklist](https://habrastorage.org/r/w1560/files/e3b/7fe/2c9/e3b7fe2c9f4a4c0db99d7e64a019ebf7.png)
Библиотека на Гитхабе
Демо
Работает в Chrome и Firefox. С IE есть проблемы. Жду отзывов и замечаний в комментариях.
![TextBeauty](https://habrastorage.org/files/77a/0c1/e12/77a0c1e12b184dd491aea87f68ac1f3e.png)
Софт для порядка
В области организации мыслей в виде заметок существует огромное количество ПО. Наибольшее распространение получили три подхода и соответственно три вида программ:
- Вики — гипертекстовые заметки
- Многоуровневые списки — программы-аутлайнеры (англ. outliners)
- «Интеллект-карты» (ментальные карты, «карты ума», майндмапы, mind maps)
Для текстовой информации (план, список задач, подборка ссылок) хватает многоуровневого списка. Список визуально однороден, его легко сканировать. Но стоит поместить в текст картинку, как она тут же перетягивает на себя внимание и разбивает поток чтения.
![](https://habrastorage.org/files/408/2c8/20b/4082c820b1f24f079519e1db436b0a40.png)
Майндмапы реализуются в виде дерева, листья которого могут содержать не только текст, но картинки. Текст должен быть коротким а картинки — маленькими, иначе структура испортится. Если иллюстрировать каждый элемент, то при большом объеме данных порядка на диаграмме не будет. Майндмап легко и интересно рисовать, но довольно тяжело читать.
![](https://habrastorage.org/files/fa9/f35/68f/fa9f3568f09a47bdacb4e092f61c78d6.jpg)
Поставим задачу разработать еще один способ представления коротких заметок (мыслей, идей) в виде диаграммы, которая читалась бы не хуже списка или майдмапа.
Редизайн
Будем идти сверху вниз, от высшего иерархического уровня к низшим. Итак, есть элемент, состоящий из заголовка и описания. Газетные заголовки набираются гораздо большим кеглем, чем основной текст; сделаем и мы так же:
![](https://habrastorage.org/files/ed2/7f0/3cc/ed27f03ccdfa4ca28c44579a5e155c31.png)
В такую конструкцию можно вставить иллюстрацию; независимо от реальных размеров ограничим ее по ширине.
![](https://habrastorage.org/files/d57/e58/d36/d57e58d36915402ca0fd769cf335b46c.png)
Иерархия визуально представляется текстом качественно разного размера, поэтому сделаем заголовки вложенных элементов тем же кеглем, что и описание верхнего элемента.
![](https://habrastorage.org/files/9f6/0a9/d5a/9f60a9d5a40945289bfab6bf2291c763.png)
Вложенные элементы покажем ниже, так, чтобы они не нуждались в соединительных линиях. Расположить элементы можно в строку, столбцом, в несколько строк (подобно словам).
![](https://habrastorage.org/files/31b/6d4/1dc/31b6d41dcd0b421fb39a52132285f619.png)
Если дополнить структуру межэлементыми связями, — то также в виде матрицы или графа.
![](https://habrastorage.org/files/7d2/2f3/d6c/7d22f3d6c3ef4440bff7cbeec0a619d0.png)
Устройство многоуровневой системы легко читать, приближая и отдаляя карту. Для навигации не обойтись без изменения масштаба. У полученного способа отображения гораздо больше общего с обычной картой, чем у «интеллект-карт». Назовем этот способ системной картой, или тектограммой (греч. τεκτονικός — относящийся к строительству).
Преимущества: визуальная однородность, четко видны уровни, одновременно взглядом можно охватить 2-3 иерархических уровня. По сравнению с майндмапами — легче читается; по сравнению со списками — большая гибкость.
Главный недостаток формата в том, что для активной работы удобен только в интерактивном цифровом виде. Карандашом в блокноте такое не нарисуешь. Зато можно распечатать в виде плаката, только для чтения. На бумаге имеет смысл печатать тектограммы систем глубиной до 5 уровней. На формате А4 хорошо читаются двухуровневые тектограммы, А2 — трехуровневые, А1 — четырехуровневые.
Тектограф
Тектограф — это инструмент для создания системных карт. Можно взглянуть на демо, а можно взять исходный код.
Скриншот![](https://habrastorage.org/r/w1560/files/9d6/bf3/b46/9d6bf3b461874c26b8ed6dc119b5d408.png)
![](https://habrastorage.org/files/9d6/bf3/b46/9d6bf3b461874c26b8ed6dc119b5d408.png)
Сейчас это инструмент для индивидуальной работы. Система сохраняется в localstorage, может экспортироваться в файл формата JSON и импортироваться из него.
Есть «упрощенный редактор», в котором вся система представлена в текстовом виде в одном поле. В таком формате отсутствуют некоторые элементы форматирования систем. Сделано это для того, чтоб можно было фиксировать мысли «в потоке» и не тратить времени на оформление. Удобно накидать диаграмму в целом, затем понемногу править отдельные элементы.
Акцент сделан на работу с содержанием тектограммы, стилизация сведена к выбору одного из предустановленных стилей. Нужна красота — можно экспортировать в SVG и доводести до кондиции в векторном редакторе или сверстать как веб-страничку.
Работают горячие клавиши, отмена и возврат действий.
Как у любого другого инструмента, у тектографа есть свои ограничения. Лучше всего он подойдет для конспектирования, систематизации мыслей, моделирования программ, планирования статей и выступлений — всего, что имеет иерархическую структуру.
Пара примеров (картинки кликабельны):
![42 Development Ltd.](https://habrastorage.org/files/6b8/46d/f86/6b846df863db4e84b5281338c957ecd2.png)
![javascript](https://habrastorage.org/files/543/03f/393/54303f393c6f4ff2b799a2c1a2ec0950.png)
Для списков дел, таблиц, блок-схем, иллюстраций Тектограф скорее всего не подойдет. Для каждого из этих типов данных есть свои удобные инструменты. Впрочем, никто не мешает попробовать. Вот так может выглядеть чеклист:
![Checklist](https://habrastorage.org/files/e3b/7fe/2c9/e3b7fe2c9f4a4c0db99d7e64a019ebf7.png)
Библиотека на Гитхабе
Демо
Работает в Chrome и Firefox. С IE есть проблемы. Жду отзывов и замечаний в комментариях.