- Para visualizar o processo de compilação de JavaScript e WebAssembly no motor SpiderMonkey, a equipe reformulou completamente a ferramenta interna e implementou a geração de grafos interativos
- O iongraph baseado em Graphviz anterior tinha layout instável e estrutura pouco intuitiva, o que reduzia a eficiência de depuração; para substituí-lo, foi projetado internamente um novo algoritmo de layout
- O novo algoritmo simplifica o método de Sugiyama para representar com clareza estruturas de loop e implementar um layout estável e rápido em menos de 1000 linhas de código JavaScript
- O grafo usa arestas retas no estilo de diagrama ferroviário para melhorar a legibilidade e alcança renderização milhares de vezes mais rápida que o Graphviz
- A ferramenta está integrada ao Firefox Profiler e há planos de expansão futura, incluindo busca e visualização de registradores
Reformulação da ferramenta de visualização do SpiderMonkey
- Foi criada uma nova ferramenta para visualizar os grafos internos gerados pelo compilador de otimização Ion do SpiderMonkey
- O usuário pode inserir código JavaScript em uma página web e explorar em tempo real, por meio de grafos, o processo de otimização de funções
- O grafo permite verificar mudanças etapa por etapa com arrastar, zoom e controle deslizante
- O iongraph baseado em Graphviz anterior gerava saída em PDF, mas não correspondia à estrutura do código-fonte e sofria com grande instabilidade na saída
- Pequenas mudanças no código alteravam muito a posição dos nós, tornando difícil comparar entre passes
- A estrutura de loops e condicionais ficava visualmente distorcida, dificultando entender o fluxo de controle
Limites do Graphviz e a nova abordagem
- O algoritmo de Sugiyama do Graphviz é adequado para otimização de grafos gerais, mas não reflete as características de um grafo de fluxo de controle (CFG)
- Loops de JavaScript e WebAssembly têm apenas um ponto de entrada e apresentam fluxo de controle redutível (reducible)
- A equipe do SpiderMonkey aproveitou essas restrições para projetar um algoritmo especializado simplificado
- Remoção de ciclos: ignorar back-edges de loop
- Hierarquização (Leveling): posicionar os blocos após o loop mais abaixo para refletir o fluxo do código
- Sem minimização de cruzamentos: priorizar estabilidade fixando a ordem dos desvios true/false
- Preservação da estrutura em árvore de loops: representar visualmente com clareza loops aninhados
- Como resultado, foi alcançado um layout simples, rápido e estável, com implementação inicial de cerca de 1000 linhas em JavaScript
Etapas do algoritmo de layout do iongraph
- Etapa 1: Layering
- Organiza os blocos por camada e reflete as relações entre dentro e fora do loop
- Após o término do loop, os blocos são colocados abaixo pela altura total do loop
- Etapa 2: Criação de nós dummy
- Adiciona nós dummy em arestas que atravessam várias camadas para evitar conflitos visuais
- Arestas com o mesmo destino são mescladas para reduzir ruído visual
- Etapa 3: Alinhamento de arestas (Straighten)
- Alinha nós pai e filho para manter linhas verticais, aplicando indentação de loop
- Nós dummy também participam do alinhamento para evitar sobreposição e preservar a estrutura
- Etapa 4: Rastreamento de arestas horizontais
- Organiza as arestas horizontais por trilhas (tracks) para evitar sobreposição
- Separa acima e abaixo conforme a direção da aresta e agrupa as arestas que podem ser mescladas
- Etapa 5: Verticalize
- Atribui coordenadas Y a cada camada para distribuição uniforme em altura e melhor legibilidade
- Etapa 6: Renderização (Render)
- Usa arestas retas no estilo de diagrama ferroviário
- As arestas se cruzam apenas na vertical e na horizontal, deixando direção e estrutura claras
Efeitos de um algoritmo simples
- Em vez de otimizações complexas, um posicionamento previsível baseado em regras garante legibilidade e estabilidade
- Ordem fixa dos nós e simplificação das arestas mantêm consistência entre passes
- Ao excluir um constraint solver, a equipe implementou uma estrutura mais fácil de entender por humanos
- Isso permitiu um design orientado ao significado, como o posicionamento interno dos loops e o deslocamento para baixo dos blocos subsequentes
- Melhoria de desempenho: um grafo de função do zlib que levava 10 minutos no Graphviz passa a ser renderizado em 20 milissegundos
- Isso garante velocidade milhares de vezes maior e melhor explorabilidade
Próximos planos
- A integração do iongraph ao Firefox Profiler foi concluída, permitindo verificar o grafo durante a análise de desempenho
- Atualmente, ele só pode ser usado em builds do shell do SpiderMonkey e não está incluído nas builds do navegador
- Propostas de recursos futuros
- Recursos avançados de navegação, busca, visualização da alocação de registradores etc.
- Não há um roadmap definido, e contribuições open source são bem-vindas
- Para testes locais, defina
IONFLAGS=logs para gerar /tmp/ion.json e depois carregue o arquivo na
distribuição independente
- O código-fonte está disponível no GitHub, e é possível falar diretamente com os desenvolvedores pelo chat Matrix
1 comentários
Comentários do Hacker News
Para comparar com precisão, a comparação não é com o Graphviz inteiro, mas com o dot(1)
O Graphviz é um framework de visualização que inclui vários motores de layout (dot, neato, fdp, sfdp, circo, twopi etc.)
Se esse novo algoritmo fosse incorporado ao Graphviz, seria realmente muito legal
Veja a documentação relacionada em descrição da linguagem Graphviz e documentação do motor de layout dot
Ele pode funcionar bem em grafos de fluxo de controle (CFG) com reducible control flow, mas parece haver muitas exceções complexas
Além disso, o iongraph é baseado em JavaScript, então, para integrá-lo ao Graphviz, seria preciso convertê-lo para C com uma ferramenta como o Claude
A capacidade de examinar diretamente a implementação original de um algoritmo parece mesmo um superpoder
Como alguém que já fez visualizações complexas com Graphviz, no começo me surpreendeu que alguém tivesse reimplementado isso do zero
Mas, depois de olhar a estrutura do algoritmo, tive a percepção de que talvez ele fosse mais simples do que parecia
Ainda assim, continua sendo difícil saber da complexidade oculta antes de concluir a implementação de fato
Especializar um algoritmo geral para um domínio de problema específico pode produzir resultados muito melhores
Mas, na maioria dos casos, por conveniência, acabamos usando algoritmos genéricos como estão
Projetar sistemas sob medida para uma aplicação específica traz grandes ganhos em desempenho, escalabilidade e tolerância a falhas
Mas, quando você busca uma melhoria de 1000x, 1 ou 2 anos passam num instante
Sistemas gerais de layout de grafos precisam lidar com uma variedade muito maior de casos, então inevitavelmente ficam mais complexos
Por isso, acho uma boa solução de compromisso analisar a entrada, usar um algoritmo rápido em casos especiais e, no restante, um algoritmo geral com garantias
Foi um ótimo texto. Só para constar, o dot do Graphviz não é uma implementação pura do algoritmo de Sugiyama
A implementação real está descrita em detalhe no artigo do site
Ao olhar as imagens que comparam dot e iongraph em grafos grandes, o dot parece otimizado para minimizar a área, enquanto o iongraph não
Visualizações de grafos grandes parecem bonitas, mas na prática raramente são úteis
A visualização só funciona até algumas dezenas de nós; acima disso, a complexidade das arestas dificulta demais o entendimento
No fim, isso só funciona bem em exemplos simples e, em ambientes complexos, acaba mais atrapalhando do que ajudando
A maioria dos problemas pode ser reduzida a unidades menores
Ainda assim, o Graphviz não é muito agradável esteticamente nem em grafos pequenos, enquanto o iongraph tem legibilidade das linhas muito melhor
No longo prazo, acho que serão necessários elementos interativos como busca e recursos de destacar/ocultar
É frustrante a limitação de diagramas que não conseguem exportar nem receber links
O Mermaid também permite links em texto, mas os links em diagramas são limitados
Vale conferir também a discussão relacionada no StackOverflow
Precisamos de ferramentas em que esse tipo de recurso seja considerado funcionalidade de primeira classe desde a fase de design
A verdadeira força do Graphviz é a linguagem dot
Grafos definidos em dot têm excelente compatibilidade entre várias ferramentas, e a sintaxe é simples e fácil de ler
Alternativas como Mermaid apareceram, mas o dot ainda parece destinado a continuar por muito tempo como formato padrão
Foi um texto realmente muito legal
Fiquei curioso se técnicas como essas também foram usadas no motor de layout TALA do D2
Veja exemplos do TALA
Se você se interessa por desenho de grafos, recomendo as aulas do Will Evans (link)
Eu já contribuí com um bugfix para o lexer Dot do Open Graph Drawing Framework (OGDF),
e o OGDF implementa algoritmos mais rápidos e com menos cruzamentos do que o Graphviz
Pela minha experiência, os resultados do OGDF eram muito mais limpos
Para o histórico do PR relacionado, veja o link no GitHub
Interessante. Fiquei curioso sobre como executar os exemplos
O ponto forte deste projeto é o suporte à exploração interativa pensado para o ambiente de cliente web
Como o layout é especializado em grafos de fluxo de controle (CFG), ele permite uma visualização adaptada ao domínio
O Graphviz também tem recursos de polylines e controle da ordem das arestas, mas a documentação é fraca
Seria bom integrar o algoritmo de roteamento de arestas de Brandes e Kopf
O Graphviz é um projeto com quase 40 anos e hoje é mantido por alguns voluntários de segunda geração
Fazer ferramentas sempre foi um mercado difícil, e os usuários são inteligentes, mas pertencem a departamentos com orçamentos pequenos
É uma pena a lentidão no avanço das ferramentas declarativas de diagramas 2D
Quem trabalha nessa área sempre merece um +1 de apoio
Eu também já usei mermaid e graphviz, mas no fim sempre volto para o FigJam — a legibilidade e o acabamento visual são melhores
O graphviz é um binário enorme, e o mermaid depende da renderização SVG no navegador, o que incomoda
O que precisamos é simplesmente de uma ferramenta para criar diagramas facilmente por texto
Acho que a abordagem apresentada pelo autor é uma boa tentativa de controlar esse trade-off
Tirando o fato de que ela não tratava loops, fiquei satisfeito
A saída em SVG/HTML é vantajosa para ajustar estilo e copiar conteúdo
Se você quer uma ferramenta de diagramas baseada em texto, recomendo o TikZ
Veja a wiki do TikZ
Mas ele não oferece o feedback visual imediato de algo como o FigJam
Não gostei do excesso de dependências e da falta de consistência do código do mermaid
Em vez disso, o nomnoml (link) tem código mais limpo, e também existe o graphre portado para Typescript (link)
Para usar mermaid com resvg-js, seria necessário refatorar a parte relacionada à medição da largura de texto em SVG