JavaScript Diagram – Contrôle puissant riche
- Visualisez, créez et modifiez des diagrammes.
- Construisez organigrammes, BPMN et cartes mentales.
- Chargez des nœuds avec performance optimale.
- Organisez 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 JavaScript Diagram est une Diagram Librarys d’architecture riche en fonctionnalités pour visualiser, créer et modifier des Diagrams interactifs. Il prend en charge la création d’organigrammes, d’organigrammes organisationnels, de cartes mentales et de Diagrams BPMN, soit via le code, soit via une interface visuelle.
Pourquoi choisir Syncfusion JavaScript Diagram ?
Disposition automatique
Organisez automatiquement les nœuds en fonction d’un algorithme de disposition 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 de données provenant de sources de données. Sans avoir à écrire de code, convertissez, mappez et consommez facilement des données de n’importe quel format dans le Diagram en définissant quelques propriétés.
Édition interactive
Le JavaScript Diagram vous permet de faire un panoramique et un zoom, d’accrocher, d’annuler et de rétablir, de pochoir, de redimensionner et de faire pivoter de manière interactive.
S’adapte à n’importe quelle résolution
Le Diagram a une disposition très réactive et une conception optimisée 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 glisser-déposer dans le Diagram.
Créez vos propres formes de modèle
Visualisez n’importe 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
Conception 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.
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.
Diagram IA pour une conception sans effort
Générez des visuels à partir de texte brut en utilisant notre composant Diagram assisté par l’IA. Créez, modifiez et comprenez des Diagrams complexes rapidement.
-
Diagrams intelligents à partir de texte : Décrivez votre concept et laissez l'IA construire le Diagram pour vous.
- Découvrez comment créer des Diagrams intelligents à partir de texte
Exemple de code de JavaScript Diagram
Démarrez facilement avec le JavaScript Diagram en utilisant quelques lignes simples de code HTML et TS comme démontré ci-dessous. Explorez également notre exemple de JavaScript Diagram qui vous montre comment rendre et configurer 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');Organigramme
La bibliothèque JavaScript Diagram fournit toutes les formes d’organigramme standard sous forme d’objets prêts à l’emploi pour construire des organigrammes, ce qui facilite leur ajout à une surface de Diagram en un seul appel.
Organigramme organisationnel
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 organisationnels.
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 une page de Diagram. Ils permettent les opérations 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.
Visualisez des informations géométriques avec la fonctionnalité de formes de base dans la bibliothèque JavaScript Diagram.
Créez des Diagrams BPMN avec la fonctionnalité de formes BPMN dans la bibliothèque JavaScript Diagram.
Intégrez du contenu HTML ou SVG à intérieur du nœud à aide de la bibliothèque JavaScript Diagram.
Connecteurs
Un connecteur représente une relation entre deux nœuds.
Types
Le JavaScript Diagram avec une interface utilisateur riche offre des types de connecteurs droits, orthogonaux, poly-lignes et incurvés. 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 parcours d’un connecteur, ce qui facilite la lecture lorsque les connecteurs se chevauchent dans un Diagram dense.
Flèches
Utilisez différents types de flèches prédéfinies pour illustrer le sens de circulation dans les organigrammes. Vous pouvez également créer vos propres flèches personnalisées.
Apparence
Comme les nœuds, l’apparence et la convivialité des connecteurs peuvent également être personnalisées à votre guise. Le contrôle JavaScript Diagram offre un ensemble riche de propriétés à travers lesquelles vous pouvez personnaliser la couleur, l’épaisseur, l’apparence en tirets et en points, les coins et même les décorateurs des connecteurs.
Ports (points de connexion)
Attachez des connecteurs à des emplacements spécifiques d’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.
Modifier
Vous pouvez ajouter et modifier du texte à l’exécution et le marquer en lecture seule s’il ne doit pas être modifié.
Plusieurs étiquettes
Ajoutez un nombre illimité d’étiquettes 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 à l’exécution. De plus, vous pouvez facilement modifier un Diagram avec une souris, un écran tactile ou des interfaces clavier.
Sélectionner et glisser
Sélectionnez un ou plusieurs nœuds, connecteurs ou annotations et modifiez-les à l’aide de poignées ou de manipulateurs.
Redimensionner
Vous pouvez redimensionner un nœud dans huit directions différentes et verrouiller le rapport d’aspect d’un nœud pour préserver sa forme. Vous pouvez également redimensionner plusieurs objets simultanément.
Annuler et rétablir
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 à l’intérieur et entre les Diagrams.
Ordre Z
Lorsque plusieurs objets se chevauchent, l’ordre Z contrôle quel objet est au-dessus et quel objet est en dessous.
Accrochage
Alignez précisément les nœuds, les connecteurs et les annotations lors du glisser-déposer en les accrochant simplement aux lignes de grille ou aux objets les plus proches.
Regroupement
Vous pouvez combiner plusieurs nœuds en un groupe, puis interagir avec eux comme un seul objet. Des groupes imbriqués sont également possibles avec notre contrôle JavaScript 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 facilite l’exécution rapide de ces opérations par les utilisateurs plutôt que de rechercher les bons boutons dans une boîte à outils.
Alignement
Notre bibliothèque JavaScript 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 zone 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 également 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 zone de sélection.
Disposition automatique
Organisez les nœuds automatiquement en fonction d’un algorithme de disposition prédéfini. Dispose d’une arborescence hiérarchique, d’une arborescence radiale et de dispositions 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 JavaScript Diagram comprend une galerie de pochoirs, de symboles réutilisables et de nœuds qui peuvent être glissé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 de Diagram complète qui permet 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 de loin en zoomant et dézoomant. Vous pouvez également naviguer d’une région à l’autre d’un Diagram en faisant un panoramique sur le Diagram.
Exportation
Vous pouvez exporter un 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 page, et adapter un Diagram à une seule page.
Sérialisation
Enregistrez l’état de votre JavaScript Diagram au format JSON et chargez-le à nouveau 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 Diagram.
Grilles
Les grilles fournissent un guide lors de l’alignement d’objets dans le Diagram.
Mise en page
Donnez une apparence de page à la surface de dessin en utilisant la taille de page, l’orientation et les marges.
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 supplémentaires
Navigation au clavier
Le contrôle JavaScript Diagram garantit que chaque cellule est accessible à l’aide du clavier. Les principales fonctionnalités telles que le tri, la sélection et l’édition peuvent être effectuées à l’aide de commandes clavier uniquement ; aucune interaction avec la souris n’est requise. Cela permet de créer des applications très accessibles à l’aide de 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 de Diagram.
Autres frameworks pris en charge
Le Diagram est disponible pour les frameworks Blazor, React, Angular et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs pris en charge
Le JavaScript Diagram fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Découvrez comment nos composants peuvent être transformés en applications magnifiques et efficaces
Concepteur de circuits logiques
Le concepteur de circuits logiques est une application web utilisée pour concevoir et simuler des circuits logiques numériques à l’aide d’un large éventail de portes logiques, de composants d’entrée et de sortie afin de mieux visualiser et comprendre leur fonctionnement, et de partager votre conception avec d’autres.
Vous ne savez pas comment créer votre premier JavaScript Diagram ? Notre documentation peut vous aider.
Je souhaite la lire maintenantPlus de 145+ contrôles d'interface utilisateur JavaScript
TOUS LES CONTROLES
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 Syncfusion JavaScript Diagram ?
Le JavaScript Diagram, doté d’un riche ensemble de fonctionnalités, offre les avantages suivants :
- Visualiser, créer et modifier des Diagrams interactifs.
Temps de chargement ultra-rapide, interactions riches en interface utilisateur et navigation au clavier.
Chargez une large gamme de nœuds avec des performances optimales.
Support des Diagrams de flux, nombreuses formes intégrées et liaison de données flexible.
Organisez facilement les composants du Diagram dans une disposition telle que Organigramme, Carte mentale, Arborescence radiale et Arborescence hiérarchique.
Capacités d’exportation et d’impression transparentes.
- L’un des meilleurs Diagrams JavaScript du marché qui offre 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.
Des ressources d’apprentissage étendues telles que des démos et de la documentation pour apprendre rapidement et démarrer avec JavaScript Diagram.
Quel est le prix de Syncfusion JavaScript Diagram ?
Nous ne vendons pas le JavaScript 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 JavaScript 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 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.
Où puis-je trouver la démo de Syncfusion JavaScript Diagram ?
Vous pouvez trouver notre démo de JavaScript Diagram, qui montre comment rendre et configurer un Diagram.
Qu’est-ce que le contrôle Syncfusion JavaScript Diagram ?
Le Syncfusion JavaScript Diagram est un contrôle puissant pour créer des Diagrams interactifs et personnalisables, des organigrammes, des organigrammes d’entreprise, des Diagrams UML, et bien plus encore dans les applications web.
Comment exporter le JavaScript Diagram en tant qu’image ?
Vous pouvez exporter le JavaScript Diagram vers différents formats d’image, tels que PNG, JPEG et SVG, en utilisant la méthode exportDiagram. Référez-vous à cette documentation pour plus d’informations.
Puis-je acheter le composant Syncfusion JavaScript Diagram séparément ?
Non, nos 1,600+ composants et frameworks pour le Web, le mobile et le bureau, y compris notre JavaScript Diagram, ne sont pas vendus individuellement. Ils ne sont disponibles qu’en tant que partie d’une licence d’équipe. Cependant, nous avons fixé des prix compétitifs pour le produit, de sorte qu’il ne coûte qu’un peu plus que ce que d’autres fournisseurs facturent pour leur composant Diagram seul. Nous avons également constaté que, selon notre expérience, nos clients commencent généralement par utiliser l’un de nos produits, puis étendent rapidement à 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 Syncfusion JavaScript 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 chiffre d’affaires annuel brut inférieur à 1 million de dollars USD et cinq développeurs ou moins.
Comment puis-je démarrer avec Syncfusion JavaScript Diagram ?
Un bon point de départ serait notre documentation complète de démarrage.
Comment créer un organigramme à l’aide du JavaScript Diagram ?
Le contrôle JavaScript Diagram inclut par défaut des formes pour les organigrammes. Référez-vous à cette documentation pour plus d’informations.
Le contrôle JavaScript Diagram peut-il être utilisé pour créer des Diagrams interactifs ?
Oui, le Syncfusion JavaScript Diagram peut être utilisé pour créer des Diagrams interactifs. Il prend en charge plusieurs formes de sélection, de glisser-déposer, de redimensionnement, de rotation, de zoom, et bien plus encore. Référez-vous à cette documentation pour plus d’informations.
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 JavaScript 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 blogs JavaScript Diagram
Les articles de blog sur le JavaScript Diagram vous guideront dans la création de votre première application avec des contrôles JavaScript. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités et les fonctions, annoncent les nouvelles versions de fonctionnalités, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos derniers articles sur nos canaux de blog pour les mises à jour du JavaScript Diagram.
