Équivalent de Graphviz en JavaScript pur

Question

Quelqu'un a-t-il connaissance d'une implémentation pure, basée sur Javascript, des diagrammes de flux directionnels que GraphViz est capable de générer ? Je ne suis PAS intéressé par les jolis résultats visuels, mais par 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 lorsqu'on a affaire à un graphique plutôt qu'à un arbre d'informations. J'aimerais 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 dans un navigateur Web. popen() et de transmettre les informations sur les graphiques dans le .dot format.

À titre de référence, voici une sortie typique de GraphViz. 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 les nœuds.

Answer 1

Jetez un coup d'œil à cette mise en œuvre purement JavaScript d'un moteur de rendu de toile .dot :

http://ushiroad.com/jsviz/

La bibliothèque n'est pas documentée - l'auteur doit absolument la faire connaître et la documenter davantage (je vais le contacter pour lui suggérer de la mettre sur github, au minimum).

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

Mise à jour (14/2/2013) Les personnes intéressées par le sujet devraient absolument jeter un coup d'œil à la page de Viz.js sur le site Web de l'entreprise. page d'exemple y répertoire Github .

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

Answer 2

Après avoir cherché partout, j'ai enfin trouvé la réponse.

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

http://viz-js.com/

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

Et pour obtenir simplement une page web en haut de l'utilisation :

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

Answer 3

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 depuis une page web, et suffisamment d'exemples pour comprendre.

Answer 4

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

Answer 5

Il ne s'agit pas d'un remplacement de graphviz prêt à l'emploi, mais de d3.js est une bibliothèque qui permet de réaliser diverses mises en page à partir de données données et constitue une excellente plateforme pour mettre en œuvre Graphviz.

Voici un exemple d'agencements dirigés par la force ce qui est une forme de ce que fait Graphviz.

Voici un discours sur les mises en page avec de superbes diapositives interactives .

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