Что это и зачем?

Кратко:

Это схема связей и сжатого описания технологий, подходов и чего-либо ещё, что касается веб-разработки, frontend разработки в частности и того, где используется что-либо из стека HTML, CSS, JavaScript.

Подробно:

На просторах интернета собрано огромное количество обучающего материала, будь то видеоуроки, статьи или подкасты. Входя в эту отрасль у новичка возникает огромное количество вопросов касательно выбора стека технологий для разработки, непонимание назначений той или иной библиотеки, фреймворка и тд. В отличие от "дорожных карт" (roadmap) на этой схеме приведены небольшие описания рассматриваемых вещей.
Схема и краткая информация постараются ответить на вопросы: "Что это?", "Зачем это надо?", "Где искать информацию?".

Понятно, что описана не вся вселенная пакетов npm, а только то, с чем сталкивался лично я или то, что достаточно популярно и стоит упоминания (но это не точно).

Мнение автора может не совпадать с вашим, поэтому если вы видите, что где-то я полный профан, прошу не кидать тапками, а конструктивно объяснить, в чём именно я не прав, дабы я мог переосмыслить данную сущность и исправить описание.

А вообще, это от меня и для меня, так что ¯ \ _ (ツ) _ / ¯

Как пользоваться?

• Клик по ноде (кроме групповой) подгружает боковую панель с информацией.
• Ноды можно тягать мышкой по экрану для удобства. Касаний пока нет, так что без мобилок :(
• Ноды можно увеличивать или уменьшать колёсиком мыши. Касаний тоже пока нет.

Структура боковой панели:

[self]: ссылка_на_это_README_на_гитхабе
# [текст_ноды][self]

[site]: ссылка_на_официальный_сайт_если_есть
[wiki]: ссылка_на_википедию_если_есть_русский_или_английский
[Официальный сайт][site] | [Вики][wiki]

**текст_ноды** - это краткое_описание_сущности_только_суть

## Какую проблему решает? | Для чего нужно?
Описание_решаемой_проблемы_или_необходимости_этой_сущности

## Как решает? | Что предлагается? | Как использовать?
Описание_предложенного_решения

## Полезные ссылки:
- [перечень_ссылок_с_описанием_того_что_внутри](ссылка)
- [этот_блок_может_отсутствовать](ссылка)

Добавление новой ноды:

Стоит помнить, что структура древовидна, т.е. один родитель - много детей. Не может быть два родителя и дети одного уровня не знают друг о друге.

1. Создать папку в data/* на нужном уровне, где название папки будет ID ноды.
   Желательно использовать только следующие символы: [a-zA-Z0-9_-]
2. Создать внутри созданной папки файл <ID>.json, который отвечает за конфигурацию ноды.
3. Если нода не является групповой, то добавить README.md в эту же папку. В этом файле описать всё по структуре выше. Эта информация будет отображаться на боковой панели.

Структура <ID>.json:

{
  text:   string, // Читабельное название, которое будет отображаться
  x?:     number, // Расположение по Х относительно своего родителя
  y?:     number, // Расположение по Y относительно своего родителя
  angle?: number, // Угол в градусах(0-360) относительно своего родителя
                  // Использование angle может быть удобнее, чем {x, y}
  distance?: number, // Дистанция отдаления от родителя, по умолчанию 2
                     // Используется в паре с angle
  scale?:    number, // Размер ноды, по умолчанию 1
}

Используется либо x, y, либо angle, distance. Поле text обязательно, scale не обязательно.

Для разработки:

npm run compile:data - собирает данные
npm run compile      - собирает css и js
npm run watch        - отслеживает и собирает css и js
npm run server       - запускает локальный сервер для разработки