React Diagram – Leistungsstarke & reiche Komponente
- Gestalte, visualisiere, bearbeite Diagramme interaktiv.
- Flussdiagramme, BPMN-Formen und Mindmaps bau.
- Eine Vielzahl von Knoten mit optimaler Leistung laden.
- Knoten in komplexen Layouts automatisch ordne.
- Erlebe nahtlose Interaktion und Bearbeitung.
Quick Overview Video
Trusted by the world’s leading companies
Überblick
Das React Diagram ist eine funktionsreiche Architekturdiagrammbibliothek zur Visualisierung, Erstellung und Bearbeitung interaktiver Diagramme. Es unterstützt die Erstellung von Flussdiagrammen, Organigrammen, Mindmaps und BPMN-Diagrammen, entweder durch Code oder eine visuelle Benutzeroberfläche.
Warum Syncfusion React Diagram wählen?
Automatisch Layout
Knoten automatisch anordnen basierend auf einem vordefinierten Layout-Algorithmus.
Nahtlose Datenbindung
Füllen Sie Diagramme mit Knoten und Konnektoren, die basierend auf Daten aus Datenquellen erstellt und positioniert werden. Ohne Code schreiben zu müssen, können Sie Daten in jedem Format einfach im Diagramm konvertieren, zuordnen und nutzen, indem Sie einige Eigenschaften festlegen.
Interaktive Bearbeitung
Das React Diagram ermöglicht Ihnen, interaktiv zu schwenken und zu zoomen, einzufangen, rückgängig zu machen und wiederherzustellen, Schablonen zu verwenden, die Größe zu ändern und zu drehen.
Passt sich jeder Auflösung an
Das Diagramm verfügt über ein hochresponsives Layout und ein optimiertes Design für Desktops, Touchscreens und Telefone. Es funktioniert gut auf allen Mobiltelefonen mit iOS, Android oder Windows OS.
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
Visualisieren Sie jedes grafische Objekt mit Knoten, die gleichzeitig auf einer Diagrammseite angeordnet und manipuliert werden können. Das Diagramm ermöglicht das Hinzufügen verschiedener Arten von Knoten.
Attraktive, anpassbare Themen
Modernes Design mit mehreren integrierten Themen, wie Fluent, Tailwind CSS, Bootstrap, Material und Fabric. Nutzen Sie das Online Theme Studio Tool, um Themen 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 die bevorzugten Einstellungen anpassen.
KI-bereite Diagramme für mühelose Visualisierung
Diagramme funktionieren sofort mit KI. Verbessern Sie sie einfach durch die Text-zu-Diagramm-Generierung – betrieben von Ihren bevorzugten KI-Tools. Erstellen, bearbeiten und verstehen Sie komplexe Diagramme schneller als je zuvor.
-
Text-zu-Diagramm: Verwandeln Sie natürliche Sprache in Flussdiagramme, Mindmaps oder Sequenzdiagramme – kein manuelles Zeichnen erforderlich.
- Sehen Sie, wie man Diagramme mit Text erstellt
React Diagram Codebeispiel
Beginnen Sie einfach mit dem React Diagram mit wenigen einfachen Zeilen TSX-Code, wie unten gezeigt. Entdecken Sie auch unser React Diagram Beispiel, das Ihnen zeigt, wie Sie ein Diagramm in React rendern und konfigurieren.
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" />;
}
}Flussdiagramm
Das React Diagram bietet alle Standard-Flussdiagrammformen als vorgefertigte Objekte, um Flussdiagramme zu erstellen, was es einfach macht, sie mit einem einzigen Aufruf zur Diagrammoberfläche hinzuzufügen.
Organigramm
Ordnen Sie die Positionen der Eltern- und Kindknoten automatisch mit einem integrierten, automatischen Layout-Algorithmus an, der speziell für Organigramme entwickelt wurde.
Mindmap
Der automatische Layout-Algorithmus ist auch für Mindmap-Diagramme entwickelt. Sie können definieren, welcher Knoten im Zentrum und welche Knoten um den zentralen Knoten auf der Diagrammfläche platziert werden sollen.
Knoten
Visualisieren Sie jedes grafische Objekt mit Knoten, die gleichzeitig auf einer Diagrammseite angeordnet und manipuliert werden können. Sie ermöglichen Folgendes:
- Viele vordefinierte Standardformen verwenden.
- Einfaches Erstellen und Hinzufügen benutzerdefinierter Formen.
- Das Erscheinungsbild eines Knotens vollständig anpassen.
- Eine Knoten-UI-Vorlage entwerfen und über mehrere Knoten hinweg wiederverwenden.
Konnektoren
Ein Konnektor stellt eine Beziehung zwischen zwei Knoten dar.
Typen
Das React Diagram bietet gerade, orthogonale, Polylinien- und Kurvenkonnektortypen. Sie können diese je nach Diagrammtyp oder Beziehung zwischen den verbundenen Knoten auswählen.
Überbrückung oder Linienübersprünge
Verwenden Sie Überbrückung (Linienübersprünge), um den Verlauf eines Verbinders zu veranschaulichen, was das Lesen erleichtert, wenn sich Verbinder in einem dichten Diagramm überlappen.
Pfeilspitzen
Verwenden Sie verschiedene Arten vordefinierter Pfeilspitzen, um die Flussrichtung in Flussdiagrammen zu veranschaulichen. Sie können auch Ihre eigenen benutzerdefinierten Pfeilspitzen erstellen.
Erscheinungsbild
Ähnlich wie bei Knoten lässt sich auch das Aussehen und Verhalten des Konnektors beliebig anpassen. Die React Diagram-Komponente bietet eine Vielzahl von Eigenschaften, mit denen Sie die Farbe, Dicke, Strich- und Punktanzeige, Ecken und sogar Dekorateure des Konnektors anpassen können.
Ports (Verbindungspunkte)
Verbinden Sie Konnektoren über verschiedene Arten von Ports oder Verbindungspunkten mit bestimmten Stellen an einem Knoten.
Beschriftungen
Zusätzliche Informationen können durch das Hinzufügen von Text oder Beschriftungen an 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 umfassen ausgeklügelte Ausrichtungsoptionen: Platzieren Sie sie innerhalb oder außerhalb eines Knotens oder am Quell- oder Zielende eines Konnektors. Automatische Ausrichtung, wenn ein Knoten oder Konnektor verschoben wird.
Interaktive Funktionen
Verwenden Sie interaktive Funktionen, um die Bearbeitungserfahrung eines React Diagramms zur Laufzeit zu verbessern. Darüber hinaus können Sie ein Diagramm einfach mit Maus-, Touchscreen- oder Tastaturschnittstellen bearbeiten.
Auswählen und Ziehen
Wählen Sie einen oder mehrere Knoten, Konnektoren oder Anmerkungen aus und bearbeiten Sie sie mithilfe von Ziehpunkten oder Handlern.
Größe ändern
Sie können die Größe eines Knotens in acht verschiedene Richtungen ändern und das Seitenverhältnis eines Knotens sperren, um seine Form beizubehalten. 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 – die Befehle zum Rückgängigmachen und Wiederherstellen helfen Ihnen, die letzten Änderungen einfach zu korrigieren.
Zwischenablage
Ausschneiden, Kopieren, Einfügen oder Duplizieren ausgewählter Objekte innerhalb und zwischen Diagrammen.
Z-Reihenfolge
Wenn sich mehrere Objekte überlappen, steuert die Z-Reihenfolge, welches Objekt oben und welches unten liegt.
Einrasten
Richten Sie Knoten, Konnektoren und Anmerkungen präzise aus, indem Sie sie beim Ziehen an den nächstgelegenen Rasterlinien oder Objekten einrasten lassen.
Gruppierung
Sie können mehrere Knoten zu einer Gruppe zusammenfassen und dann als einzelnes Objekt mit ihnen interagieren. Auch verschachtelte Gruppen sind mit unserer React Diagram-Komponente möglich.
Schnellbefehle
Häufig verwendete Befehle wie Löschen, Verbinden und Duplizieren können als Schaltflächen neben einem Selektor angezeigt werden. Dies erleichtert es Benutzern, diese Vorgänge schnell auszuführen, anstatt nach den richtigen Schaltflächen in einer Toolbox suchen zu müssen.
Ausrichtung
Unsere React Diagram Library verfügt über vordefinierte Ausrichtungsbefehle, mit denen Sie die Knoten und Konnektoren der ausgewählten Objekte relativ zum Auswahlrahmen ausrichten können.
Abstandsbefehle
Abstandsbefehle ermöglichen es Ihnen, ausgewählte Objekte im Diagramm in gleichen Abständen voneinander zu platzieren.
Größenbefehle
Verwenden Sie Größenbefehle, um ausgewählte Knoten in Bezug auf das erste ausgewählte Objekt gleich groß zu machen.
Ausrichtungsbefehle
Alle Knoten oder Konnektoren in der Auswahlliste können horizontal links, rechts oder mittig oder vertikal oben, unten oder mittig in Bezug auf den Auswahlrahmen ausgerichtet werden.
Automatisches Layout
Knoten automatisch basierend auf einem vordefinierten Layout-Algorithmus anordnen. Enthält integrierte hierarchische Baum-, Radialbaum- 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 beim Erstellen von Maßstabsmodellen.
Symbolpalette
Die React Diagram Library enthält eine Galerie von Schablonen, wiederverwendbaren Symbolen und Knoten, die auf die Oberfläche eines Diagramms gezogen werden können.
Übersichtspanel
Das Übersichtspanel verbessert die Navigationserfahrung beim Erkunden großer Diagramme. Es zeigt eine kleine Vorschau der gesamten Diagrammseite an, die Benutzern das Zoomen und Schwenken innerhalb des Diagramms ermöglicht.
Zeichenwerkzeuge
Zeichnen Sie alle Arten von integrierten Knoten und verbinden Sie diese interaktiv mit Konnektoren, indem Sie einfach auf den Zeichenbereich klicken und ziehen.
Zoom- und Schwenkwerkzeuge
Betrachten Sie ein großes Diagramm genau oder verschaffen Sie sich einen breiteren Überblick durch Zoomen herein und heraus. Navigieren Sie außerdem von einem Bereich des Diagramms zu einem anderen, indem Sie das Diagramm schwenken.
Exportieren
Sie können ein Diagramm in verschiedene Bilddateien wie PNG, JPEG, BMP und SVG exportieren.
Diagramme 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
Sie können den Zustand Ihres Diagramms im JSON-Format speichern und später zur weiteren Bearbeitung mit dem Serializer wieder laden.
Verschiedenes
Zusätzlich zu allen bisher aufgeführten Funktionen gibt es noch viele weitere, die das Diagrammerlebnis verbessern.
Rasterlinien
Rasterlinien bieten Orientierung beim Versuch, Objekte auszurichten.
Seitenlayout
Verleihen Sie der Zeichenfläche ein seitenähnliches Aussehen mithilfe von Seitengröße, Ausrichtung und Rändern.
Tooltip
Verwenden Sie Tooltips, um zusätzliche Informationen zu einem Knoten bereitzustellen.
Kontextmenü
Häufig verwendete Befehle können einfach dem Kontextmenü zugewiesen werden.
Zusätzliche Funktionen
Tastaturnavigation
Die React Diagram-Steuerung stellt sicher, dass jede Zelle über die Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können allein mit Tastaturbefehlen ausgeführt werden; keine Mausinteraktion ist erforderlich. Dies hilft bei der Erstellung hochgradig barrierefreier Anwendungen mit dieser Steuerung.
Entwicklerfreundliche APIs
Entwickler können die UI und das Verhalten des Ereigniskalenders vollständig über seine integrierten, entwicklerfreundlichen APIs steuern. Es ermöglicht Ihnen, selbst komplexe Diagrammfunktionen mit Leichtigkeit anzupassen.
Sie wissen nicht, wie Sie Ihr erstes React Diagram erstellen sollen? Unsere Tutorial-Videos und Dokumentation können helfen.
Ich möchte es jetzt ansehen Ich möchte es jetzt lesenEntdecken Sie Syncfusions vollständiges React-Komponenten-Ökosystem
Entdecken Sie über 145+ React-UI-Komponenten mit bewährten, produktionsreifen Steuerelementen und den neuesten reinen React-Komponenten, die nativ für die moderne Web-App-Entwicklung erstellt wurden.
-
React-Komponenten
-
Reine React-Komponenten
-
SMARTE KOMPONENTENRASTEREDITORSDROPDOWN-MENÜSEINGABENDATENVISUALISIERUNGNAVIGATIONSCHALTFLÄCHENINTERAKTIVER CHATBENACHRICHTIGUNGFORMULARE
-
RasterDatenvisualisierungNavigationSchaltflächenEingaben
Häufig gestellte Fragen
Warum sollten Sie Syncfusion React Diagram wählen?
Das Syncfusion React Diagram bietet die folgenden Funktionen:
- Visualisieren, Erstellen und Bearbeiten interaktiver Diagramme.
Blitzschnelle Ladezeiten, reichhaltige UI-Interaktionen und Tastatur-Navigation.
Laden Sie eine Vielzahl von Knoten mit optimaler Leistung.
Flussdiagramm-Unterstützung, viele integrierte Formen und flexible Datenbindung.
Einfaches Anordnen von Diagrammkomponenten in Layouts wie Organigramm, Mindmap, Radialbaum und Hierarchischer Baum.
Nahtlose Export- und Druckfunktionen.
- Eines der besten React-Diagramme auf dem Markt, das eine funktionsreiche Benutzeroberfläche zur Interaktion mit der Software bietet.
- Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobilfreundlich und responsiv.
Umfangreiche Lernressourcen wie Demos und Dokumentation, um schnell zu lernen und mit React Diagram zu beginnen.
Was kostet Syncfusion React Diagram?
Wir verkaufen das React Diagram nicht separat. Es ist nur als Teil der Syncfusion Team Lizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des React Diagram. 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. 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 qualifiziert sind.
Wo finde ich die Syncfusion React Diagram Demo?
Sie finden unsere React Diagram Demo, die zeigt, wie das Diagramm gerendert und konfiguriert wird.
Kann ich die Syncfusion React Diagram Komponente separat erwerben?
Nein, unsere 1,600+ Komponenten und Frameworks für Web, Mobile und Desktop, einschließlich unseres React Diagram, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch so wettbewerbsfähig bepreist, dass es nur geringfügig mehr kostet als das, was einige andere Anbieter nur für ihre Diagrammkomponente verlangen. Wir haben auch festgestellt, dass unsere Kunden in unserer Erfahrung in der Regel 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 bei 395 US-Dollar pro Monat für ein Team von 5 Entwicklern beginnt. Darüber hinaus könnten 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 qualifiziert sind.
Kann ich das Syncfusion React Diagram kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Eine kostenlose Community-Lizenz ist jedoch auch für Unternehmen und Einzelpersonen erhältlich, deren Organisationen weniger als 1 Million USD Jahresumsatz und fünf oder weniger Entwickler haben.
Wie fange ich mit Syncfusion React Diagram an?
Ein guter Ausgangspunkt wäre unsere umfassende Dokumentation zum Einstieg.
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 React 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 React Diagram Blogs
Die React Diagram Blogbeiträge helfen Ihnen beim Erstellen Ihrer ersten App mit React-Komponenten. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Features, kündigen neue Feature-Releases an, erklären Best Practices und zeigen Beispiel-Szenarien. Entdecken Sie unsere neuesten Beiträge in unseren Blogkanälen für React Diagram-Updates.
