Spoiler: Use Vizdom.dev para renderizar DAGs escritos na linguagem DOT

Como desenvolvedor de software, ocasionalmente trabalhei com DAGs – a maioria dos quais envolve visualizá-los. Em muitos casos, achei difícil conseguir uma renderização rápida e me vi procurando por ferramentas.

Felizmente, existe o confiável Gráficoviz ferramenta que pode renderizar gráficos escritos na linguagem DOT — Perfeito!

Exceto…

• Não funciona bem na web*
• Eu preciso instalá-lo
• Não gerencia arquivos DOT/GV online

Considerações

*Ok, tecnicamente o Graphviz pode ser compilado para WebAssembly, e algumas pessoas talentosas conseguiram construir alguns projetos legais, como o do dreampuf editor , Nikeee edotor.net , e magjac editor - cada um com seu próprio toque. Ainda tenho dificuldade em incorporar essas renderizações sem exportá-las para um SVG (ou outro meio).

Por exemplo, quero armazenar meu gráfico em Noção.so simplesmente colando um link que renderiza automaticamente o gráfico.

eu poderia usar SereiaJS que renderiza gráficos de forma bastante limpa e funciona surpreendentemente bem - é uma das muitas razões pelas quais 64k+ começa no GitHub . Também posso incorporar gráficos no Notion/GitHub usando markdown, ótimo!

Infelizmente, tenho que traduzir o DOT para o tipo de redução que o Mermaid exige. Para representações textuais menores, posso usar o ChatGPT para convertê-las para mim, mas ele frequentemente comete erros gramaticais e o gráfico se recusa a ser renderizado – tornando-o não confiável como fonte de automação.

Então há Terrastruct.com o que é incrível para gerenciar diagramas feitos à mão , mas, como meus problemas com o Mermaid, não consigo converter DOT em D2 de maneira confiável. Suponho que se você pretende construir diagramas manualmente, esse é um custo único e aceitável. Em geral, é uma ferramenta fantástica. Parabéns!

O problema

• Quero renderizar saídas DOT geradas programaticamente - nenhuma das ferramentas parece me ajudar a atingir esse objetivo.

• Quero incorporar links que renderizem gráficos.

• Quero armazenar a renderização on-line para atualizações ou compará-la visualmente com outros gráficos.

A solução

Sim - eu construí um aplicativo para isso 🎉

…E é construído inteiramente em Rust 🦀 com muitos agradecimentos a Leptos

dr - um aplicativo simples e desenvolvido especificamente para renderizar DAGs online, rapidamente

Minimizar os cruzamentos de arestas na geração de gráficos, um desafio reconhecido como NP-difícil, é a chave para a criação de gráficos visualmente atraentes. A equipe da Terrastruct publicou um excelente postagem no blog se aprofundando neste tema. Inspirado significativamente pelo(s) algoritmo(s) de layout DagreJS e pelo artigo esclarecedor “ A Technique for Drawing Directed Graphs ¹”, desenvolvi uma variante em Rust.

Esta versão é particularmente eficaz para renderizar gráficos hierárquicos, aproveitando as intrincadas complexidades deste problema.

A renderização de DAGs grandes (mais de 500 nós/arestas) tende a ser um tanto lenta com o Graphviz. Dagre + D3 ( d3-graphviz e derivados) acabam um pouco mais rápidos e oferecem ótimas animações/personalizações de estilo. No entanto, senti que eles perderam os recursos que a linguagem DOT oferece - ou seja, os atributos de estilo geralmente só são respeitados se você estiver renderizando com o Graphviz.

Visão produzirá resultados muito semelhantes aos do Dagre, mas mais alinhados à especificação DOT e aos comportamentos de estilo do Graphviz. No entanto, ele não tem paridade de recursos com o Graphviz, e instruções/atributos que não são suportados são simplesmente ignorados.

Acredito que seja um bom compromisso para os tipos de atributos que o DOT gerado programaticamente consumirá.

Recursos de visualização

• 🚀 Renderização extremamente rápida
• 💾 Armazene gráficos em links
• 0️⃣ Zero dependências e nenhuma instalação necessária

Velocidade de renderização

Bem, é uma comparação entre maçãs e laranjas. Graphviz ainda produz ótimas visualizações e suporta mais mecanismos de layout , então estou comparando subjetivamente Visão contra o mecanismo DOT do Graphviz, limitando-o apenas a DAGs e reduzindo-o ainda mais a uma lista de recursos restritos da linguagem DOT.

Sim, eu sei que é terrível comparar anos de experiência e ferramentas em torno da sequência de mais de 30 anos que é o Graphviz, mas para meu caso de uso restrito, é extremamente rápido. Aqui estão alguns tempos de parede no meu Macbook Pro M1 para renderização um gráfico bastante grande com aproximadamente 400 nós:

• Graphviz nativo: ~30 segundos
• Chrome (WASM) Graphviz: falhas*
• Chrome (Javascript) DagreJS: aproximadamente 10 segundos
• Cromo (WASM) Visão : ~1 segundo**

* Ele trava porque o sinalizador emscripten, ALLOW_MEMORY_GROWTH=1 , não está definido, limitando assim a memória total a 16 MB. Isso pode ser corrigido, mas não encontrei um projeto online que possa lidar com o gráfico em questão.

** O gráfico de exemplo é renderizado selecionando Example 14 na visualização do editor. Atualizar a página resultará na atualização da página e na obtenção de um 414 porque o URI que persiste no gráfico é muito grande. Estou trabalhando em uma solução melhor para armazenar gráficos maiores.

Armazenar gráficos em links

Você notará que ao fazer qualquer alteração no arquivo DOT, a URL atualiza imediatamente alguns parâmetros de consulta para armazenar o gráfico e as opções de layout, permitindo que você sempre faça referência a uma cópia de seus dados apenas armazenando o link!

Há um problema: gráficos grandes tendem a tornar o URI muito grande para AWS (onde Visão está hospedado atualmente) e outros balanceadores de carga.

Atualmente estou trabalhando em uma solução para lidar com gráficos maiores, mas enquanto isso, incluí algumas maneiras de persistir e armazenar gráficos:

• Copie um link incorporável que renderize automaticamente uma visualização que maximize o gráfico.

• Copie um snippet de iframe para incorporar em qualquer aplicativo que suporte sua renderização.

• Ou simplesmente baixe o SVG renderizado.

Aqui está um exemplo de como é a visualização do editor do rastreamento pprof para deflacionar :

Vá para a Visualização do Editor e carregue Example 42

Visualização de diferenças

Ocasionalmente, me peguei tentando comparar dois gráficos que gerei, então, enquanto fazia isso, adicionei um visualizador de diferenças para ver visualmente as alterações entre dois gráficos diferentes.

Legenda da cor:

• Vermelho: excluído
• Laranja: Modificado
• Verde: Adicionado

Aqui estão algumas fotos:

Clique em mim: alterando um ID de nó de “e” para “f”

Clique em mim: adicionando “cluster=true”

Direção futura

Visão ainda é um trabalho em andamento e, à medida que continua a evoluir, estou ciente de que a jornada de aperfeiçoamento desta ferramenta é tão dinâmica quanto o próprio campo de visualização de gráficos. Embora eu esteja orgulhoso do que Visão alcançou até agora, estou ainda mais entusiasmado com o seu potencial. É aí que entra você, leitor e potencial usuário.

Se você tiver algum comentário, sinta-se à vontade para me enviar uma mensagem no Gitter ou Discórdia .

Obrigado pela leitura - Se você gostou deste artigo, siga-o !

[1]: ER Gansner, E. Koutsofios, SC Norte e K.. -P. Vo, “Uma técnica para desenhar gráficos direcionados”, em IEEE Transactions on Software Engineering, vol. 19, não. 3, pp. 214–230, março de 1993, doi: 10.1109/32.221135.

Também publicado aqui