React Diagram – Composant puissants
- Visualisez, créez et éditez des Diagrams.
- Créez organigrammes, BPMN et cartes mentales.
- Chargez des nœuds avec performance optimale.
- Arrangez automatiquement les nœuds complexes.
- Profitez d’une interaction et édition fluide.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu
Le React Diagram est une bibliothèque de Diagrams d’architecture riche en fonctionnalités pour la visualisation, la création et l’édition de Diagrams interactifs. Il prend en charge la création d’organigrammes, d’organigrammes hiérarchiques, de cartes mentales et de Diagrams BPMN, soit par code, soit par une interface visuelle.
Pourquoi choisir Syncfusion React Diagram ?
Disposition automatique
Organisez automatiquement les nœuds en fonction d’un algorithme de disposition prédéfini.
Liaison de données fluide
Remplissez les Diagrams avec des nœuds et des connecteurs créés et positionnés en fonction des données provenant de sources de données. Sans avoir à écrire de code, convertissez, mappez et consommez facilement des données dans n’importe quel format dans le Diagram en définissant quelques propriétés.
Édition interactive
Le React Diagram vous permet de faire un panoramique et un zoom, d’accrocher, annuler et refaire, de pochoir, de redimensionner et de faire pivoter de manière interactive.
S’adapte à toute résolution
Le Diagram a une mise en page très réactive et un design optimisé pour les ordinateurs de bureau, les écrans tactiles et les téléphones. Il fonctionne bien sur tous les téléphones mobiles utilisant les systèmes d’exploitation iOS, Android ou Windows.
Galerie de symboles réutilisables
La SymbolPalette affiche une collection de palettes. Une palette affiche un ensemble de nœuds et de connecteurs que vous pouvez faire glisser et déposer dans le Diagram.
Créez vos propres formes de modèle
Visualisez n’importe quel objet graphique à l’aide de nœuds qui peuvent être arrangés et manipulés en même temps sur une page de Diagram. Le Diagram vous permet d’ajouter différents types de nœuds.
Thèmes attrayants et personnalisables
Design de pointe avec plusieurs thèmes intégrés, tels que Fluent, Tailwind CSS, Bootstrap, Material et Fabric. Utilisez l’outil en ligne Theme Studio pour personnaliser facilement les thèmes des Diagrams.
Globalisation et localisation
Permettez aux utilisateurs de différentes langues d’utiliser le composant en formatant les dates, les devises et la numérotation selon leurs préférences.
Diagrams prêts pour l’IA pour une visualisation sans effort
Les Diagrams fonctionnent de manière autonome avec l’IA. Améliorez-les facilement grâce à la génération de texte en Diagram — alimentée par vos outils d’IA préférés. Créez, modifiez et comprenez des Diagrams complexes plus rapidement que jamais.
-
Texte en Diagram : Transformez le langage naturel en organigrammes, cartes heuristiques ou Diagrams de séquence — aucune conception manuelle n'est nécessaire.
- Découvrez comment créer des Diagrams à partir de texte
Exemple de code de Diagram React
Commencez facilement avec le React Diagram en quelques lignes de code TSX comme démontré ci-dessous. Explorez également notre exemple de React Diagram qui vous montre comment rendre et configurer un Diagram dans 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" />;
}
}Organigramme
Le React Diagram fournit toutes les formes standard d’organigramme en tant qu’objets prêts à l’emploi pour construire des organigrammes, ce qui facilite leur ajout à une surface de Diagram en un seul appel.
Organigramme hiérarchique
Organisez automatiquement les positions des nœuds parents et enfants avec un algorithme de disposition automatique intégré, spécifiquement conçu pour les organigrammes.
Carte mentale
L’algorithme de mise en page automatique est également conçu pour les cartes mentales. Vous pouvez définir quel nœud doit être au centre et quels nœuds doivent être placés autour du nœud central sur la surface du Diagram.
Nœuds
Visualisez n’importe quel objet graphique à l’aide de nœuds, qui peuvent être arrangés et manipulés en même temps sur une page de Diagram. Ils permettent ce qui suit :
- Utiliser de nombreuses formes standard prédéfinies.
- Créer et ajouter facilement des formes personnalisées.
- Personnaliser entièrement l’apparence d’un nœud.
- Concevoir un modèle d’interface utilisateur de nœud et le réutiliser sur plusieurs nœuds.
Connecteurs
Un connecteur représente une relation entre deux nœuds.
Types
Le React Diagram propose des types de connecteurs droits, orthogonaux, poly-lignes et courbes. Vous pouvez choisir l’un de ces types en fonction du type de Diagram ou de la relation entre les nœuds connectés.
Pontage ou sauts de ligne
Utilisez le pontage (sauts de ligne) pour illustrer le parcours d’un connecteur, ce qui facilite la lecture des endroits où les connecteurs se chevauchent dans un Diagram dense.
Pointes de flèche
Utilisez différents types de pointes de flèche prédéfinies pour illustrer le sens du flux dans les organigrammes. Vous pouvez également créer vos propres pointes de flèche personnalisées.
Apparence
Comme pour les nœuds, l’apparence des connecteurs peut également être personnalisée à votre guise. Le composant React Diagram offre un ensemble riche de propriétés qui vous permettent de personnaliser la couleur, l’épaisseur, l’apparence des tirets et des points, les coins et même les décorateurs des connecteurs.
Ports (points de connexion)
Attachez des connecteurs à des emplacements spécifiques sur un nœud via différents types de ports ou points de connexion.
Étiquettes
Des informations supplémentaires peuvent être affichées en ajoutant du texte ou des étiquettes sur les nœuds et les connecteurs.
Modifier
Vous pouvez ajouter et éditer du texte pendant l’exécution et le marquer en lecture seule s’il ne doit pas être modifié.
Plusieurs étiquettes
Ajoutez autant d’étiquettes que vous le souhaitez et alignez-les individuellement.
Alignement
Les étiquettes incluent des options d’alignement sophistiquées : placez-les à l’intérieur ou à l’extérieur d’un nœud, ou à l’extrémité source ou cible d’un connecteur. Alignement automatique lors du déplacement d’un nœud ou d’un connecteur.
Fonctionnalités interactives
Utilisez les fonctionnalités interactives pour améliorer l’expérience d’édition d’un Diagram React lors de l’exécution. De plus, vous pouvez facilement éditer un Diagram avec la souris, l’écran tactile ou les interfaces clavier.
Sélectionner et faire glisser
Sélectionnez un ou plusieurs nœuds, connecteurs ou annotations et modifiez-les à l’aide de pouces ou de poignées.
Redimensionner
Vous pouvez redimensionner un nœud dans huit directions différentes et verrouiller les proportions d’un nœud pour conserver sa forme. Vous pouvez également redimensionner plusieurs objets en même temps.
Faire pivoter
Faites pivoter les nœuds sélectionnés de 0 à 360 degrés dans React Diagram.
Annuler et refaire
Ne vous inquiétez pas si vous modifiez par erreur : les commandes d’annulation et de rétablissement vous aident à corriger facilement les modifications récentes.
Presse-papiers
Coupez, copiez, collez ou dupliquez les objets sélectionnés dans et entre les Diagrams.
Ordre Z
Lorsque plusieurs objets se chevauchent, l’ordre Z contrôle quel objet est en haut et quel est en bas.
Magnétisme
Alignez précisément les nœuds, les connecteurs et les annotations lors du glisser-déposer en vous alignant simplement sur les lignes de grille ou les objets les plus proches.
Groupement
Vous pouvez combiner plusieurs nœuds en un groupe et interagir avec eux comme un seul objet. Les groupes imbriqués sont également possibles avec notre composant React Diagram.
Commandes rapides
Les commandes fréquemment utilisées comme supprimer, connecter et dupliquer peuvent être affichées sous forme de boutons près d’un sélecteur. Cela permet aux utilisateurs d’effectuer ces opérations rapidement au lieu de chercher les bons boutons dans une boîte à outils.
Alignement
Notre bibliothèque React Diagram dispose de commandes d’alignement prédéfinies qui vous permettent d’aligner les nœuds et les connecteurs des objets sélectionnés par rapport à la limite de sélection.
Commandes d’espacement
Les commandes d’espacement vous permettent de placer les objets sélectionnés sur le Diagram à intervalles égaux les uns par rapport aux autres.
Commandes de dimensionnement
Utilisez les commandes de dimensionnement pour redimensionner uniformément les nœuds sélectionnés par rapport au premier objet sélectionné.
Commandes d’alignement
Tous les nœuds ou connecteurs de la liste de sélection peuvent être alignés à gauche, à droite ou au centre horizontalement, ou alignés en haut, en bas ou au milieu verticalement par rapport à la limite de sélection.
Disposition automatique
Organisez automatiquement les nœuds en fonction d’un algorithme de disposition prédéfini. Comprend des hiérarchies d’arborescence, radiales et symétriques intégrées.
Règle
Les règles vous permettent de mesurer la distance des nœuds ou des connecteurs par rapport à l’origine de la page. Ceci est particulièrement utile pour créer des modèles réduits.
Palette de symboles
La bibliothèque React Diagram inclut une galerie de pochoirs, de symboles réutilisables et de nœuds qui peuvent être glissés et déposés sur la surface d’un Diagram.
Panneau de vue d’ensemble
Le panneau de vue d’ensemble vous permet d’améliorer l’expérience de navigation lors de l’exploration de grands Diagrams. Il affiche un petit aperçu de la page complète du Diagram, permettant aux utilisateurs de zoomer et de se déplacer à l’intérieur.
Outils de dessin
Dessinez toutes sortes de nœuds intégrés et connectez-les avec des connecteurs de manière interactive en cliquant et en glissant simplement sur la zone de dessin.
Outils de zoom et de panoramique
Visualisez un grand Diagram de près ou adoptez une vue plus large en zoomant avant et arrière. Naviguez également d’une région à l’autre d’un Diagram en effectuant un panoramique.
Exportation
Vous pouvez exporter un Diagram vers différents fichiers image tels que PNG, JPEG, BMP et SVG.
Impression
Imprimez des Diagrams directement depuis le navigateur. Vous pouvez également personnaliser la taille de la page, l’orientation et les marges, et ajuster un Diagram à une seule page.
Sérialisation
Vous pouvez enregistrer l’état de votre Diagram au format JSON et le recharger plus tard pour une édition ultérieure à l’aide du sérialiseur.
Divers
En plus de toutes les fonctionnalités énumérées jusqu’à présent, il en existe bien d’autres qui améliorent l’expérience de création de Diagrams.
Lignes de grille
Les lignes de grille fournissent des indications pour l’alignement des objets.
Disposition de la page
Donnez une apparence de page à la surface de dessin en utilisant la taille, l’orientation et les marges de la page.
Info-bulle
Utilisez des info-bulles pour fournir des informations supplémentaires sur un nœud.
Menu contextuel
Mappez facilement les commandes fréquemment utilisées au menu contextuel.
Fonctionnalités additionnelles
Navigation au clavier
Le contrôle React Diagram garantit que chaque cellule est accessible à l’aide du clavier. Les fonctionnalités majeures telles que le tri, la sélection et l’édition peuvent être effectuées uniquement à l’aide de commandes clavier ; aucune interaction de la souris n’est requise. Cela aide à créer des applications hautement accessibles en utilisant ce contrôle.
API conviviales pour les développeurs
Les développeurs peuvent avoir un contrôle total sur l’interface utilisateur et le comportement du calendrier des événements grâce à ses API intégrées et conviviales pour les développeurs. Il vous permet de personnaliser même les fonctionnalités complexes du Diagram avec facilité.
Vous ne savez pas comment créer votre premier Diagram React ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
Je voudrais regarder maintenant J’aimerais lire maintenantDécouvrez l'écosystème complet de composants React de Syncfusion
Découvrez plus de 145+ composants d'interface utilisateur React, comprenant des contrôles éprouvés et prêts pour la production, ainsi que les derniers composants React purs conçus nativement pour le développement d'applications web modernes.
-
Composants React
-
Composants React purs
-
Composants intelligentsGrillesVisualisation des donnéesListes déroulantesVisionneuses et éditeurs de fichiersBoutonsChat interactifChamps de saisieNavigationFormulairesNotifications
-
GrillesVisualisation des donnéesNavigationEntrées
Foire aux questions
Pourquoi choisir Syncfusion React Diagram ?
Le Syncfusion React Diagram offre les fonctionnalités suivantes :
- Visualisez, créez et éditez des Diagrams interactifs.
Temps de chargement ultra rapide, interactions riches de l’interface utilisateur et navigation au clavier.
Chargez une large gamme de nœuds avec des performances optimales.
Prise en charge des Diagrams d’organigramme, de nombreuses formes intégrées et une liaison de données flexible.
Organisez facilement les composants de Diagram dans des mises en page telles que l’organigramme hiérarchique, la carte mentale, l’arbre radial et l’arbre hiérarchique.
Des capacités d’exportation et d’impression transparentes.
- L’un des meilleurs Diagrams React sur le marché, offrant une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
- Configuration et API simples.
- Prend en charge tous les navigateurs modernes.
- Compatible avec le tactile mobile et réactif.
De vastes ressources d’apprentissage telles que des démos et de la documentation pour apprendre rapidement et commencer avec React Diagram.
Quel est le prix du Syncfusion React Diagram ?
Nous ne vendons pas le React Diagram séparément. Il est uniquement disponible à l’achat dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris le React Diagram. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs, et inclut le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des réductions en fonction des promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous avez droit à des réductions supplémentaires.
Où puis-je trouver la démonstration de Syncfusion React Diagram ?
Vous pouvez trouver notre démo de React Diagram, qui montre comment rendre et configurer le Diagram.
Puis-je acheter le composant Syncfusion React Diagram séparément ?
Non, nos 1,600+ composants et frameworks pour le Web, les mobiles et les ordinateurs de bureau, y compris notre React Diagram, ne sont pas vendus individuellement. Ils sont uniquement disponibles dans le cadre d’une licence d’équipe. Cependant, nous avons fixé le prix du produit de manière compétitive, de sorte qu’il ne coûte que légèrement plus cher que ce que certains autres fournisseurs facturent pour leur seul composant Diagram. Nous avons également constaté, d’après notre expérience, que nos clients commencent généralement par utiliser l’un de nos produits, puis s’étendent rapidement à plusieurs produits, nous avons donc estimé qu’il était préférable d’offrir tous les 1,600+ composants et frameworks pour un abonnement annuel commençant à 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions être en mesure d’offrir des réductions basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour savoir si vous avez droit à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le Syncfusion React Diagram ?
Non, il s’agit d’un produit commercial qui nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont un revenu brut annuel inférieur à 1 million de dollars USD et cinq développeurs ou moins.
Comment puis-je démarrer avec Syncfusion React Diagram ?
Un bon point de départ serait notre documentation complète de démarrage.
Nos clients nous aiment
Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.Voici quelques-uns de leurs témoignages.
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)
Voir de vraies histoires de réussite
Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.
Explorer des études de casIndustrie
Développement de logiciels
75% Réduction des coûts
50% Développement plus rapide
Industrie
Services publics (pétrole et gaz)
450+ heures économisées
Processus rationalisés et heures d’effort de développement économisées.
Fonctionnalités avancées et flexibles
Utilisateurs autonomisés grâce à une fonctionnalité robuste et polyvalente.
Industrie
Logiciel et technologie
1000+ heures économisées
Développement accéléré grâce à des composants d’interface utilisateur prêts pour l’entreprise.
Gestion de fichiers efficace
Flux de travail rationalisés grâce à des bibliothèques de documents, sans les construire à partir de zéro.
Industrie
Logiciel et technologie
2 ans de retard évité
Deux ans de retards évités grâce à une planification proactive.
Livraison à temps
Projets livrés dans les délais à l’aide de contrôles fiables.
Industrie
Services informatiques et conseil en TI
Performances améliorées
Grands ensembles de données gérés avec une personnalisation aisée et un débogage rapide.
Hautement personnalisable
Contrôles plug-and-play avec intégration rapide de modèles.
Industrie
Services professionnels
Accès instantané
Disponibilité rapide des fonctionnalités et des ressources.
Dépendances réduites
Moins de dépendances pour un développement plus rapide.
Evalue par des utilisateurs du monde entier.
Ressources du Diagram React Syncfusion
Kits d’interface utilisateur
Téléchargement Figma
Téléchargement Figma
Recompenses
L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.
Activités récentes dans les blogs React Diagram
Les articles de blog sur React Diagram vous guideront dans la création de votre première application avec des composants React. Ils fournissent des stratégies de résolution de problèmes, décrivent les caractéristiques et fonctionnalités, annoncent les nouvelles versions, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos derniers articles sur nos chaînes de blog pour les mises à jour de React Diagram.
