Equivalente a JavaScript Pure Graphviz [fechado]

139

Alguém está ciente de uma implementação pura, baseada em Javascript, dos diagramas de fluxo direcional que o GraphViz é capaz de gerar? Eu não estou interessado na saída visual bonita, mas nos cálculos para descobrir a profundidade máxima de cada nó, juntamente com o layout das linhas bege que são otimizadas para minimizar o número de arestas que se cruzam quando você está lidando com um gráfico em vez de uma árvore de informação. Eu gostaria de executar esse código em um navegador; Estou ciente de que poderia facilmente incorporar o Graphviz ao meu servidor Node como uma extensão ou até popen()mesmo transmiti-lo por informações gráficas no .dotformato.

Para referência, aqui está uma saída típica do GraphViz. Observe como os elementos são empilhados e espaçados para permitir que as linhas de conexão viajem entre os nós, sem cruzar (com muita frequência) ou passar pelos nós.

insira a descrição da imagem aqui

javascript graphviz Armentage
fonte
Você tem um exemplo desse diagrama, para aqueles que não estão familiarizados com o GraphViz?
Matt Bola
Isso parece ser uma duplicata do código de visualização
Daniel Pryden
3
Talvez - verificando. Muitos comentários e respostas estão apontando para ferramentas de gráficos que não se parecem em nada com o GraphViz, ou são capazes apenas de desenhar a saída do GraphViz, mas não podem fazer o layout por si mesmas.
Armentage

Respostas:

84

Dê uma olhada nesta implementação JavaScript pura de um renderizador de tela .dot:

http://ushiroad.com/jsviz/

A biblioteca não está documentada - o autor definitivamente deve publicá-la e documentá-la mais (entrarei em contato com ele para sugerir que ele a publique no github, no mínimo).

Atualização : o código foi enviado ao github: https://github.com/gyuque/livizjs

Atualização (14/2/2013) : outro concorrente surgiu! Qualquer pessoa interessada no assunto deve definitivamente dar uma olhada de Viz.js página de exemplo e github repo .

Atualização (16/7/2020) : (sete anos depois) http://webgraphviz.com/ também é ótima! :-)

Greg Sadetsky
fonte
1
Este projeto parece incrível e provavelmente é a melhor solução de tudo que eu já vi, mas com certeza será necessário aprofundar a fonte para descobrir como usá-lo. O código parece bastante razoável, portanto, pode não ser tão ruim assim.
captncraig
Até agora, este é o mais próximo do que eu estava procurando na pergunta original. Não é apenas um RENDERER, ele também sabe calcular o gráfico direcionado. Ele está executando o DOT em um back-end em algum lugar ou todo o algoritmo de geração de gráficos está sendo executado no meu navegador?
Armentage
1
@Armentage, está sendo executado inteiramente no seu navegador. O Graphviz foi compilado para JavaScript, graças ao emscripten . Felizmente, o código fonte, embora não esteja tão documentado quanto agora, agora está feliz (depois de incomodar o autor pelo Twitter e por e-mail) ;-) disponível aqui . Bifurcar o projeto e criar uma API fácil de usar seria um primeiro grande passo ..!
18711 Greg Gregetsky
5
Só queria adicionar a biblioteca Graph Dracula à lista de candidatos. Você pode ver uma demonstração aqui . Ele calcula o gráfico e o exibe (usando Raphael ); o código é curto e limpo.
22812 Greg Sadetsky
O Livizjs é uma ótima ferramenta, mas observe que ele não oferece suporte ao idioma completo, como 'clusters'
SirLenz0rlot 4/13/13
37

Depois de pesquisar muito e longe, finalmente encontrei a resposta.

A solução foi que alguém compilou Graphviz para Javascript usando llvm + emscripten. Aqui está o link:

http://viz-js.com/

A fonte pode ser encontrada em: https://github.com/mdaines/viz.js

E para simplesmente usar uma página da Web, use:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
Zachary Vorhies
fonte
Este é exatamente o que eu estava procurando também
Robau
6
Atualização: criei um site de demonstração mostrando como é fácil e divertido conectar-se ao viz.js! Verifique-o em www.webgraphviz.com
Zachary Vorhies
Os links github fornecidas são quebrados
Jaime
2
github.com/mdaines/viz.js
Somu
19

Depois de examinar todas as opções, achei o viz.js ( https://github.com/mdaines/viz.js/ ) baseado no jsviz e graphviz.js para realmente ter uma API utilizável em uma página da Web e exemplos suficientes para Compreendo.

Jason Siefken
fonte
1
viz.js é grande e muito fácil, não que atualmente não suporta html-como etiquetas: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot
11

Pode-se tentar converter graphviz para javascript, assim como foi feito no exemplo 'PDF reader': https://github.com/kripken/emscripten

pedroteixeira
fonte
Essa é uma sugestão insanamente ótima. Eu estava pensando em tentar traduzir o código para JS eu mesmo ...... mas esse truque do llvm é uma loucura linda!
Armentage
Na verdade, eu fiz algumas tentativas até agora .. emscripten ainda é bem jovem, e a documentação é resumida. Definitivamente, um ótimo projeto para assistir, posso ver como ele poderia fornecer muita energia. Mas agora, se você não é o cara que escreveu, é um pouco pesado.
Sintetizadorpatel
8

Esta não é uma substituição pronta para o graphviz, mas o d3.js. é uma biblioteca que pode fazer vários layouts a partir de dados fornecidos e seria uma ótima plataforma para implementar o graphviz.

Aqui está um exemplo de layouts direcionados à força, que é uma forma do que o graphviz faz.

Aqui está um discurso sobre layouts com slides interativos incrivelmente impressionantes .

Para conhecer o projeto, os tutoriais são muito bons.

w00t
fonte
1
github.com/cpettitt/dagre-d3 implementa o diagrama DOT em JavaScript. Você pode jogar com a demo em cpettitt.github.io/project/dagre-d3/latest/demo/… .
precisa saber é o seguinte