Спойлер: используйте Vizdom.dev для рендеринга DAG, написанных на языке DOT.

Как разработчик программного обеспечения, я иногда работал с группами DAG, большинство из которых предполагало их визуализацию. Во многих случаях мне было трудно получить быстрый рендеринг, и мне приходилось искать инструменты.

К счастью, есть надежный Графвиз инструмент, который может отображать графики, написанные на языке DOT — отлично!

Кроме…

• В Интернете это работает не очень хорошо*
• мне нужно установить его
• Он не управляет файлами DOT/GV онлайн.

Соображения

*Хорошо, технически Graphviz можно скомпилировать в WebAssembly, и нескольким талантливым людям удалось создать несколько изящных проектов, таких как Dreampuf. редактор , Ники Эдотор.нет и магьяк редактор — каждый со своей изюминкой. Мне до сих пор сложно встроить эти изображения без экспорта в SVG (или другой носитель).

Например, я хочу сохранить свой график в Notion.so просто вставив ссылку, которая автоматически отобразит график.

я мог бы использовать РусалкаJS который отображает графики довольно четко и работает на удивление хорошо — это одна из многих причин, почему он 64k+ начинается на GitHub . Я также могу вставлять графики в Notion/GitHub, используя уценку, здорово!

К сожалению, мне приходится переводить DOT в уценку, которую требует Mermaid. Для небольших текстовых представлений я могу использовать ChatGPT для их преобразования, но он часто допускает грамматические ошибки, и график отказывается отображать, что делает его ненадежным источником автоматизации.

Тогда есть Terrastruct.com это великолепно для управления диаграммами, созданными вручную , но, как и мои проблемы с Русалкой, я не могу надежно преобразовать DOT в D2. Я полагаю, что если вы собираетесь строить диаграммы вручную, это приемлемая единовременная плата. В общем, это фантастический инструмент. Слава!

Проблема

• Я хочу отображать программно сгенерированные выходные данные DOT — похоже, ни один из инструментов не помогает мне достичь этой цели.

• Я хочу встроить ссылки, которые отображают графики.

• Я хочу сохранить визуализацию в Интернете для обновлений или для визуального сравнения ее с другими графиками.

Решение

Да, я построил приложение за это 🎉

…И он полностью построен на Rust 🦀 за большое спасибо Лептос

tl;dr — простое специально созданное приложение для быстрой визуализации DAG в Интернете.

Минимизация пересечений ребер при построении графов — признанная NP-сложная задача — является ключом к созданию визуально привлекательных графов. Команда Terrastruct опубликовала выдающуюся Сообщение блога углубляясь в эту тему. Вдохновленный алгоритмами компоновки DagreJS и содержательной статьей « Техника рисования ориентированных графов ¹», я разработал вариант на Rust.

Эта версия особенно эффективна для рендеринга иерархических графиков, учитывая всю сложность этой проблемы.

Рендеринг больших DAG (более 500 узлов/ребер) с помощью Graphviz имеет тенденцию быть несколько медленным. Дагре + D3 ( d3-графвиз и производные) в конечном итоге работают немного быстрее и предлагают отличные настройки анимации и стиля. Тем не менее, я чувствовал, что они упускают возможности, которые предоставляет язык DOT, а именно, атрибуты стиля часто учитываются только в том случае, если вы выполняете рендеринг с помощью Graphviz.

Виздом даст результаты, очень похожие на Dagre, но больше соответствующие спецификации DOT и стилю поведения Graphviz. Однако он не имеет паритета функций с Graphviz, а операторы/атрибуты, которые не поддерживаются, просто игнорируются.

Я считаю, что это хороший компромисс для типов атрибутов, которые будет использовать DOT.

Возможности Виздома

• 🚀 Невероятно быстрый рендеринг
• 💾 Храните графики в ссылках
• 0️⃣ Нулевые зависимости и установка не требуется.

Скорость рендеринга

Ну, это сравнение яблок и апельсинов. Graphviz по-прежнему создает отличные визуализации и поддерживает больше механизмы компоновки , так что я субъективно сравниваю Виздом против движка DOT Graphviz, сводя его только к DAG и еще дальше сводя его к списку узких функций языка DOT.

Да, я знаю, что ужасно сравнивать годы опыта и инструментов с более чем 30-летней полосой работы Graphviz, но для моего узкого случая использования это безумно быстро. Вот несколько результатов рендеринга на моем M1 Macbook Pro. довольно большой график с ~400 узлами:

• Собственный Graphviz: ~30 секунд.
• Chrome (WASM) Graphviz: происходит сбой*
• Chrome (Javascript) DagreJS: ~10 секунд.
• Хром (WASM) Виздом : ~1 секунда**

* Сбой, потому что флаг emscripten ALLOW_MEMORY_GROWTH=1 не установлен, поэтому общий объем памяти ограничен 16 МБ. Это можно исправить, но я не нашел онлайн-проекта, который мог бы обработать рассматриваемый граф.

** Пример графика отображается при выборе Example 14 в представлении редактора. Обновление страницы приведет к ее обновлению и получению ошибки 414, поскольку URI, сохраняющийся в графе, слишком велик. Я работаю над лучшим решением для хранения больших графиков.

Храните графики в ссылках

Вы заметите, что когда вы вносите какие-либо изменения в файл DOT, URL-адрес немедленно обновляет несколько параметров запроса для хранения параметров графика и макета, что позволяет вам всегда ссылаться на копию ваших данных, просто сохранив ссылку!

Есть одна загвоздка: большие графы имеют тенденцию делать URI слишком большим для AWS (где Виздом в настоящее время размещен) и другие балансировщики нагрузки.

В настоящее время я работаю над решением для обработки больших графиков, но тем временем я включил несколько способов сохранения и хранения графиков:

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

• Скопируйте фрагмент iframe, чтобы встроить его в любое приложение, поддерживающее его обработку.

• Или просто загрузите отрендеренный SVG.

Вот пример того, как выглядит вид редактора pprof трассировка для дефляции :

Перейдите в представление редактора и загрузите Example 42

Просмотр различий

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

Легенда цвета:

• Красный: удалено
• Оранжевый: модифицированный
• Зеленый: добавлено

Вот несколько снимков:

Нажмите меня: изменение идентификатора узла с «e» на «f»

Нажмите меня: добавление «cluster=true»

Будущее направление

Виздом все еще находится в стадии разработки, и, поскольку он продолжает развиваться, я осознаю, что процесс совершенствования этого инструмента так же динамичен, как и сама область визуализации графов. Хотя я горжусь тем, что Виздом уже достиг, я еще больше воодушевлен его потенциалом. Вот тут-то и приходите на помощь вам, читателю и потенциальному пользователю.

Если у вас есть какие-либо отзывы, пожалуйста, напишите мне на Гиттер или Раздор .

Спасибо за прочтение. Если вам понравилась эта статья, подписывайтесь !

[1]: Э.Р. Ганснер, Э. Кутсофиос, С.К. Норт и К. . -П. Во, «Техника рисования ориентированных графов», в IEEE Transactions on Software Engineering, vol. 19, нет. 3, стр. 214–230, март 1993 г., doi: 10.1109/32.221135.

Также опубликовано здесь