Spoiler: Use   para renderizar DAGs escritos na linguagem DOT Vizdom.dev  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  ferramenta que pode renderizar gráficos escritos na linguagem DOT — Perfeito!   Gráficoviz  Exceto…  Não funciona bem na web*  Eu preciso instalá-lo  Não gerencia arquivos DOT/GV online  Considerações  *Ok,   o Graphviz pode ser compilado para WebAssembly, e algumas pessoas talentosas conseguiram construir alguns projetos legais, como o do dreampuf  , Nikeee  , e magjac  - cada um com seu próprio toque. Ainda tenho dificuldade em incorporar essas renderizações sem exportá-las para um SVG (ou outro meio). tecnicamente   editor   edotor.net   editor  Por exemplo, quero armazenar meu gráfico em  simplesmente colando um link que renderiza automaticamente o gráfico.   Noção.so  eu poderia usar  que renderiza gráficos de forma bastante limpa e funciona surpreendentemente bem - é uma das muitas razões pelas quais  . Também posso incorporar gráficos no Notion/GitHub usando markdown, ótimo!   SereiaJS    GitHub 64k+ começa no  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á  o que é incrível para gerenciar diagramas   , 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!   Terrastruct.com feitos à mão  O problema  Quero renderizar saídas DOT geradas   - nenhuma das ferramentas parece me ajudar a atingir esse objetivo. programaticamente  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  para isso 🎉   aplicativo  …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  se aprofundando neste tema. Inspirado significativamente pelo(s) algoritmo(s) de layout DagreJS e pelo artigo esclarecedor “   ¹”, desenvolvi uma variante em Rust.   postagem no blog A Technique for Drawing Directed Graphs  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 (  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.   d3-graphviz  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.   Visão  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   visualizações e suporta mais  , então estou comparando subjetivamente  contra o mecanismo DOT do Graphviz, limitando-o apenas a DAGs e reduzindo-o ainda   a uma lista de recursos restritos da linguagem DOT. ótimas   mecanismos de layout   Visão mais  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  com aproximadamente 400 nós:   um gráfico bastante grande  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  está hospedado atualmente) e outros balanceadores de carga.   Visão  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   e carregue  Visualização do Editor Example 42  Visualização de diferenças  Ocasionalmente, me peguei tentando comparar dois gráficos que gerei, então, enquanto fazia isso, adicionei um  para ver visualmente as alterações entre dois gráficos diferentes.   visualizador de diferenças  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  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  alcançou até agora, estou ainda mais entusiasmado com o seu potencial. É aí que entra você, leitor e potencial usuário.   Visão   Visão  Se você tiver algum comentário, sinta-se à vontade para me enviar uma mensagem no  ou  .   Gitter   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

This post provides insights into new product. 

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

Render DAGs with Vizdom

Read My Stories

Este áudio é produzido no idioma original da história!

Veja por que você não deve usar Graphviz para DAGs: o que você deve usar em vez disso

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Telegram: a ponte da Crypto Island para o continente

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Telegram: a ponte da Crypto Island para o continente

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps