Equivalent pur JavaScript Graphviz [fermé]


139

Quelqu'un est-il au courant d'une implémentation pure et basée sur Javascript des diagrammes de flux directionnels que GraphViz est capable de générer? Je ne suis PAS intéressé par la sortie de jolis visuels, mais les calculs pour déterminer la profondeur maximale de chaque nœud, ainsi que la disposition des lignes de Bézier qui sont optimisées pour minimiser le nombre d'arêtes qui se croisent lorsque vous traitez avec un graphique plutôt qu'un arbre d'information. Je voudrais exécuter ce code à la fois dans un navigateur; Je suis conscient que je pourrais facilement intégrer Graphviz dans mon serveur Node en tant qu'extension, ou même popen()lui et diffuser des informations graphiques dans le .dotformat.

Pour référence, voici une sortie GraphViz typique. Notez comment les éléments sont empilés et espacés pour permettre aux lignes de connexion de se déplacer entre les nœuds, sans se croiser (très souvent) ni passer par des nœuds.

entrez la description de l'image ici


Avez-vous un exemple d'un tel diagramme, pour ceux d'entre nous qui ne sont pas familiers avec GraphViz?
Matt Ball le


3
Peut-être - vérifier. De nombreux commentaires et réponses pointent vers des outils de création de graphiques qui ne ressemblent en rien à GraphViz, ou qui sont uniquement capables de dessiner une sortie GraphViz, mais ne peuvent pas faire la mise en page eux-mêmes.
Armentage

Réponses:


84

Jetez un œil à cette implémentation JavaScript pure d'un moteur de rendu de canevas .dot:

http://ushiroad.com/jsviz/

La bibliothèque n'est pas documentée - l'auteur devrait certainement la publier et la documenter davantage (je le contacterai pour lui suggérer de la mettre sur github, au moins).

Mise à jour : le code a été poussé sur github: https://github.com/gyuque/livizjs

Mise à jour (14/2/2013) : un autre concurrent est apparu! toute personne intéressée par le sujet devrait absolument jeter un œil à la page d'exemple de Viz.js et au repo github .

Mise à jour (16/07/2020) : (sept ans plus tard) http://webgraphviz.com/ est également génial! :-)


1
Ce projet a l'air incroyable et est probablement la meilleure solution de tout ce que j'ai vu, mais il faudra certainement creuser dans la source pour savoir comment l'utiliser. Le code semble assez raisonnable, donc ce n'est peut-être pas si mal.
captncraig

Jusqu'à présent, c'est ce qui se rapproche le plus de ce que je recherchais dans la question initiale. Ce n'est pas seulement un RENDERER, il sait également calculer le graphe orienté. Exécute-t-il DOT sur un backend quelque part, ou tout l'algorithme de génération de graphes est-il exécuté sur mon navigateur?
Armentage

1
@Armentage, il fonctionne entièrement dans votre navigateur. Graphviz a été compilé en JavaScript, grâce à emscripten . Le code source, bien que pas aussi documenté qu'il pourrait l'être, est maintenant heureusement (après avoir harcelé l'auteur sur Twitter et e-mail) ;-) disponible ici . Bifurquer le projet et créer une API facile à utiliser serait une première étape formidable ..!
Greg Sadetsky

5
Je voulais juste ajouter la bibliothèque Graph Dracula à la liste des candidats. Vous pouvez voir une démo ici . Il calcule le graphique et l'affiche (en utilisant Raphael ); le code est court et propre.
Greg Sadetsky

Livizjs est un excellent outil, mais notez qu'il ne prend pas en charge le langage complet, tel que les `` clusters ''
SirLenz0rlot

37

Après avoir cherché loin et bas, j'ai finalement trouvé la réponse.

La solution était que quelqu'un croise Graphviz en Javascript en utilisant llvm + emscripten. Voici le lien:

http://viz-js.com/

La source peut être trouvée à: https://github.com/mdaines/viz.js

Et pour simplement utiliser une page Web:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

C'est exactement ce que je cherchais aussi
RobAu

6
Mise à jour: J'ai créé un site de démonstration montrant à quel point l'accrochage dans viz.js est amusant et facile! Découvrez-le sur www.webgraphviz.com
Zachary Vorhies

Les liens github fournis sont rompus
Jaime



11

On pourrait essayer de convertir graphviz en javascript, comme cela a été fait pour l'exemple du 'lecteur PDF': https://github.com/kripken/emscripten


C'est une suggestion incroyablement géniale. Je pensais essayer de traduire moi-même le code en JS ... mais cette astuce llvm est une belle folie!
Armentage

J'en ai fait quelques essais jusqu'à présent. Emscripten est encore assez jeune, et la documentation est brève. Certainement un excellent projet à regarder, je peux voir comment il pourrait fournir beaucoup de puissance. Mais pour le moment, si vous n'êtes pas celui qui l'a écrit, c'est un peu difficile à manier.
synthesizerpatel

8

Ce n'est pas un remplacement de graphviz prêt à l'emploi, mais d3.js est une bibliothèque qui peut faire diverses mises en page à partir de données données et serait une excellente plate-forme pour implémenter graphviz.

Voici un exemple de dispositions dirigées par la force qui est une forme de ce que fait graphviz.

Voici un discours sur les mises en page en avec des diapositives interactives incroyablement impressionnantes .

Pour connaître le projet, les tutoriels sont très bons.


1
github.com/cpettitt/dagre-d3 implémente le diagramme DOT en JavaScript. Vous pouvez jouer avec la démo sur cpettitt.github.io/project/dagre-d3/latest/demo/… .
Arthur2e5

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.