w3schools sheet cheat change javascript diagram draw2d jointjs gojs

sheet - Biblioteca de diagramas de Javascript



dom element (3)

Estoy buscando una buena biblioteca de diagramas de JavaScript para un proyecto, puede ser comercial.

Requisitos obligatorios:

  • Resalte las líneas y componentes conectados al hacer clic en un componente (o al desplazar el mouse)
  • Posibilidad de cambiar la imagen de un componente (para representar un grupo de componentes)
  • Acercar / alejar capacidades
  • Ser capaz de definir un comportamiento personalizado para soportar el arrastre del lado izquierdo del lado derecho
  • Posibilidad de generar un mapa minimizable enlazable del diagrama.

Hasta ahora revisé GoJs, JointJS y Draw2D, JointJS parecía el más adecuado, pero no estoy seguro. También la documentación y la comunidad es importante. Entonces, si alguien ha experimentado con una de esas bibliotecas u otras bibliotecas, cuénteme sobre su experiencia.

Ayúdame a elegir la biblioteca adecuada para el proyecto con las capacidades que mencioné.


Fuera de tema, ya que la pregunta es, hemos estado construyendo mxGraph desde 2005. Puede tener una idea de las capacidades en draw.io


Recomiendo altamente GoJS y realmente disfruto construyendo aplicaciones con él. Dan muchos más examples que cualquier otro marco de diagramación que pueda encontrar.

También le permiten utilizar la API completa a modo de prueba durante el tiempo que desee.


Lanzaré los yFiles comerciales para HTML , que, a mi entender, es la solución de dibujo gráfico más completa para la plataforma HTML5 (aunque no es compatible con IE8):

El resaltado es una característica incorporada y puede personalizar fácilmente el resaltado con lienzos personalizados o dibujos SVG / CSS. La demostración del visor de gráficos muestra esta función cuando se desplaza sobre los elementos, por ejemplo,

Puede usar cualquier visualización que desee para sus entidades y pueden cambiar según los datos externos, el nivel de zoom, el tiempo, etc. La demostración del espectador que se muestra arriba también muestra esta función. Se utiliza un estilo de nivel de detalle para los nodos en la demostración de organigrama

El zoom, por supuesto, es compatible.

Las interacciones de los usuarios se pueden personalizar en gran medida. Por favor, vea las demos con el prefijo "demo.yfiles.input" en la página de demostración .

Un minimapa personalizable ("descripción general") también es compatible y se muestra en las demostraciones anteriores.

Se dice que yFiles for HTML tiene la mejor documentación; consúltelo en la documentación en línea .

Sin embargo, al ser un producto con soporte comercial que no es gratuito, no hay una gran comunidad. Pero el soporte comercial debería hacer de este un problema menor.

Divulgación: trabajo para la compañía que crea esa biblioteca, sin embargo, en SO no represento a mi empleador.