Спойлер: используйте   для рендеринга DAG, написанных на языке DOT. Vizdom.dev  Как разработчик программного обеспечения, я иногда работал с группами DAG, большинство из которых предполагало их визуализацию. Во многих случаях мне было трудно получить быстрый рендеринг, и мне приходилось искать инструменты.  К счастью, есть надежный  инструмент, который может отображать графики, написанные на языке DOT — отлично!   Графвиз  Кроме…  В Интернете это работает не очень хорошо*  мне нужно установить его  Он не управляет файлами DOT/GV онлайн.  Соображения  *Хорошо,   Graphviz можно скомпилировать в WebAssembly, и нескольким талантливым людям удалось создать несколько изящных проектов, таких как Dreampuf.  , Ники  и магьяк  — каждый со своей изюминкой. Мне до сих пор сложно встроить эти изображения без экспорта в SVG (или другой носитель). технически   редактор   Эдотор.нет   редактор  Например, я хочу сохранить свой график в  просто вставив ссылку, которая автоматически отобразит график.   Notion.so  я мог бы использовать  который отображает графики довольно четко и работает на удивление хорошо — это одна из многих причин, почему он  . Я также могу вставлять графики в Notion/GitHub, используя уценку, здорово!   РусалкаJS    GitHub 64k+ начинается на  К сожалению, мне приходится переводить DOT в уценку, которую требует Mermaid. Для небольших текстовых представлений я могу использовать ChatGPT для их преобразования, но он часто допускает грамматические ошибки, и график отказывается отображать, что делает его ненадежным источником автоматизации.  Тогда есть  это великолепно для управления диаграммами,   , но, как и мои проблемы с Русалкой, я не могу надежно преобразовать DOT в D2. Я полагаю, что если вы собираетесь строить диаграммы вручную, это приемлемая единовременная плата. В общем, это фантастический инструмент. Слава!   Terrastruct.com созданными вручную  Проблема  Я хочу отображать   сгенерированные выходные данные DOT — похоже, ни один из инструментов не помогает мне достичь этой цели. программно  Я хочу встроить ссылки, которые отображают графики.  Я хочу сохранить визуализацию в Интернете для обновлений или для визуального сравнения ее с другими графиками.  Решение  Да, я построил  за это 🎉   приложение  …И он полностью построен на Rust 🦀 за большое спасибо   Лептос     tl;dr — простое специально созданное приложение для быстрой визуализации DAG в Интернете.  Минимизация пересечений ребер при построении графов — признанная NP-сложная задача — является ключом к созданию визуально привлекательных графов. Команда Terrastruct опубликовала выдающуюся  углубляясь в эту тему. Вдохновленный алгоритмами компоновки DagreJS и содержательной статьей «   ¹», я разработал вариант на Rust.   Сообщение блога Техника рисования ориентированных графов  Эта версия особенно эффективна для рендеринга иерархических графиков, учитывая всю сложность этой проблемы.  Рендеринг больших DAG (более 500 узлов/ребер) с помощью Graphviz имеет тенденцию быть несколько медленным. Дагре + D3 (  и производные) в конечном итоге работают немного быстрее и предлагают отличные настройки анимации и стиля. Тем не менее, я чувствовал, что они упускают возможности, которые предоставляет язык DOT, а именно, атрибуты стиля часто учитываются только в том случае, если вы выполняете рендеринг с помощью Graphviz.   d3-графвиз  даст результаты, очень похожие на 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.   Также опубликовано  здесь

This post provides insights into new product. 

This story contains new, firsthand information uncovered by the writer.

Render DAGs with Vizdom

Read My Stories

Этот звук создан на языке оригинала истории!

Вот почему вам не следует использовать Graphviz для DAG: что вам следует использовать вместо этого

About Author

КОММЕНТАРИИ

БИРКИ

ЭТА СТАТЬЯ БЫЛА ПРЕДСТАВЛЕНА В

Related Stories

Раскрытие силы ИИ. Систематический обзор передовых методов: Краткое содержание и введение

Невидимые слои: почему интервью с пользователями являются незаменимым активом

Хотите выиграть конкурс HackerNoon? Вот что рекомендуют победители конкурса #crypto-api

Цифровые кочевники слушают: что нужно знать о новой визе DTV в Таиланде

Раскрытие силы ИИ. Систематический обзор передовых методов: Краткое содержание и введение

Невидимые слои: почему интервью с пользователями являются незаменимым активом

Хотите выиграть конкурс HackerNoon? Вот что рекомендуют победители конкурса #crypto-api

Цифровые кочевники слушают: что нужно знать о новой визе DTV в Таиланде

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps