Angular Diagram - Bibliothèque de Diagrams Riche
- Visualisez, créez et éditez des Diagrams.
- Créez organigrammes, BPMN et cartes mentales.
- Chargez des nœuds avec performance optimale.
- Disposez 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 Angular Diagram est une bibliothèque de Diagrams d’architecture riche en fonctionnalités pour visualiser, créer et éditer des Diagrams interactifs. Il prend en charge la création d’organigrammes, de Diagrams organisationnels, de cartes mentales et de Diagrams BPMN, soit par code, soit via une interface visuelle.
Pourquoi choisir le Angular Diagram Syncfusion Essential Studio® ?
Disposition automatique
Disposez automatiquement les nœuds en fonction d’un algorithme de mise en page prédéfini.
Liaison de données transparente
Populez 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 Angular Diagram vous permet de glisser et zoomer, d’aligner, d’annuler et rétablir, de créer des stencils, 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 iOS, Android ou Windows OS.
Galerie de symboles réutilisables
La Palette de symboles affiche une collection de palettes. Une palette affiche un ensemble de nœuds et de connecteurs que vous pouvez glisser-déposer dans le Diagram.
Créez vos propres formes de modèle
Visualisez nimporte quel objet graphique à laide de nœuds qui peuvent être arrangés et manipulés simultanément sur une page de Diagram. Le Diagram vous permet d’ajouter différents types de nœuds.
Thèmes attrayants et personnalisables
Un 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 du Diagram.
Mondialisation et localisation
Permettez aux utilisateurs de différentes régions d’utiliser le composant en formatant les dates, les devises et la numérotation selon leurs préférences.
Diagrams pilotés par l’IA pour une visualisation instantanée
Visualisez vos idées facilement grâce à notre composant de Diagram piloté par l’IA. Générez instantanément des Diagrams à partir du langage naturel à l’aide de la technologie texte-vers-Diagram. Construisez, éditez et interprétez rapidement des visuels complexes avec une vitesse et une clarté inégalées.
-
Essayez de créer des Diagrams à partir de texte : Décrivez votre idée et regardez-la se transformer en organigramme, carte mentale ou Diagram de séquence.
- Découvrez comment créer des Diagrams avec du texte
Exemple de code de Angular Diagram
Démarrez facilement avec le Angular Diagram en utilisant quelques lignes simples de code HTML et TS comme démontré ci-dessous. Explorez également notre Exemple de Angular Diagram qui vous montre comment rendre et configurer 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({
// specifies the template string for the Diagram component
selector: 'ej2-diagram-container',
styleUrls: ['default.css'],
templateUrl: 'default.html',
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
export class AppComponent {}Organigramme
Le Angular Diagram fournit toutes les formes d’organigramme standard comme objets prêts à l’emploi pour construire des organigrammes, ce qui facilite leur ajout à une surface de Diagram en un seul appel.
Organigramme
Disposez automatiquement les positions des nœuds parents et enfants avec un algorithme de mise en page automatique intégré spécialement conçu pour les organigrammes.
Carte mentale
L’algorithme de disposition automatique est également conçu pour les Diagrams de 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 simultanément sur la page du Diagram. Ils permettent les actions suivantes :
- 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 Angular Diagram propose des types de connecteurs droits, orthogonaux, polylignes et courbes. Vous pouvez choisir l’un d’entre eux 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 tracé d’un connecteur, ce qui facilite la lecture là où les connecteurs se chevauchent dans un Diagram dense.
Flèches
Utilisez différents types de flèches prédéfinies pour illustrer la direction du flux dans les organigrammes. Vous pouvez également créer vos propres flèches personnalisées.
Apparence
Comme les nœuds, l’apparence des connecteurs peut également être personnalisée à votre guise. Le contrôle Angular Diagram offre un riche ensemble de propriétés vous permettant 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 les connecteurs à des emplacements spécifiques sur un nœud via différents types de ports ou de 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.
Édition
Vous pouvez ajouter et modifier du texte à l’exécution et le marquer en lecture seule s’il ne doit pas être édité.
Plusieurs étiquettes
Ajoutez autant d’étiquettes que vous le souhaitez et alignez-les individuellement.
Alignement
Les étiquettes comprennent des options d’alignement sophistiquées : placement à 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 à l’exécution. De plus, vous pouvez facilement éditer un Diagram avec des interfaces souris, écran tactile ou clavier.
Sélectionner et faire glisser
Sélectionnez un ou plusieurs nœuds, connecteurs ou annotations et éditez-les à l’aide de poignées ou contrôleurs.
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 simultanément.
Annuler et Rétablir
Ne vous inquiétez pas si vous faites une erreur de modification — les commandes annuler et rétablir vous aident à corriger facilement les changements récents.
Presse-papiers
Coupez, copiez, collez ou dupliquez les objets sélectionnés au sein d’un même Diagram et entre différents Diagrams.
Ordre Z
Lorsque plusieurs objets se chevauchent, l’ordre Z contrôle quel objet est en haut et quel est en bas.
Alignement (Snap)
Alignez précisément les nœuds, les connecteurs et les annotations lors du glissement en les alignant sur les lignes de grille ou les objets les plus proches.
Groupement
Vous pouvez combiner plusieurs nœuds en un groupe, puis interagir avec eux comme un seul objet. Les groupes imbriqués sont également possibles avec notre composant Angular Diagram.
Commandes rapides
Les commandes fréquemment utilisées comme supprimer, connecter et dupliquer peuvent être affichées comme des boutons près d’un sélecteur. Cela facilite l’exécution rapide de ces opérations pour les utilisateurs au lieu de chercher les bons boutons dans une boîte à outils.
Alignement
Notre Angular 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 bordure de sélection.
Commandes d’espacement
Les commandes d’espacement vous permettent de placer les objets sélectionnés sur le Diagram à des intervalles égaux les uns des autres.
Commandes de dimensionnement
Utilisez les commandes de dimensionnement pour dimensionner 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 en haut, en bas ou au milieu verticalement par rapport à la bordure de sélection.
Disposition automatique
Disposez les nœuds automatiquement en fonction d’un algorithme de disposition prédéfini. Comprend des mises en page hiérarchiques, en arbre radial 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. C’est particulièrement utile pour créer des modèles réduits.
Palette de symboles
Le contrôle 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 survol
Le panneau de survol 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 et dézoomant. De plus, naviguez d’une région à l’autre d’un Diagram en effectuant un panoramique.
Exportation
Vous pouvez exporter le Diagram vers différents fichiers image tels que PNG, JPEG, BMP et SVG.
Impression
Imprimez des Diagrams depuis le navigateur. Vous pouvez également personnaliser la taille de la page, l’orientation et la marge de la page, 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 y en a beaucoup d’autres qui améliorent l’expérience de la création de Diagrams.
Lignes de grille
Les lignes de grille fournissent un guide pour aligner les objets.
Disposition de la page
Donnez une apparence de page à la surface de dessin en utilisant la taille de la page, l’orientation et les marges.
Info-bulle
Utilisez les 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 Angular Diagram assure que chaque cellule est accessible via le clavier. Les principales fonctionnalités comme le tri, la sélection et l’édition peuvent être effectuées uniquement à l’aide des commandes clavier ; aucune interaction à la souris n’est requise. Cela permet de 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. Cela vous permet de personnaliser facilement même les fonctionnalités complexes du Diagram.
Compatibilité des versions Angular
Avec l’amélioration continue des versions Angular, le Angular Diagram est maintenu à jour afin d’être compatible avec la dernière version.
Autres frameworks pris en charge
Le logiciel de Diagram est disponible pour les frameworks Blazor, React, JavaScript et Vue. Explorez ses options spécifiques à chaque plateforme via les liens suivants :
Navigateurs pris en charge
Le Angular Diagram fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Angular Diagram ? Nos tutoriels vidéo et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant J’aimerais le lire maintenantPlus de 145+ composants d'interface utilisateur Angular
TOUS LES COMPOSANTS
Composants intelligents
Grilles
Visualisation des données
Listes déroulantes
Visionneuses et éditeurs de fichiers
Boutons
Chat interactif
Champs de saisie
Navigation
Formulaires
Notifications
Foire aux questions
Pourquoi choisir le Angular Diagram Syncfusion Essential Studio® ?
- Visualisez, créez et modifiez des Diagrams interactifs.
Temps de chargement ultra rapide, interactions UI riches et navigation clavier.
Chargez une large gamme de nœuds avec des performances optimales.
Prise en charge des Diagrams de flux, de nombreuses formes intégrées et une liaison de données flexible.
Organisez facilement les composants du Diagram dans des mises en page telles que l’Organigramme, la Carte mentale, l’Arbre radial et l’Arbre hiérarchique.
Capacités d’exportation et d’impression sans faille.
- L’un des meilleurs Diagrams Angular sur le marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
Configuration simple et API.
- 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 une documentation pour apprendre rapidement et démarrer avec le Angular Diagram.
Quel est le prix du Angular Diagram Syncfusion ?
Nous ne vendons pas le Angular Diagram séparément. Il n’est disponible à l’achat que dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris le Angular 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 savoir si vous êtes éligible à des réductions supplémentaires.
Où puis-je trouver la démo de Angular Diagram Syncfusion ?
Vous pouvez trouver notre démo de Angular Diagram, qui montre comment rendre et configurer un Diagram.
Puis-je acheter le composant Angular Diagram de Syncfusion séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre Angular Diagram, ne sont pas vendus individuellement. Ils sont uniquement disponibles dans le cadre d’une licence d’équipe. Cependant, nous avons fixé un prix compétitif pour le produit, il ne coûte donc qu’un peu plus cher que ce que certains autres fournisseurs facturent pour leur composant Diagram seul. Nous avons également constaté que, d’après notre expérience, nos clients commencent généralement par utiliser l’un de nos produits, puis étendent rapidement leur utilisation à plusieurs produits, nous avons donc pensé qu’il était préférable d’offrir tous les 1,600+ composants et frameworks pour un abonnement qui commence à 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 êtes éligible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement le Angular Diagram Syncfusion ?
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 chiffre d’affaires annuel brut inférieur à 1 million de dollars américains, 5 développeurs ou moins, et 10 employés ou moins au total.
Comment démarrer avec le Angular Diagram Syncfusion ?
Un bon point de départ serait notre documentation complète pour démarrer.
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 Angular Diagram 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 tutoriels et blogs sur le Angular Diagram
Les vidéos de tutoriels et les articles de blog sur le Angular Diagram vous guideront dans la création de votre première application avec ces composants Angular. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités, annoncent les nouvelles versions, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos dernières publications sur notre blog et nos chaînes de tutoriels vidéo pour les mises à jour du Angular Diagram.
BLOG
Construire des arbres hiérarchiques multi-parents avec la bibliothèque de Diagrams Angular
19 NOVEMBRE 2024
BLOG
19 NOVEMBRE 2024
