Diagram de React – Componente funcional
- Visualice, cree y edite Diagrams interactivos.
- Cree diagramas de flujo, BPMN y mapas mentales.
- Cargue nodos variados con rendimiento óptimo.
- Organice nodos automáticamente en diseños complejos.
- Disfrute interacción y edición fluida.
Quick Overview Video
Trusted by the world’s leading companies
Resumen
El Diagram de React 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 a través de código o una interfaz visual.
¿Por qué elegir Syncfusion React Diagram?
Diseño automático
Organice automáticamente los nodos basándose en un algoritmo de diseño predefinido.
Enlace de datos sin fisuras
Rellene Diagrams con nodos y conectores creados y posicionados basándose en datos de fuentes de datos. Sin necesidad de escribir ningún código, convierta, mapee y consuma datos fácilmente en cualquier formato en el Diagram configurando unas pocas propiedades.
Edición interactiva
El Diagram de React le permite realizar panorámicas y zoom, ajustar, deshacer y rehacer, estarcido, redimensionar y rotar de forma interactiva.
Se adapta a cualquier resolución
El Diagram tiene un diseño altamente responsivo 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 usan 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 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 ubicaciones utilicen el componente formateando fechas, monedas y números para adaptarlos a sus preferencias.
Diagrams listos para IA para una visualización sin esfuerzo
Los Diagrams funcionan de forma inmediata con IA. Mejórelos fácilmente utilizando la generación de texto a Diagram, impulsada por sus herramientas de IA preferidas. Cree, edite y comprenda Diagrams complejos más rápido que nunca.
-
Texto a Diagram: Convierta el lenguaje natural en Diagrams de flujo, mapas mentales o Diagrams de secuencia, sin necesidad de dibujo manual.
- Vea cómo crear Diagrams con texto
Ejemplo de código de Diagram de React
Comience fácilmente con el Diagram de React utilizando unas pocas líneas sencillas de código TSX como se demuestra a continuación. Explore también nuestro Ejemplo de Diagram de React que le muestra cómo renderizar y configurar un Diagram en React.
import * as React from "react";
import "./App.css";
// import the DiagramComponent
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
export default class App extends React.Component<{}, {}> {
render() {
return <DiagramComponent id="diagram" />;
}
}Diagram de flujo
El Diagram de React proporciona todas las formas estándar de Diagram de flujo como objetos predefinidos 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:
- Utilizar muchas formas estándar predefinidas.
- Crear y añadir formas personalizadas fácilmente.
- Personalizar completamente la apariencia de un nodo.
- Diseñar una plantilla de interfaz de usuario de nodo y reutilizarla en múltiples nodos.
Conectores
Un conector representa una relación entre dos nodos.
Tipos
El Diagram de React proporciona conectores rectos, ortogonales, de polilínea y curvos. Puede elegir cualquiera de ellos según el tipo de Diagram o la relación entre los nodos conectados.
Puentes o saltos de línea
Utilice puentes (saltos de línea) para ilustrar la ruta de un conector, lo que facilita la lectura de dónde se superponen los conectores entre sí 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, el aspecto de los conectores también se puede personalizar de la forma que desee. El componente Diagram de React 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 decoradores del conector.
Puertos (puntos de conexión)
Conecte conectores a lugares específicos de un nodo mediante 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 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: Colóquelas dentro o fuera de un nodo, o en el extremo de origen o destino de un conector. Alineación automática cuando un nodo o conector se mueve.
Funciones interactivas
Utilice funciones interactivas para mejorar la experiencia de edición de un Diagram de React 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 pulgares o manejadores.
Redimensionar
Puede redimensionar un nodo en ocho direcciones diferentes y bloquear las relaciones de aspecto de un nodo para mantener su forma. También puede redimensionar varios objetos al mismo tiempo.
Deshacer y rehacer
No se preocupe si edita por error: los comandos de deshacer y rehacer le ayudarán 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 y luego interactuar con ellos como un solo objeto. Los grupos anidados también son posibles con nuestro componente de Diagram de React.
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 biblioteca de Diagrams de React 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.
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 pueden alinearse a la izquierda, derecha o centro horizontalmente, o alinearse en la parte superior, inferior o media 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. Incluye un árbol jerárquico, un á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
La biblioteca de Diagrams de React 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 por ella.
Herramientas de dibujo
Dibuje todo tipo de nodos incorporados y conéctelos con conectores de forma interactiva simplemente haciendo clic y arrastrando sobre el área de dibujo.
Herramientas de zoom y panorámica
Vea un Diagram grande de cerca o asuma una vista más amplia ampliando y alejando. Además, navegue de una región de un Diagram a otra desplazándose por el Diagram.
Exportar
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
Puede guardar el estado de su Diagram en formato JSON y cargarlo más tarde para su posterior edición utilizando el serializador.
Miscelánea
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
Proporcione una apariencia similar a la de una página a la superficie de dibujo utilizando el tamaño de 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 los comandos de uso frecuente al menú contextual.
Características adicionales
Navegación por teclado
El control Diagram de React garantiza que cada celda sea accesible utilizando 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 ratón. Esto ayuda a crear aplicaciones altamente accesibles utilizando este control.
API 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 integradas y amigables para desarrolladores. Permite personalizar incluso las funcionalidades complejas de Diagram con facilidad.
¿No está seguro de cómo crear su primer Diagram de React? Nuestros videos tutoriales y documentación pueden ayudarle.
Me encantaría verlo ahora Me encantaría leerlo ahoraDescubra el ecosistema completo de componentes React de Syncfusion
Explore más de 145+ componentes de interfaz de usuario de React que incluyen controles establecidos y listos para producción, y los últimos componentes puros de React creados de forma nativa para el desarrollo de aplicaciones web modernas.
-
Componentes de React
-
Componentes puros de React
-
COMPONENTES INTELIGENTESCUADRÍCULASEDITORESMENÚS DESPLEGABLESENTRADAS DE DATOSVISUALIZACIÓN DE DATOSNAVEGACIÓNBOTONESCHAT INTERACTIVONOTIFICACIÓNFORMULARIOS
-
CuadrículasVisualización de datosNavegaciónEntradas
Preguntas frecuentes
¿Por qué debería elegir Syncfusion React Diagram?
El Diagram de React de Syncfusion ofrece las siguientes características:
- Visualice, 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.
Soporte para 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 React 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.
Amplios recursos de aprendizaje como demos y documentación para aprender rápidamente y empezar a utilizar el Diagram de React.
¿Cuál es el precio del Diagram de Syncfusion React?
No vendemos el Diagram de React 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 Diagram de React. 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, podríamos ofrecer descuentos basados en promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar la demostración de Syncfusion React Diagram?
Puede encontrar nuestra demostración del Diagram de React, que muestra cómo renderizar y configurar el Diagram.
¿Puedo comprar el componente Syncfusion React Diagram por separado?
No, nuestros 1,600+ componentes y frameworks para web, móvil y escritorio, incluido nuestro Diagram de React, 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 otros proveedores cobran solo por su componente de Diagram. También hemos comprobado que, según nuestra experiencia, nuestros clientes suelen empezar utilizando uno de nuestros productos y luego amplían rápidamente a varios productos, por lo que consideramos que lo mejor era ofrecer los 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 las promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Puedo descargar y utilizar Syncfusion React Diagram 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 e individuos cuyas organizaciones tengan menos de 1 millón de USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con Syncfusion React Diagram?
Un buen lugar para comenzar sería nuestra documentación completa 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 Diagram de React 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 React Diagram
Las publicaciones del blog de React Diagram le guiarán en la creación de su primera aplicación con componentes de React. Proporcionan estrategias de resolución de problemas, describen características y funcionalidades, anuncian nuevas características, explican las mejores prácticas y muestran escenarios de ejemplo. Explore nuestras últimas publicaciones en nuestros canales de blog para obtener actualizaciones sobre React Diagram.
BLOG
3 DE ENERO DE 2025
BLOG
Automatice fácilmente la creación de Diagrams de flujo en el Diagram de React
18 DE NOVIEMBRE DE 2024
