Angular Diagram - biblioteca rica en funciones pro
- 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
Resumen
El Angular 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 Diagrams BPMN, ya sea a través de código o de una interfaz visual.
¿Por qué elegir Syncfusion Essential Studio® Angular Diagram?
Diseño automático
Organice automáticamente los nodos según un algoritmo de diseño predefinido.
Enlace de datos fluido
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 unas pocas propiedades.
Edición interactiva
El Angular Diagram le permite panorámicas y zoom, ajuste, deshacer y rehacer, plantilla, redimensionar y rotar de forma interactiva.
Se adapta a cualquier resolución
El Diagram tiene un diseño altamente receptivo y un diseño optimizado para escritorios, 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 pueden organizar y manipular en una página de Diagram al mismo tiempo. El Diagram le permite añadir 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 los temas del Diagram fácilmente.
Globalización y localización
Permita que usuarios de diferentes ubicaciones utilicen el componente formateando fechas, monedas y números para adaptarlos a sus preferencias.
Diagrams con IA para una visualización instantánea
Visualice ideas con facilidad utilizando nuestro componente de Diagram impulsado por IA. Genere Diagrams instantáneamente a partir del lenguaje natural utilizando tecnología de texto a Diagram. Construya, edite e interprete rápidamente visuales complejos con una velocidad y claridad inigualables.
-
Pruebe a crear Diagrams a partir de texto: Describa su idea y observe cómo se convierte en un Diagram de flujo, un mapa mental o un Diagram de secuencia.
- Vea cómo crear Diagrams con texto
Ejemplo de código de Angular Diagram
Comience fácilmente con el Angular Diagram utilizando unas pocas líneas simples de código HTML y TS como se muestra a continuación. Explore también nuestro Ejemplo de Angular Diagram que le muestra cómo renderizar y configurar un Diagram en Angular.
<div class="content-wrapper">
<ejs-diagram #diagram id="diagram" width="100%" height="700px">
</ejs-diagram>
</div>import { Component, OnInit, ViewEncapsulation} from '@angular/core';
@Component({
// especifica la cadena de plantilla para el componente Diagram
selector: 'ej2-diagram-container',
styleUrls: ['default.css'],
templateUrl: 'default.html',
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
export class AppComponent {}Diagram de flujo
El Angular Diagram proporciona todas las formas estándar de Diagram de flujo como objetos listos 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 integrado 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 la página del Diagram. Permiten lo siguiente:
- Utilice muchas formas estándar predefinidas.
- Cree y añada 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 Angular Diagram proporciona tipos de conectores rectos, ortogonales, polilíneas y curvos. Puede elegir cualquiera de ellos según el tipo de Diagram o la relación entre los nodos conectados.
Paso elevado o saltos de línea
Utilice el paso elevado (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.
Flechas
Utilice diferentes tipos de flechas predefinidas para ilustrar la dirección del flujo en los Diagrams de flujo. También puede construir sus propias flechas personalizadas.
Apariencia
Al igual que los nodos, la apariencia del conector también se puede personalizar de cualquier forma que desee. El control Angular Diagram proporciona un rico 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 decoradores del conector.
Puertos (puntos de conexión)
Conecte 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 añadiendo texto o etiquetas en nodos y conectores.
Editar
Puede añadir y editar texto en tiempo de ejecución y marcarlo como de solo lectura si no debe ser editado.
Múltiples etiquetas
Añada 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 ratón, pantalla táctil o teclado.
Seleccionar y arrastrar
Seleccione uno o más nodos, conectores o anotaciones y edítelos usando los controladores o mangos.
Redimensionar
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 si edita por error: los comandos de deshacer y rehacer le 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 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 e interactuar con ellos como un solo objeto. También es posible anidar grupos con nuestro componente de Angular Diagram.
Comandos rápidos
Los comandos de uso frecuente como eliminar, conectar y duplicar pueden mostrarse 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
Nuestro Angular Diagram 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 igualar el tamaño de 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 a la parte superior, inferior o medio verticalmente con respecto al límite de selección.
Diseño automático
Organiza los nodos automáticamente basándose en un algoritmo de diseño predefinido. Incluye diseños jerárquicos de árbol, árbol radial y simétricos.
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 incluye una galería de plantillas, símbolos reutilizables y nodos que se pueden arrastrar a la superficie de un Diagram.
Panel de visión general
El panel de visió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 simplemente haciendo clic y arrastrando en el área de dibujo.
Herramientas de zoom y panorámica
Vea un Diagram grande de cerca o asuma una vista más amplia acercándose y alejándose. Además, navegue de una región de un Diagram a otra moviéndose por el Diagram.
Exportación
Puede exportar Diagrams 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
Puede guardar el estado de su Diagram en formato JSON y cargarlo más tarde para su posterior edición utilizando el serializador.
Varios
Además de todas las características 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.
Diseño de página
Déle una apariencia similar a la de una página a la superficie de dibujo utilizando el tamaño, la orientación y los márgenes de la página.
Sugerencia
Utilice sugerencias para proporcionar información adicional sobre un nodo.
Menú contextual
Mapee fácilmente los comandos de uso frecuente al menú contextual.
Características adicionales
Navegación por teclado
El control Angular Diagram garantiza que cada celda sea accesible usando el teclado. Las funciones principales como ordenar, seleccionar y editar se pueden realizar usando solo comandos de teclado; no se requiere interacción con el ratón. Esto ayuda a crear aplicaciones altamente accesibles usando 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 API incorporadas y amigables para el desarrollador. Permite personalizar incluso las funcionalidades complejas del Diagram con facilidad.
Compatibilidad de versiones de Angular
Con la mejora continua en las versiones de Angular, el Angular Diagram se mantiene actualizado para hacerlo compatible con la última versión.
Otros frameworks compatibles
El Diagram está disponible para los frameworks Blazor, React, JavaScript y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Angular Diagram funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer Angular Diagram? Nuestros videos tutoriales y documentación pueden ayudar.
¡Me encantaría verlo ahora! ¡Me encantaría leerlo ahora!Más de 145+ componentes de interfaz de usuario de Angular
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
Visualización de datos
MENÚS DESPLEGABLES
VISUALIZADORES Y EDITORES DE ARCHIVOS
BOTONES
CHAT INTERACTIVO
ENTRADAS
NAVEGACIÓN
FORMAS
NOTIFICACIÓN
Preguntas frecuentes
¿Por qué debería elegir Syncfusion Essential Studio® Angular Diagram?
- Visualice, cree y edite Diagrams interactivos.
Tiempo de carga ultrarrápido, ricas interacciones de interfaz de usuario y navegación por teclado.
Cargue una amplia gama de nodos con un rendimiento óptimo.
Compatibilidad con Diagrams de flujo, muchas formas incorporadas y enlace de datos flexible.
Organice fácilmente los componentes del Diagram en diseños 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 Angular del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
Configuración sencilla y API.
- Compatible con todos los navegadores modernos.
- Compatible con dispositivos móviles táctiles y receptivo.
Amplios recursos de aprendizaje, como demostraciones y documentación para aprender rápidamente y empezar a usar el Angular Diagram.
¿Cuál es el precio del Angular Diagram de Syncfusion?
No vendemos el Angular 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 frameworks, incluido el Angular Diagram. El precio de la licencia de equipo comienza en $395 al mes para 5 desarrolladores e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podemos ofrecer descuentos basados en las promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si cumple los requisitos para recibir descuentos adicionales.
¿Dónde puedo encontrar la demostración del Angular Diagram de Syncfusion?
Puede encontrar nuestra demostración del Angular Diagram, que muestra cómo renderizar y configurar el Diagram.
¿Puedo comprar el componente Angular Diagram de Syncfusion por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluido nuestro Angular Diagram, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos puesto un precio competitivo al 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 empezar utilizando uno de nuestros productos y luego se expanden rápidamente a varios productos, por lo que consideramos que lo mejor era ofrecer todos los más de 1,600 componentes y frameworks por una tarifa de suscripción que comienza en $395 al mes para un equipo de 5 desarrolladores. Además, es posible que podamos ofrecer descuentos basados en promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si cumple los requisitos para recibir descuentos adicionales.
¿Puedo descargar y usar el Angular Diagram de Syncfusion 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 unos ingresos brutos anuales inferiores a 1 millón de dólares, 5 o menos desarrolladores y 10 o menos empleados en total.
¿Cómo empiezo a usar el Angular Diagram de Syncfusion?
Un buen punto de partida sería nuestra completa documentación de introducció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 Angular 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 tutoriales y blogs de Angular Diagram
Los videos tutoriales y las publicaciones del blog del Angular Diagram le guiarán en la creación de su primera aplicación con estos componentes de Angular. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevas versiones de características, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestro blog y canales de videos tutoriales para obtener actualizaciones del Angular Diagram.
BLOG
Cree árboles jerárquicos de varios padres con la biblioteca de Diagrams de Angular
19 DE NOVIEMBRE DE 2024
BLOG
19 DE NOVIEMBRE DE 2024
