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í


¿Tiene un ejemplo de dicho diagrama, para aquellos de nosotros que no estamos familiarizados con GraphViz?
Matt Ball


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! :-)


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");

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



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


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.


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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.