Mira nuestra reseña de 5 de las bibliotecas gratuitas de diagramas más importantes escritas en Javascript

Top 5: las mejores bibliotecas de JavaScript de diagramas gratuitos

Algunas de estas bibliotecas tienen soporte de alto nivel para características avanzadas y otras presentan características de dibujo de bajo nivel, la mayoría de ellas de código abierto y otras con licencia BSD.

5. Mermaid

Github | Demo

Mermaid es un lenguaje de script simple similar a la rebaja para generar gráficos a partir de texto a través de javascript, generando un elemento SVG en el DOM con la rebaja especificada. Puede probarlo en línea usando el editor aquí .

Mermaid demo flowcharts

4. Flowchart

Github | Demo

Flowchart dibuja diagramas de flujo SVG simples a partir de la representación textual del diagrama.

Flowcharts demo

3. JS Sequence Diagrams

Github | Demo

JS Sequence Diagrams es una biblioteca de JavaScript simple para convertir texto en diagramas de secuencia UML vectoriales. Muy inspirado por websequencediagrams.com, que ofrece una solución en el servidor. Este complemento usa Jison para analizar el texto y Raphaël para dibujar la imagen.

Sequence diagrams demo

2. Cytoscape.js

Github | Demo

Cytoscape.js es una biblioteca de teoría de grafos de código abierto (también conocida como red) escrita en JavaScript. Puede utilizar Cytoscape.js para análisis y visualización de gráficos.

Cytoscape.js te permite mostrar y manipular fácilmente gráficos ricos e interactivos. Debido a que Cytoscape.js permite al usuario interactuar con el gráfico y la biblioteca permite que el cliente se conecte a los eventos del usuario, Cytoscape.js se integra fácilmente en tu aplicación, especialmente porque Cytoscape.js es compatible con navegadores de escritorio, como Chrome, y navegadores móviles. , como en el iPad. Cytoscape.js incluye todos los gestos que esperarías de inmediato, incluidos pellizcar para hacer zoom, selección de cuadro, panorámica, etc.

Cytoscape.js admite muchos casos de uso de teoría de grafos diferentes. Admite gráficos dirigidos, gráficos no dirigidos, gráficos mixtos, bucles, multigrafos, gráficos compuestos (un tipo de hipergrafo), etc.

Cytoscape.js también tiene en mente el análisis de gráficos: la biblioteca contiene muchas funciones útiles en teoría de gráficos. Puedes usar Cytoscape.js sin pensar en Node.js para hacer análisis de gráficos en la terminal o en un servidor web. Cytoscape.js es un proyecto de código abierto y cualquiera es libre de contribuir.

Cytoscape data visualization and diagrams

1. JointJS

GithubDemos

JointJS es una biblioteca JavaScript HTML 5 moderna para visualización e interacción con diagramas y gráficos. Se puede utilizar para crear diagramas estáticos o, lo que es más importante, herramientas de diagramación totalmente interactivas como editores de flujo de trabajo, herramientas de gestión de procesos, sistemas IVR, integradores de API, aplicaciones de presentación y más.

JointJS facilita la creación de herramientas visuales de varios tipos. La naturaleza impulsada por eventos junto con la arquitectura MVC de JointJS hace que sea fácil conectar cualquier tecnología de backend. (Te recomiendo encarecidamente utilizar las dependencias [jQuery, Backbone y Lodash]).

  • Varias formas (rect, círculo, elipse, texto, imagen, ruta, ERD, organigrama, FSA, UML, BPMN, PN, DEVS, ...)
  • Formas personalizadas a través de SVG o renderizadas mediante programación.
  • Elementos interactivos y enlaces.
  • Conexión de elementos de diagrama con enlaces.
  • Enlaces personalizables, sus puntas de flecha y etiquetas.
  • Suavizado de enlaces (interpolación de Bezier) y enrutamiento inteligente.
  • Los imanes / puertos (puntos de conexión de enlace) se pueden colocar básicamente en cualquier lugar.
  • Diagramas jerárquicos.
  • Serialización / deserialización hacia / desde formato JSON.
  • Altamente impulsado por eventos: puede reaccionar ante cualquier evento que suceda dentro del papel.
  • Toneladas de funciones matemáticas que operan en el espacio 2D.
  • Biblioteca SVG incluida.
  • Acercar / alejar.
  • Toque Asistencia.
  • Animaciones.
  • Filtros y degradados.
  • Soporte NodeJS.
  • Rápido: capacidad para renderizar cientos (o incluso miles) de elementos y enlaces con interacción instantánea.
  • Sistema de complementos flexible.
  • Arquitectura MVC.
  • Y mucho más.

JointJS diagrams

 

Extra

GOJs

Descargar versión de evaluación

GoJS es una biblioteca de JavaScript rica en funciones para implementar diagramas interactivos personalizados y visualizaciones complejas en plataformas y navegadores web modernos. GoJS facilita la construcción de diagramas JavaScript de nodos, enlaces y grupos complejos con plantillas y diseños personalizables.

GoJS ofrece muchas funciones avanzadas para la interactividad del usuario, como arrastrar y soltar, copiar y pegar, edición de texto en el lugar, información sobre herramientas, menús contextuales, diseños automáticos, plantillas, enlace de datos y modelos, etc. Gestión de estado transaccional y deshacer, paletas, descripciones generales, controladores de eventos, comandos y un sistema de herramientas extensible para operaciones personalizadas.

Sin embargo, esta es una biblioteca paga y está limitado al período de evaluación, pero debido a su genialidad, debe mencionarse en esta publicación.

GOJs diagrams

 


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores