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

javascript graphviz Armentage
la source
Avez-vous un exemple d'un tel diagramme, pour ceux d'entre nous qui ne sont pas familiers avec GraphViz?
Matt Ball le
Cela semble être un double du code de visualisation Graph en javascript?
Daniel Pryden
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! :-)

Greg Sadetsky
la source
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");
Zachary Vorhies
la source
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
2
github.com/mdaines/viz.js
Somu
19

Après avoir examiné toutes les options, j'ai trouvé viz.js ( https://github.com/mdaines/viz.js/ ) basé sur jsviz et graphviz.js pour avoir une API utilisable à partir d'une page Web, et suffisamment d'exemples pour comprendre.

Jason Siefken
la source
1
viz.js est génial et très facile, non pas qu'il ne prend actuellement pas en charge les étiquettes de type html: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot
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

pedroteixeira
la source
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.

w00t
la source
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