JavaScript Diagram – Control potente y rico
- Visualice, cree y edite diagramas interactivos.
- Construya diagramas, BPMN y mapas mentales.
- Cargue nodos con rendimiento óptimo.
- Organice nodos en diseños complejos.
- Experimente interacción y edición fluida.
Quick Overview Video
Trusted by the world’s leading companies
Descripción general
El JavaScript Diagram es una biblioteca de Diagrams de arquitectura rica en funciones para visualizar, crear y editar Diagrams interactivos. Admite la creación de Diagrams de flujo, organigramas, mapas mentales y gráficos BPMN, ya sea a través de código o de una interfaz visual.
¿Por qué elegir el JavaScript Diagram de Syncfusion?
Diseño automático
Organice automáticamente los nodos según un algoritmo de diseño predefinido.
Enlace de datos sin problemas
Rellene Diagrams con nodos y conectores creados y posicionados basándose en datos de fuentes de datos. Sin tener que escribir ningún código, convierta, mapee y consuma datos fácilmente en cualquier formato en el Diagram estableciendo algunas propiedades.
Edición interactiva
El JavaScript Diagram le permite desplazarse y hacer zoom, ajustar, deshacer y rehacer, plantilla, cambiar el tamaño y rotar interactivamente.
Se adapta a cualquier resolución
El Diagram tiene un diseño altamente receptivo y un diseño optimizado para computadoras de escritorio, pantallas táctiles y teléfonos. Funciona bien en todos los teléfonos móviles que utilizan iOS, Android o Windows OS.
Galería de símbolos reutilizables
La SymbolPalette muestra una colección de paletas. Una paleta muestra un conjunto de nodos y conectores que puede arrastrar y soltar en el Diagram.
Cree sus propias formas de plantilla
Visualice cualquier objeto gráfico utilizando nodos que se puedan organizar y manipular en una página de Diagram al mismo tiempo. El Diagram le permite agregar diferentes tipos de nodos.
Temas atractivos y personalizables
Diseño de vanguardia con varios temas incorporados, como Fluent, Tailwind CSS, Bootstrap, Material y Fabric. Utilice la herramienta en línea Theme Studio para personalizar fácilmente los temas del Diagram.
Globalización y localización
Permita que usuarios de diferentes lugares utilicen el componente formateando fechas, monedas y números para que se ajusten a sus preferencias.
Diagram de IA para un diseño sin esfuerzo
Genere elementos visuales a partir de texto sin formato utilizando nuestro componente de Diagram compatible con IA. Cree, edite y comprenda Diagrams complejos rápidamente.
-
Diagrams inteligentes a partir de texto: describa su concepto y deje que la IA construya el Diagram por usted.
- Aprenda a crear Diagrams inteligentes a partir de texto
Ejemplo de código de JavaScript Diagram
Comience fácilmente con el JavaScript Diagram utilizando unas pocas líneas de código HTML y TS como se muestra a continuación. Explore también nuestro Ejemplo de JavaScript Diagram que le muestra cómo renderizar y configurar un Diagram en JavaScript.
<div class="control-section">
<div class="content-wrapper">
<div id="element">
</div>
</div>
</div>import { Diagram } from '@syncfusion/ej2-diagrams';
let diagram: Diagram = new Diagram({
width: '100%', height: '600px'
});
diagram.appendTo('#element');Diagram de flujo
La JavaScript Diagram Library proporciona todas las formas estándar de Diagrams de flujo como objetos listos para usar para construir Diagrams de flujo, lo que facilita su adición a una superficie de Diagram con una sola llamada.
Organigrama
Organice automáticamente las posiciones de los nodos padre e hijo con un algoritmo de diseño automático incorporado específicamente diseñado para organigramas.
Mapa mental
El algoritmo de diseño automático también está diseñado para Diagrams de mapas mentales. Puede definir qué nodo debe estar en el centro y qué nodos deben colocarse alrededor del nodo central en la superficie del Diagram.
Nodos
Visualice cualquier objeto gráfico utilizando nodos, que se pueden organizar y manipular al mismo tiempo en una página de Diagram. Permiten lo siguiente:
- Utilice muchas formas estándar predefinidas.
- Cree y agregue formas personalizadas fácilmente.
- Personalice completamente la apariencia de un nodo.
- Diseñe una plantilla de interfaz de usuario de nodo y reutilícela en varios nodos.
Conectores
Un conector representa una relación entre dos nodos.
Tipos
El JavaScript Diagram con una rica interfaz de usuario proporciona tipos de conectores rectos, ortogonales, polilíneas y curvos. Puede elegir cualquiera de estos según el tipo de Diagram o la relación entre los nodos conectados.
Puenteo o saltos de línea
Utilice el puenteo (saltos de línea) para ilustrar la ruta de un conector, lo que facilita la lectura de dónde se superponen los conectores en un Diagram denso.
Puntas de flecha
Utilice diferentes tipos de puntas de flecha predefinidas para ilustrar la dirección del flujo en los Diagrams de flujo. También puede construir sus propias puntas de flecha personalizadas.
Apariencia
Al igual que los nodos, la apariencia del conector también se puede personalizar como desee. El control de JavaScript Diagram proporciona un amplio conjunto de propiedades a través de las cuales puede personalizar el color, el grosor, la apariencia de guiones y puntos, las esquinas e incluso los adornos del conector.
Puertos (puntos de conexión)
Conecte los conectores a lugares específicos de un nodo a través de diferentes tipos de puertos o puntos de conexión.
Etiquetas
Se puede mostrar información adicional agregando texto o etiquetas en nodos y conectores.
Editar
Puede agregar y editar texto en tiempo de ejecución y marcarlo como de solo lectura si no debe editarse.
Múltiples etiquetas
Agregue cualquier número de etiquetas y alinéelas individualmente.
Alineación
Las etiquetas incluyen sofisticadas opciones de alineación: Colocar dentro o fuera de un nodo, o en el extremo de origen o destino de un conector. Alinear automáticamente cuando un nodo o conector se mueve.
Funciones interactivas
Utilice las funciones interactivas para mejorar la experiencia de edición de un Diagram en tiempo de ejecución. Además, puede editar fácilmente un Diagram con interfaces de mouse, pantalla táctil o teclado.
Seleccionar y arrastrar
Seleccione uno o más nodos, conectores o anotaciones y edítelos usando pulgares o controladores.
Cambiar tamaño
Puede cambiar el tamaño de un nodo en ocho direcciones diferentes y bloquear las relaciones de aspecto de un nodo para mantener su forma. También puede cambiar el tamaño de varios objetos al mismo tiempo.
Deshacer y rehacer
No se preocupe cuando edite por error, los comandos de deshacer y rehacer ayudan a corregir fácilmente los cambios recientes.
Portapapeles
Corte, copie, pegue o duplique objetos seleccionados dentro y entre Diagrams.
Orden Z
Cuando varios objetos se superponen, el orden Z controla qué objeto está en la parte superior y cuál en la parte inferior.
Ajustar
Alinee con precisión nodos, conectores y anotaciones mientras arrastra simplemente ajustándose a las líneas de cuadrícula u objetos más cercanos.
Agrupación
Puede combinar varios nodos en un grupo y luego interactuar con ellos como un solo objeto. También son posibles los grupos anidados con nuestro control de JavaScript Diagram.
Comandos rápidos
Los comandos de uso frecuente como eliminar, conectar y duplicar se pueden mostrar como botones cerca de un selector. Esto facilita a los usuarios realizar esas operaciones rápidamente en lugar de buscar los botones correctos en una caja de herramientas.
Alineación
Nuestra JavaScript Diagram Library tiene comandos de alineación predefinidos que le permiten alinear los nodos y conectores de los objetos seleccionados con respecto al límite de selección.
Comandos de espaciado
Los comandos de espaciado le permiten colocar objetos seleccionados en el Diagram a intervalos iguales entre sí.
Comandos de tamaño
Utilice los comandos de tamaño para dimensionar igualmente los nodos seleccionados con respecto al primer objeto seleccionado.
Comandos de alineación
Todos los nodos o conectores de la lista de selección se pueden alinear a la izquierda, derecha o centro horizontalmente, o alinear en la parte superior, inferior o medio verticalmente con respecto al límite de selección.
Diseño automático
Organice los nodos automáticamente según un algoritmo de diseño predefinido. Cuenta con un árbol jerárquico, árbol radial y diseños simétricos incorporados.
Regla
Las reglas le permiten medir la distancia de los nodos o conectores desde el origen de la página. Esto es especialmente útil para crear modelos a escala.
Paleta de símbolos
El control de JavaScript Diagram incluye una galería de plantillas, símbolos reutilizables y nodos que se pueden arrastrar a la superficie de un Diagram.
Panel de descripción general
El panel de descripción general le permite mejorar la experiencia de navegación al explorar Diagrams grandes. Muestra una pequeña vista previa de la página completa del Diagram que permite a los usuarios hacer zoom y desplazarse dentro de ella.
Herramientas de dibujo
Dibuje todo tipo de nodos incorporados y conéctelos con conectores de forma interactiva con solo hacer clic y arrastrar en el área de dibujo.
Herramientas de zoom y panorámica
Vea un Diagram grande de cerca o asuma una vista más amplia haciendo zoom y alejando. Además, navegue de una región de un Diagram a otra desplazándose por el Diagram.
Exportación
Puede exportar un Diagram a diferentes archivos de imagen como PNG, JPEG, BMP y SVG.
Impresión
Imprima Diagrams desde el navegador. También puede personalizar el tamaño de la página, la orientación y el margen de la página, y ajustar un Diagram a una sola página.
Serialización
Guarde el estado de su JavaScript Diagram en formato JSON y cárguelo nuevamente más tarde para su posterior edición utilizando el serializador.
Varios
Además de todas las funciones enumeradas hasta ahora, hay muchas más que mejoran la experiencia de Diagramción.
Líneas de cuadrícula
Las líneas de cuadrícula proporcionan orientación al intentar alinear objetos en un Diagram.
Diseño de página
Dé una apariencia similar a la de una página a la superficie de dibujo utilizando el tamaño de la página, la orientación y los márgenes.
Sugerencia
Utilice las sugerencias para proporcionar información adicional sobre un nodo.
Menú contextual
Asigne fácilmente comandos de uso frecuente al menú contextual.
Funciones adicionales
Navegación por teclado
El control de JavaScript Diagram garantiza que todas las celdas sean accesibles mediante el teclado. Las funciones principales como ordenar, seleccionar y editar se pueden realizar utilizando solo comandos de teclado; no se requiere interacción con el mouse. Esto ayuda a crear aplicaciones altamente accesibles utilizando este control.
APIs amigables para desarrolladores
Los desarrolladores pueden tener control total sobre la interfaz de usuario y el comportamiento del calendario de eventos a través de sus APIs incorporadas y amigables para desarrolladores. Le permite personalizar incluso las funcionalidades complejas del Diagram con facilidad.
Otros frameworks compatibles
El Diagram está disponible para los frameworks Blazor, React, Angular y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El JavaScript Diagram funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
Vea cómo nuestros componentes se pueden transformar en aplicaciones hermosas y eficientes
Diseñador de circuitos lógicos
El diseñador de circuitos lógicos es una aplicación web que se utiliza para diseñar y simular circuitos lógicos digitales utilizando una amplia gama de compuertas lógicas, componentes de entrada y salida para visualizar y comprender mejor cómo funciona, y compartir su diseño con otros.
¿No estás seguro de cómo crear tu primer JavaScript Diagram? Nuestra documentación puede ayudarte.
Me encantaría leerlo ahoraMás de 145+ controles de interfaz de usuario de JavaScript
TODOS LOS CONTROLES
COMPONENTES INTELIGENTES
CUADRÍCULAS
MENÚS DESPLEGABLES
ENTRADAS DE DATOS
VISUALIZACIÓN DE DATOS
NAVEGACIÓN
BOTONES
CHAT INTERACTIVO
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué debería elegir el Diagram de Syncfusion JavaScript?
El JavaScript Diagram con un rico conjunto de características ofrece lo siguiente:
- Visualize, cree y edite Diagrams interactivos.
Tiempo de carga ultrarrápido, interacciones de interfaz de usuario ricas y navegación por teclado.
Cargue una amplia gama de nodos con un rendimiento óptimo.
Compatibilidad con Diagrams de flujo y con muchas formas incorporadas, además de enlace de datos flexible.
Organice fácilmente los componentes del Diagram en un diseño como Organigrama, Mapa mental, Árbol radial y Árbol jerárquico.
Capacidades de exportación e impresión sin problemas.
- Uno de los mejores Diagrams de JavaScript del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
- Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
- Compatible con dispositivos móviles y adaptable.
Recursos de aprendizaje expansivos, como demostraciones y documentación para aprender rápidamente y comenzar a usar el JavaScript Diagram.
¿Cuál es el precio del JavaScript Diagram de Syncfusion?
No vendemos el JavaScript Diagram por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta contiene más de 1,600 componentes y marcos, incluido el JavaScript Diagram. El precio de la licencia de equipo comienza en $395 por mes para 5 desarrolladores e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podríamos ofrecer descuentos según las promociones actualmente activas. Póngase en contacto hoy mismo con nuestros especialistas de productos para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar el demo del Diagram de Syncfusion JavaScript?
Puede encontrar nuestra demostración del JavaScript Diagram, que demuestra cómo renderizar y configurar el Diagram.
¿Qué es el control de Diagram de Syncfusion JavaScript?
El Diagram de Syncfusion JavaScript es un potente control para crear Diagrams interactivos y personalizables, Diagrams de flujo, organigramas, Diagrams UML y más en aplicaciones web.
¿Cómo exporto el JavaScript Diagram como una imagen?
Puede exportar el JavaScript Diagram a diferentes formatos de imagen, como PNG, JPEG y SVG, utilizando el método exportDiagram. Consulte esta documentación para obtener más información.
¿Puedo comprar el componente de Diagram de Syncfusion JavaScript por separado?
No, nuestros más de 1,600 componentes y frameworks para web, dispositivos móviles y de escritorio, incluido nuestro JavaScript Diagram, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos fijado un precio competitivo para el producto, por lo que solo cuesta un poco más de lo que algunos otros proveedores cobran solo por su componente de Diagram. También hemos descubierto que, en nuestra experiencia, nuestros clientes suelen comenzar utilizando uno de nuestros productos y luego se expanden a varios productos rápidamente, por lo que consideramos que era mejor ofrecer todos los 1,600 componentes y frameworks por una tarifa de suscripción que comienza en $395 por mes para un equipo de 5 desarrolladores. Además, podríamos ofrecer descuentos basados en promociones actualmente activas. Póngase en contacto hoy mismo con nuestros especialistas de productos para ver si califica para algún descuento adicional.
¿Puedo descargar y utilizar el Diagram de Syncfusion JavaScript de forma gratuita?
No, este es un producto comercial y requiere una licencia de pago. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas y particulares cuyas organizaciones tengan menos de 1 millón de dólares estadounidenses en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con el Diagram de Syncfusion JavaScript?
Un buen lugar para empezar sería nuestra completa documentación de introducción.
¿Cómo creo un Diagram de flujo usando el JavaScript Diagram?
El control de JavaScript Diagram incluye formas para Diagrams de flujo por defecto. Consulte esta documentación para obtener más información.
¿Se puede utilizar el control de JavaScript Diagram para crear Diagrams interactivos?
Sí, el Diagram de Syncfusion JavaScript se puede utilizar para crear Diagrams interactivos. Admite múltiples formas de selección, arrastre, redimensionamiento, rotación, zoom y más. Consulte esta documentación para obtener más información.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
It has more tools and support than its competitors
Syncfusion essential studio samples are really helpfull. Docking Manager, Diagram, Undo-Redo, Mapping, Themes
HALİT A,
Software Developer
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos del JavaScript Diagram de Syncfusion
Kits de interfaz de usuario
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
Actividades recientes en los blogs de Diagrams de JavaScript
Las publicaciones de blog del JavaScript Diagram lo guiarán en la creación de su primera aplicación con controles de JavaScript. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevos lanzamientos de funciones, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestros canales de blog para obtener actualizaciones del JavaScript Diagram.
BLOG
Cree un visor y editor BPMN interactivo con el control de JavaScript Diagram
19 DE NOVIEMBRE DE 2024
