Граф знаний сайта system-design.space (Рубрика #SystemDesign) Материалов на сайте про system design стало слишком много и мне самому потребовалось средство для визуализации тем, глав и связей между ними. Так у меня получился граф знаний, который показывает 222 глав и 820 связей между ними. Каждый узел - это глава книги, а линия - смысловая связь между материалами. Связи строятся по перекрёстным ссылкам внутри контента глав: MarginNote на полях справа, ссылки из блоков "связанные главы" в конце глав и ссылки, что раскиданы по тексту статьи. Я планирую в будущем добавить в этот граф возможность выбора траекторий изучения, но пока он работает попрощ - Клик по кластеру в сайдбаре приводит к зуму и фокусу на главы из этой темы, а остальные главы затемняются - Клик по ноде в графе открывает панель с деталями главы, списком связанных глав и появляется кнопка перехода к материалу - Скролл / pinch позволяыт зумить. При приближении появляются названия глав - Перетаскивание - можно передвигаться по графу или если потянуть за отдельный узело, то можно его перместить - Цвета узлов соответствуют своим темам (кластерам) - По разному отмечаются связи внутри кластера и между кластерами + сами связи направленные - Для отрисовки графа используется force-directed layout (d3-force): узлы отталкиваются друг от друга, а связи притягивают. В итоге связанные главы оказываются рядом, а изолированные - на периферии. Я использовал этот граф сам для того, чтобы проверить, что у меня я сам не забыл добавить кросс-ссылки между темами (на самом деле забыл и граф мне позволил это исправить). #SystemDesign #Architecture #DistributedSystems #Career #Interview #Engineering