Граф знаний сайта system-design.space (Рубрика #SystemDesign)

Материалов на сайте про system design стало слишком много и мне самому потребовалось средство для визуализации тем, глав и связей между ними. Так у меня получился граф знаний, который показывает 222 глав и 820 связей между ними. Каждый узел - это глава книги, а линия - смысловая связь между материалами. Связи строятся по перекрёстным ссылкам внутри контента глав: MarginNote на полях справа, ссылки из блоков "связанные главы" в конце глав и ссылки, что раскиданы по тексту статьи.

Я планирую в будущем добавить в этот граф возможность выбора траекторий изучения, но пока он работает попрощ
- Клик по кластеру в сайдбаре приводит к зуму и фокусу на главы из этой темы, а остальные главы затемняются
- Клик по ноде в графе открывает панель с деталями главы, списком связанных глав и появляется кнопка перехода к материалу
- Скролл / pinch позволяыт зумить. При приближении появляются названия глав
- Перетаскивание - можно передвигаться по графу или если потянуть за отдельный узело, то можно его перместить
- Цвета узлов соответствуют своим темам (кластерам)
- По разному отмечаются связи внутри кластера и между кластерами + сами связи направленные
- Для отрисовки графа используется force-directed layout (d3-force): узлы отталкиваются друг от друга, а связи притягивают. В итоге связанные главы оказываются рядом, а изолированные - на периферии.

Я использовал этот граф сам для того, чтобы проверить, что у меня я сам не забыл добавить кросс-ссылки между темами (на самом деле забыл и граф мне позволил это исправить).

#SystemDesign #Architecture #DistributedSystems #Career #Interview #Engineering