JavaScript Diagram – Leistungsstarkes Element
- Interaktive Diagram ansehen,erstellen,bearbeiten.
- Flussdiagramme&Mindmaps bauen.
- Viele Knoten optimaler Leistung effizient laden gut.
- Knoten in komplexen Layouts automatisch ordne.
- Nahtlose Interaktion und flexible Bearbeitung erleben.
Quick Overview Video
Trusted by the world’s leading companies
Überblick
Das JavaScript Diagram ist eine funktionsreiche Architektur-Diagram Library zum Visualisieren, Erstellen und Bearbeiten interaktiver Diagramme. Es unterstützt die Erstellung von Flussdiagrammen, Organigrammen, Mindmaps und BPMN-Diagrammen, entweder über Code oder eine visuelle Oberfläche.
Warum Syncfusion JavaScript Diagram wählen?
Automatisch Layout
Knoten automatisch anordnen basierend auf einem vordefinierten Layout-Algorithmus.
Nahtlose Datenbindung
Diagramme mit Knoten und Verbindern füllen, die basierend auf Daten aus Datenquellen erstellt und positioniert werden. Ohne Code schreiben zu müssen, können Sie Daten in jedem Format einfach konvertieren, abbilden und im Diagramm nutzen, indem Sie einige Eigenschaften festlegen.
Interaktive Bearbeitung
Das JavaScript Diagram ermöglicht interaktives Schwenken und Zoomen, Einrasten, Rückgängigmachen und Wiederherstellen, Schablonieren, Größenänderung und Drehen.
Passt sich jeder Auflösung an
Das Diagramm verfügt über ein hochreaktionsschnelles Layout und ein optimiertes Design für Desktops, Touchscreens und Telefone. Es funktioniert gut auf allen Mobiltelefonen mit iOS-, Android- oder Windows-Betriebssystemen.
Galerie wiederverwendbarer Symbole
Die SymbolPalette zeigt eine Sammlung von Paletten an. Eine Palette zeigt eine Reihe von Knoten und Konnektoren an, die Sie per Drag & Drop in das Diagramm ziehen können.
Eigene Vorlagenformen erstellen
Jedes grafische Objekt visualisieren, indem Knoten verwendet werden, die gleichzeitig auf einer Diagrammseite angeordnet und manipuliert werden können. Das Diagramm ermöglicht es Ihnen, verschiedene Arten von Knoten hinzuzufügen.
Attraktive, anpassbare Themes
Modernes Design mit mehreren integrierten Themes, wie z.B. Fluent, Tailwind CSS, Bootstrap, Material und Fabric. Nutzen Sie das Online Theme Studio Tool, um Themes des Diagramms einfach anzupassen.
Globalisierung und Lokalisierung
Ermöglichen Sie Benutzern aus verschiedenen Regionen die Nutzung der Komponente, indem Sie Datumsangaben, Währungen und Nummerierungen an deren Vorlieben anpassen.
KI-Diagramm für müheloses Design
Generieren Sie visuelle Darstellungen aus Reintext mithilfe unserer KI-gestützten Diagram Komponents. Erstellen, bearbeiten und verstehen Sie komplexe Diagramme schnell.
-
Intelligente Diagramme aus Text: Beschreiben Sie Ihr Konzept und lassen Sie die KI das Diagramm für Sie erstellen.
- Erfahren Sie, wie Sie intelligente Diagramme aus Text erstellen
JavaScript Diagram Code-Beispiel
Beginnen Sie einfach mit dem JavaScript Diagram mit ein paar einfachen Zeilen HTML- und TS-Code, wie unten gezeigt. Außerdem können Sie unser JavaScript Diagram Beispiel erkunden, das zeigt, wie ein Diagramm in JavaScript gerendert und konfiguriert wird.
<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');Flussdiagramm
Die JavaScript Diagram bietet alle Standard-Flussdiagrammformen als vorgefertigte Objekte zum Erstellen von Flussdiagrammen, wodurch sie sich einfach mit einem einzigen Aufruf zur Diagrammoberfläche hinzufügen lassen.
Organigramm
Ordnen Sie die Positionen der übergeordneten und untergeordneten Knoten automatisch mit einem integrierten, automatischen Layoutalgorithmus an, der speziell für Organigramme erstellt wurde.
Mindmap
Der automatische Layout-Algorithmus ist auch für Mind-Map-Diagramme entwickelt worden. Sie können definieren, welcher Knoten im Zentrum stehen soll und welche Knoten auf der Diagrammoberfläche um den zentralen Knoten herum platziert werden sollen.
Knoten
Visualisieren Sie beliebige graphische Objekte mit Knoten, die gleichzeitig auf einer Diagrammseite angeordnet und manipuliert werden können. Sie ermöglichen folgendes:
- Verwenden Sie viele vordefinierte Standardformen.
- Erstellen und fügen Sie einfach benutzerdefinierte Formen hinzu.
- Passen Sie das Erscheinungsbild eines Knotens vollständig an.
- Entwerfen Sie eine Knoten-UI-Vorlage und verwenden Sie sie über mehrere Knoten hinweg wieder.
Konnektoren
Ein Konnektor stellt eine Beziehung zwischen zwei Knoten dar.
Typen
Das JavaScript Diagram mit seinen reichhaltigen Benutzeroberflächen bietet gerade, orthogonale, polylinige und gekrümmte Konnektortypen. Sie können jeden dieser Typen je nach Art des Diagramms oder der Beziehung zwischen den verbundenen Knoten auswählen.
Überbrückung oder Linienüberspringen
Verwenden Sie Überbrückungen (Line Jumps), um den Verlauf eines Konnektors zu veranschaulichen und so das Ablesen zu erleichtern, wenn sich Konnektoren in einem dichten Diagramm überlappen.
Pfeilspitzen
Verwenden Sie verschiedene Arten von vordefinierten Pfeilspitzen, um die Flussrichtung in Flussdiagrammen zu veranschaulichen. Sie können auch Ihre eigenen benutzerdefinierten Pfeilspitzen erstellen.
Aussehen
Ähnlich wie bei Knoten kann auch das Erscheinungsbild des Konnektors beliebig angepasst werden. Das JavaScript Diagram-Steuerelement bietet eine Vielzahl von Eigenschaften, mit denen Sie die Farbe, Dicke, Strich- und Punktanzeige, Ecken und sogar Dekorateure des Konnektors anpassen können.
Anschlüsse (Verbindungspunkte)
Verbinden Sie Konnektoren über verschiedene Arten von Anschlüssen oder Verbindungspunkten mit bestimmten Stellen eines Knotens.
Beschriftungen
Zusätzliche Informationen können durch Hinzufügen von Text oder Beschriftungen zu Knoten und Konnektoren angezeigt werden.
Bearbeiten
Sie können Text zur Laufzeit hinzufügen und bearbeiten und ihn als schreibgeschützt markieren, wenn er nicht bearbeitet werden soll.
Mehrere Beschriftungen
Fügen Sie beliebig viele Beschriftungen hinzu und richten Sie diese einzeln aus.
Ausrichtung
Beschriftungen enthalten ausgefeilte Ausrichtungsoptionen: Innerhalb oder außerhalb eines Knotens platzieren, oder an den Quell- oder Zielenden eines Konnektors. Automatische Ausrichtung beim Verschieben eines Knotens oder Konnektors.
Interaktive Funktionen
Nutzen Sie interaktive Funktionen, um die Bearbeitungserfahrung eines Diagramms zur Laufzeit zu verbessern. Darüber hinaus können Sie ein Diagramm einfach mit Maus, Touchscreen oder Tastatur bearbeiten.
Auswählen und Ziehen
Wählen Sie einen oder mehrere Knoten, Konnektoren oder Annotationen aus und bearbeiten Sie sie mithilfe von Ziehpunkten oder Handles.
Größe ändern
Sie können die Größe eines Knotens in acht verschiedene Richtungen ändern und die Seitenverhältnisse eines Knotens sperren, um seine Form zu erhalten. Sie können auch die Größe mehrerer Objekte gleichzeitig ändern.
Rückgängig machen und Wiederherstellen
Machen Sie sich keine Sorgen, wenn Sie versehentlich bearbeiten; Rückgängig- und Wiederherstellungsbefehle helfen Ihnen, die jüngsten Änderungen einfach zu korrigieren.
Zwischenablage
Ausgewählte Objekte innerhalb und über Diagramme hinweg ausschneiden, kopieren, einfügen oder duplizieren.
Z-Reihenfolge
Wenn sich mehrere Objekte überlappen, steuert die Z-Reihenfolge, welches Objekt oben und welches unten liegt.
Einrasten
Knoten, Konnektoren und Annotationen präzise ausrichten, während Sie einfach an den nächstgelegenen Rasterlinien oder Objekten einrasten.
Gruppierung
Sie können mehrere Knoten zu einer Gruppe zusammenfassen und dann als einzelnes Objekt mit ihnen interagieren. Verschachtelte Gruppen sind mit unserem JavaScript Diagram-Steuerelement ebenfalls möglich.
Schnellbefehle
Häufig verwendete Befehle wie Löschen, Verbinden und Duplizieren können als Schaltflächen in der Nähe eines Selektors angezeigt werden. Dies erleichtert es Benutzern, diese Operationen schnell auszuführen, anstatt nach den richtigen Schaltflächen in einer Toolbox zu suchen.
Ausrichtung
Unsere JavaScript Diagram verfügt über vordefinierte Ausrichtungsbefehle, mit denen Sie die Knoten und Konnektoren der ausgewählten Objekte bezüglich der Auswahlgrenze ausrichten können.
Abstands-Befehle
Abstands-Befehle ermöglichen es Ihnen, ausgewählte Objekte im Diagramm in gleichen Abständen zueinander zu platzieren.
Größenbefehle
Verwenden Sie Größenbefehle, um ausgewählte Knoten in Bezug auf das zuerst ausgewählte Objekt gleich groß zu machen.
Ausrichtungs-Befehle
Alle Knoten oder Konnektoren in der Auswahlliste können links, rechts oder mittig horizontal, oder oben, unten oder mittig vertikal in Bezug auf die Auswahlgrenze ausgerichtet werden.
Automatisches Layout
Knoten werden automatisch basierend auf einem vordefinierten Layout-Algorithmus angeordnet. Verfügt über einen integrierten hierarchischen Baum, radialen Baum und symmetrische Layouts.
Lineal
Lineale ermöglichen es Ihnen, den Abstand von Knoten oder Konnektoren vom Ursprung der Seite zu messen. Dies ist besonders nützlich bei der Erstellung von maßstabsgetreuen Modellen.
Symbolpalette
Das JavaScript Diagram-Steuerelement enthält eine Galerie von Schablonen, wiederverwendbaren Symbolen und Knoten, die auf die Oberfläche eines Diagramms gezogen werden können.
Übersichtsfenster
Das Übersichtsfenster verbessert die Navigation beim Erkunden großer Diagramme. Es zeigt eine kleine Vorschau der gesamten Diagrammseite an, die es Benutzern ermöglicht, darin zu zoomen und zu schwenken.
Zeichenwerkzeuge
Zeichnen Sie alle Arten von integrierten Knoten und verbinden Sie sie interaktiv mit Konnektoren, indem Sie einfach klicken und auf den Zeichenbereich ziehen.
Zoom- und Schwenkwerkzeuge
Betrachten Sie ein großes Diagramm detailliert oder erhalten Sie eine umfassendere Ansicht durch Vergrößern und Verkleinern. Navigieren Sie außerdem mit dem Schwenken von einem Bereich des Diagramms zu einem anderen.
Exportieren
Sie können ein Diagramm in verschiedene Bilddateien wie PNG, JPEG, BMP und SVG exportieren.
Diagramme direkt aus dem Browser drucken. Sie können auch die Seitengröße, Ausrichtung und Seitenränder anpassen und ein Diagramm an eine einzelne Seite anpassen.
Serialisierung
Speichern Sie den Status Ihres JavaScript Diagrams im JSON-Format und laden Sie es später zur weiteren Bearbeitung mit dem Serializer wieder.
Sonstiges
Zusätzlich zu allen bisher aufgeführten Funktionen gibt es noch viele weitere, die das Diagrammerlebnis verbessern.
Rasterlinien
Rasterlinien bieten Orientierungshilfe beim Ausrichten von Objekten im Diagramm.
Seitenlayout
Verleihen Sie der Zeichenfläche ein seitenartiges Erscheinungsbild durch Seitengröße, Ausrichtung und Ränder.
Tooltip
Verwenden Sie Tooltips, um zusätzliche Informationen zu einem Knoten bereitzustellen.
Kontextmenü
Häufig verwendete Befehle einfach einem Kontextmenü zuordnen.
Zusätzliche Funktionen
Tastaturnavigation
Das JavaScript Diagram-Steuerelement stellt sicher, dass jede Zelle mit der Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können ausschließlich mit Tastaturbefehlen ausgeführt werden; keine Mausinteraktion ist erforderlich. Dies hilft bei der Erstellung hochgradig zugänglicher Anwendungen mit diesem Steuerelement.
Entwicklerfreundliche APIs
Entwickler können die Benutzeroberfläche und das Verhalten des Ereigniskalenders über die integrierten, entwicklerfreundlichen APIs vollständig steuern. Es ermöglicht Ihnen, selbst komplexe Diagrammfunktionen mit Leichtigkeit anzupassen.
Andere unterstützte Frameworks
Das Diagramm ist für die Frameworks Blazor, React, Angular und Vue verfügbar. Erkunden Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das JavaScript Diagram funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Erleben Sie, wie unsere Komponenten in wunderschöne und effiziente Apps verwandelt werden können
Logikschaltungsdesigner
Der Logikschaltungsdesigner ist eine Webanwendung, die zum Entwerfen und Simulieren digitaler Logikschaltungen mit einer Vielzahl von Logikgattern sowie Ein- und Ausgangskomponenten dient, um deren Funktionsweise besser zu visualisieren und zu verstehen und Ihr Design mit anderen zu teilen.
Sie sind sich nicht sicher, wie Sie Ihr erstes JavaScript Diagram erstellen sollen? Unsere Dokumentation kann Ihnen helfen.
Ich möchte es jetzt lesenÜber 145+ JavaScript UI-Steuerelemente
ALLE STEUERUNGEN
SMARTE KOMPONENTEN
RASTER
DROPDOWN-MENÜS
EINGABEN
DATENVISUALISIERUNG
NAVIGATION
SCHALTFLÄCHEN
INTERAKTIVER CHAT
BENACHRICHTIGUNG
FORMULARE
Häufig gestellte Fragen
Warum sollten Sie Syncfusion JavaScript Diagram wählen?
Das JavaScript Diagram mit seinen umfangreichen Funktionen bietet Folgendes:
- Interaktive Diagramme visualisieren, erstellen und bearbeiten.
Blitzschnelle Ladezeiten, reiche Benutzeroberflächen-Interaktionen und [Tastatur]-Navigation.
Eine Vielzahl von Knoten mit optimaler Leistung laden.
Unterstützung für Flussdiagramme, viele integrierte Formen und flexible Datenbindung.
Einfache Anordnung von Diagram Komponentsn in Layouts wie Organigramm, Mindmap, Radialbaum und Hierarchischer Baum.
Nahtlose Export- und Druckfunktionen.
- Eines der besten JavaScript Diagrame auf dem Markt, das eine funktionsreiche Benutzeroberfläche zur Interaktion mit der Software bietet.
- Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobil-touch-freundlich und responsiv.
Umfangreiche Lernressourcen wie Demos und Dokumentation zum schnellen Lernen und Einstieg in das JavaScript Diagram.
Was kostet das Syncfusion JavaScript Diagram?
Wir verkaufen das JavaScript Diagram nicht separat. Es ist nur im Rahmen der Syncfusion Team Lizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des JavaScript Diagrams. Der Preis der Team Lizenz beginnt bei 395 US-Dollar pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte in Frage kommen.
Wo finde ich die Syncfusion JavaScript Diagram-Demo?
Unsere JavaScript Diagram-Demo finden Sie hier, die zeigt, wie man ein Diagramm rendert und konfiguriert.
Was ist das Syncfusion JavaScript Diagram-Steuerelement?
Das Syncfusion JavaScript Diagram ist ein leistungsstarkes Steuerelement zum Erstellen interaktiver und anpassbarer Diagramme, Flussdiagramme, Organigramme, UML-Diagramme und mehr in Webanwendungen.
Wie exportiere ich das JavaScript Diagram als Bild?
Sie können das JavaScript Diagram in verschiedene Bildformate wie PNG, JPEG und SVG exportieren, indem Sie die Methode exportDiagram verwenden. Weitere Informationen hierzu finden Sie in dieser Dokumentation.
Kann ich die Syncfusion JavaScript Diagram Komponents separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobile und Desktop, einschließlich unseres JavaScript Diagrams, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch wettbewerbsfähig bepreist, sodass es nur unwesentlich mehr kostet als das, was einige andere Anbieter für ihre Diagram Komponents allein verlangen. Wir haben auch festgestellt, dass unsere Kunden erfahrungsgemäß oft mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher waren wir der Meinung, dass es am besten ist, alle 1,600+ Komponenten und Frameworks für eine Abonnementgebühr anzubieten, die für ein Team von 5 Entwicklern bei 395 US-Dollar pro Monat beginnt. Darüber hinaus können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte in Frage kommen.
Kann ich das Syncfusion JavaScript Diagram kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Allerdings ist auch eine kostenlose Community-Lizenz für Unternehmen und Einzelpersonen erhältlich, deren Organisationen weniger als 1 Million US-Dollar Jahresumsatz und fünf oder weniger Entwickler haben.
Wie fange ich mit Syncfusion JavaScript Diagram an?
Ein guter Ausgangspunkt wäre unsere umfassende Einstiegsdokumentation.
Wie erstelle ich ein Flussdiagramm mit dem JavaScript Diagram?
Das JavaScript Diagram-Steuerelement enthält standardmäßig Formen für Flussdiagramme. Weitere Informationen finden Sie in dieser Dokumentation.
Kann das JavaScript Diagram-Steuerelement zur Erstellung interaktiver Diagramme verwendet werden?
Ja, das Syncfusion JavaScript Diagram kann zur Erstellung interaktiver Diagramme verwendet werden. Es unterstützt mehrere Formen der Auswahl, Ziehen, Größenänderung, Rotation, Zoomen und mehr. Weitere Informationen finden Sie in dieser Dokumentation.
Unsere Kunden lieben uns
Mit einem ausgezeichneten Toolset und einem großartigen Supportteam verkürzt Syncfusion® die Entwicklungszeit der Kunden.Hier sind einige ihrer Erfahrungen.
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)
Echte Erfolgsgeschichten ansehen
Entwickler auf der ganzen Welt vertrauen auf Syncfusions Essential Studio, um komplexe Projekte zu vereinfachen und die Auslieferung zu beschleunigen. Mit einer umfangreichen Bibliothek an UI-Steuerelementen, leistungsstarken SDKs und zuverlässigem Support hilft Essential Studio Teams, unternehmensreife Anwendungen mit Zuversicht zu erstellen.
Fallstudien erkundenIndustrie
Softwareentwicklung
75% Kostenreduzierung
50% Schnellere Entwicklung
Industrie
Versorgungsunternehmen (Öl und Gas)
450+ Stunden eingespart
Gestraffte Prozesse und Entwicklungsaufwand in Stunden reduziert.
Fortschrittliche, flexible Funktionen
Benutzer durch robuste und vielseitige Funktionalität befähigt.
Industrie
Software und Technologie
1000+ Stunden eingespart
Beschleunigte Entwicklung mit unternehmensreifen UI-Komponenten.
Effizientes Dateimanagement
Vereinfachte Workflows mit Dokumentbibliotheken, ohne sie von Grund auf neu zu erstellen.
Industrie
Software und Technologie
2 Jahre Verzögerung vermieden
Zwei Jahre Verzögerungen durch proaktive Planung verhindert.
Termingerechte Lieferung
Projekte termingerecht mit zuverlässigen Steuerelementen geliefert.
Industrie
IT-Dienstleistungen und IT-Beratung
Verbesserte Leistung
Große Datensätze werden mit einfacher Anpassung und schnellem Debugging verarbeitet.
Hochgradig anpassbar
Plug-and-Play-Steuerelemente mit schneller Vorlagenintegration.
Industrie
Professionelle Dienstleistungen
Sofortiger Zugriff
Schnelle Verfügbarkeit von Funktionen und Ressourcen.
Reduzierte Abhängigkeiten
Weniger Abhängigkeiten für eine schnellere Entwicklung.
Von Benutzern auf der ganzen Welt bewertet
Syncfusion JavaScript Diagram-Ressourcen
UI-Kits
Figma-Download
Figma-Download
Auszeichnungen
Viele behaupten, dass sie herausragend sind. Doch wenn andere das erkennen und loben, bedeutet es viel mehr. Syncfusion® präsentiert mit Stolz folgende Branchenauszeichnungen.
Aktuelle Aktivitäten in JavaScript Diagram-Blogs
Die JavaScript Diagram-Blogbeiträge helfen Ihnen dabei, Ihre erste App mit JavaScript-Steuerelementen zu erstellen. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Features, kündigen neue Feature-Veröffentlichungen an, erklären Best Practices und zeigen Beispielszenarien. Entdecken Sie unsere neuesten Beiträge auf unseren Blog-Kanälen für JavaScript Diagram-Updates.
