Hacker News Digest

Команда SpiderMonkey разработала новый инструмент для визуализации компиляции JavaScript и WebAssembly, создав собственный алгоритм расположения графов вместо использования Graphviz или Mermaid. Когда оптимизирующий компилятор Ion активен, система генерирует интерактивные графики, показывающие обработку и оптимизацию функций. Пользователи могут писать JavaScript-код и видеть в реальном времени, как изменяется граф, с возможностью навигации, масштабирования и просмотра различных этапов оптимизации.

Автор статьи не был удовлетворен выводом существующих инструментов, которые не отражали структуру исходного кода и создавали нестабильные макеты. Новый алгоритм, реализованный менее чем в 1000 строк кода, прост, быстр и produces высококачественный результат. Он учитывает специфические ограничения графов управления потоком, такие как наличие хорошо определенных циклов и необратимость потока управления, что позволяет создавать более интуитивные визуализации.

Для разработки автор изучал алгоритм Сугиямы, используемый в Graphviz, но создал собственное решение, специально адаптированное под нужды компилятора. Интерактивный инструмент значительно упрощает анализ и отладку сложных графов компиляции, позволяя отслеживать инструкции и блоки кода на разных этапах оптимизации.

• Обсуждение показало, что специализированные решения для визуализации превосходят универсальные инструменты вроде Graphviz, но сообщество продолжает использовать последние из-за инерции и отсутствия альтернатив.
• Участники жалуются на то, что Graphviz и подобные инструменты не справляются с задачами даже средней сложности, и что их использование часто требует ручной доводки.
• Проект Microdiagram нацелен на создание DSL для каждого типа диаграмм вместо одного языка для всех типов диаграмм.
• Обсуждение также затронуло вопросы производительности и надежности инструментов, а также то, что сгенерированные ими диаграммы не всегда читаемы без дополнительной ручной работы.
• Участники поделились ссылкой на исходники на GitHub, где можно найти код, который может быть использован как стартовая точка для собственных экспериментов в этой области.

oxdraw — это инструмент для создания диаграмм с помощью кода, написанный на Rust с поддержкой перетаскивания элементов. Проект позволяет разработчикам создавать визуальные диаграммы, используя текстовое описание, что упрощает версионирование и интеграцию с существующими рабочими процессами. Написанный на производительном языке Rust, oxdraw обеспечивает быструю работу даже с сложными диаграммами.

Ключевая особенность инструмента — возможность интерактивного редактирования диаграмм с помощью мыши. Пользователи могут создавать элементы кодом, а затем перетаскивать их для изменения расположения без необходимости редактировать исходный код. Такой подход сочетает преимущества декларативного описания диаграмм с интуитивным визуальным редактированием, что делает инструмент полезным как для разработчиков, предпочитающих работу с кодом, так и для тех, кто предпочитает визуальный дизайн.

• Пользователи обсуждают различные инструменты для диаграмм: Mermaid.js, D2, PlantUML и Graphviz, а также их ограничения и возможности.
• Обсуждается необходимость улучшения автоматического размещения для Mermaid.js и возможность встроить инструмент в качестве layout engine.
• Участники поднимают вопросы о лицензии (отсутствие файла LICENSE), отсутствии функционала вроде всплывающих подсказок и коллапсинга нод, а также о том, что проект не предоставляет встроенного способа взаимодействия с инструментами вроде Excalidraw.
• Разработчик отвечает, что проект находится в стадии разработки и что он открыт к вкладу со стороны сообщества.