JavaScript puro equivalente de Graphviz [cerrado]

139

¿Alguien sabe de una implementación pura basada en Javascript de los diagramas de flujo direccionales que GraphViz es capaz de generar? NO estoy interesado en resultados visuales bonitos, pero los cálculos para calcular la profundidad máxima de cada nodo, junto con el diseño de líneas bezier que están optimizadas para minimizar la cantidad de bordes que se cruzan cuando se trata de un gráfico en lugar de un árbol de información. Me gustaría ejecutar este código tanto dentro de un navegador; Soy consciente de que podría incrustar fácilmente Graphviz en mi servidor Node como una extensión, o incluso popen()hacerlo, y transmitir sobre la información gráfica en el .dotformato.

Como referencia, aquí hay una salida típica de GraphViz. Observe cómo los elementos se apilan y espacian para permitir que las líneas de conexión viajen entre los nodos, sin cruzarse (muy a menudo) o pasar a través de los nodos.

ingrese la descripción de la imagen aquí

javascript graphviz Armentage
fuente
¿Tiene un ejemplo de dicho diagrama, para aquellos de nosotros que no estamos familiarizados con GraphViz?
Matt Ball
¿Esto parece ser un duplicado del código de visualización Graph en javascript?
Daniel Pryden
3
Tal vez, revisándolo. Muchos comentarios y respuestas apuntan a herramientas de gráficos que no se parecen en nada a GraphViz, o solo son capaces de dibujar la salida de GraphViz, pero no pueden hacer el diseño por sí mismos.
Armentage

Respuestas:

84

Eche un vistazo a esta implementación pura de JavaScript de un renderizador de lienzo .dot:

http://ushiroad.com/jsviz/

La biblioteca no está documentada: el autor definitivamente debería publicitarla y documentarla más (lo contactaré para sugerirle que la publique en github, como mínimo).

Actualización : el código ha sido enviado a github: https://github.com/gyuque/livizjs

Actualización (14/2/2013) : ¡otro competidor ha surgido! cualquier persona interesada en el tema definitivamente debería echar un vistazo a la página de ejemplo de Viz.js y al repositorio de github .

Actualización (16/07/2020) : (siete años después) http://webgraphviz.com/ también es genial! :-)

Greg Sadetsky
fuente
1
Este proyecto se ve increíble, y es probablemente la mejor solución de todo lo que he visto, pero definitivamente requerirá un poco de investigación para descubrir cómo usarlo. Sin embargo, el código parece bastante razonable, por lo que puede no ser tan malo.
captncraig
Hasta ahora, esto es lo más parecido a lo que estaba buscando en la pregunta original. No es solo un RENDERER, también sabe cómo calcular el gráfico dirigido. ¿Está ejecutando DOT en un backend en alguna parte, o todo el algoritmo de generación de gráficos se está ejecutando en mi navegador?
Armentage
1
@Armentage, se ejecuta completamente en su navegador. Graphviz ha sido compilado a JavaScript, gracias a emscripten . El código fuente, aunque no está tan documentado como podría estar, ahora está afortunadamente (después de molestar al autor por Twitter y correo electrónico) ;-) disponible aquí . Bifurcar el proyecto y crear una API fácil de usar para él sería un primer gran paso ...!
Greg Sadetsky
55
Solo quería agregar la biblioteca Graph Dracula a la lista de candidatos. Puedes ver una demostración aquí . Calcula el gráfico y lo muestra (usando Raphael ); El código es corto y limpio.
Greg Sadetsky
Livizjs es una gran herramienta, pero tenga en cuenta que no es compatible con el lenguaje completo, como 'clusters'
SirLenz0rlot
37

Después de buscar por todas partes, finalmente encontré la respuesta.

La solución fue que alguien compilara Graphviz a Javascript usando llvm + emscripten. Aqui esta el link:

http://viz-js.com/

La fuente se puede encontrar en: https://github.com/mdaines/viz.js

Y para simplemente usar una página web:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");
Zachary Vorhies
fuente
Esto es exactamente lo que estaba buscando también
RobAu
66
Actualización: ¡hice un sitio de demostración que muestra cómo enganchar en viz.js es divertido y fácil! Compruébalo en www.webgraphviz.com
Zachary Vorhies
Los enlaces de github proporcionados están rotos
Jaime
2
github.com/mdaines/viz.js
Somu
19

Después de mirar todas las opciones, encontré viz.js ( https://github.com/mdaines/viz.js/ ) basado en jsviz y graphviz.js para tener una API utilizable desde una página web, y suficientes ejemplos para entender.

Jason Siefken
fuente
1
viz.js es excelente y muy fácil, no es que actualmente no sea compatible con etiquetas tipo html: graphviz.org/doc/info/shapes.html#html
SirLenz0rlot
11

Uno podría intentar convertir graphviz a javascript, tal como se hizo para el ejemplo de 'lector de PDF': https://github.com/kripken/emscripten

pedroteixeira
fuente
Esta es una sugerencia increíblemente genial. Estaba pensando en traducir el código a JS yo mismo ... ¡pero este truco de llvm es una locura hermosa!
Armentage
De hecho, he probado esto un par de intentos hasta ahora ... emscripten todavía es bastante joven, y la documentación es breve. Definitivamente es un gran proyecto para ver, puedo ver cómo podría proporcionar mucha potencia. Pero en este momento, si no eres el tipo que lo escribió, es algo difícil de manejar.
sintetizadorpatel
8

Este no es un reemplazo de graphviz listo, pero d3.js es una biblioteca que puede hacer varios diseños a partir de datos dados y sería una gran plataforma para implementar graphviz.

Aquí hay un ejemplo de diseños dirigidos por la fuerza, que es una forma de lo que hace graphviz.

Aquí hay un discurso sobre diseños con diapositivas interactivas increíblemente increíbles .

Para conocer el proyecto, los tutoriales son muy buenos.

w00t
fuente
1
github.com/cpettitt/dagre-d3 implementa el diagrama DOT en JavaScript. Puedes jugar con la demo en cpettitt.github.io/project/dagre-d3/latest/demo/… .
Arthur2e5