Angular Diagram - Eine funktionsreiche Architekturbibliothek
- Interaktive Charts anzeigen & bearbeiten.
- FlussDiagram, BPMN-Formen und Mindmaps erstellen.
- Eine Vielzahl von Knoten mit optimaler Leistung laden.
- Knoten automatisch im Layout anordnen.
- Nahtlose Interaktion und Bearbeitungsmöglichkeiten.
Quick Overview Video
Trusted by the world’s leading companies
Übersicht
Das Angular Diagram ist eine funktionsreiche Architekturbibliothek zum Visualisieren, Erstellen und Bearbeiten interaktiver Diagram. Es unterstützt die Erstellung von Fluss Diagram, Organigrammen, Mindmaps und BPMN- Diagram entweder über Code oder eine visuelle Oberfläche.
Warum Syncfusion Essential Studio® Angular Diagram wählen?
Automatisch Layout
Knoten automatisch anordnen basierend auf einem vordefinierten Layout-Algorithmus.
Nahtlose Datenbindung
Diagram mit Knoten und Konnektoren füllen, die basierend auf Daten aus Datenquellen erstellt und positioniert werden. Ohne Code schreiben zu müssen, können Daten in jedem Format einfach in das Diagramm konvertiert, zugeordnet und verwendet werden, indem ein paar Eigenschaften festgelegt werden.
Interaktive Bearbeitung
Das Angular Diagram ermöglicht Ihnen interaktives Schwenken und Zoomen, Einrasten, Rückgängigmachen und Wiederherstellen, Schablonieren, Ändern der Größe und Drehen.
Passt sich jeder Auflösung an
Das Diagramm hat ein sehr responsives Layout und ein optimiertes Design für Desktops, Touchscreens und Telefone. Es funktioniert gut auf allen Mobiltelefonen mit iOS, Android oder Windows OS.
Galerie der wiederverwendbaren 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 Sie mit Knoten, die gleichzeitig auf einer Diagrammseite angeordnet und bearbeitet werden können. Das Diagramm ermöglicht das Hinzufügen verschiedener Arten von Knoten.
Attraktive, anpassbare Themen
Modernes Design mit mehreren integrierten Themes 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 deren Präferenzen anpassen.
KI-gesteuerte Diagram für sofortige Visualisierung
Visualisieren Sie Ideen mühelos mit unserer KI-gesteuerten Diagrammkomponente. Erstellen Sie Diagram sofort aus natürlicher Sprache mit Text-zu-Diagramm-Technologie. Erstellen, bearbeiten und interpretieren Sie komplexe Visualisierungen mit unübertroffener Geschwindigkeit und Klarheit.
-
Versuchen Sie, Diagram aus Text zu erstellen: Beschreiben Sie Ihre Idee und sehen Sie zu, wie sie sich in ein Flussdiagramm, eine Mindmap oder ein Sequenzdiagramm verwandelt.
- Erfahren Sie, wie Sie Diagram mit Text erstellen
Angular Diagram Codebeispiel
Beginnen Sie einfach mit dem Angular Diagram mit ein paar einfachen Zeilen HTML- und TS-Codebeispiel, wie unten gezeigt. Erkunden Sie auch unser Angular Diagram Beispiel, das Ihnen zeigt, wie Sie ein Diagramm in Angular rendern und konfigurieren.
<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 {}Flussdiagramm
Das Angular Diagram stellt alle Standard-Flussdiagrammformen als vorgefertigte Objekte zur Verfügung, um FlussDiagram zu erstellen, wodurch es einfach ist, 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 speziell für Organigramme an.
Mindmap
Der automatische Layout-Algorithmus ist auch für Mindmap-Diagram konzipiert. Sie können definieren, welcher Knoten im Zentrum und welche Knoten um den zentralen Knoten auf der Diagrammoberfläche platziert werden sollen.
Knoten
Visualisieren Sie jedes grafische Objekt mithilfe von Knoten, die gleichzeitig auf der Diagrammseite angeordnet und bearbeitet werden können. Sie ermöglichen Folgendes:
- Viele vordefinierte Standardformen verwenden.
- Eigene Formen einfach erstellen und hinzufügen.
- Das Erscheinungsbild eines Knotens vollständig anpassen.
- Eine Knoten-UI-Vorlage entwerfen und wiederverwenden.
Konnektoren
Ein Konnektor stellt eine Beziehung zwischen zwei Knoten dar.
Typen
Das Angular Diagram bietet gerade, orthogonale, Polyline- und gekrümmte Konnektortypen. Sie können jeden davon basierend auf dem Diagrammtyp oder der Beziehung zwischen den verbundenen Knoten wählen.
Überbrückung oder Zeilensprünge
Verwenden Sie Überbrückungen (Linienübergänge), um den Verlauf eines Verbinders zu veranschaulichen, wodurch es einfacher wird zu erkennen, wo sich Verbinder in einem dichten Diagramm überlappen.
Pfeilspitzen
Verwenden Sie verschiedene Arten vordefinierter Pfeilspitzen, um die Flussrichtung in Fluss Diagram zu veranschaulichen. Sie können auch Ihre eigenen benutzerdefinierten Pfeilspitzen erstellen.
Erscheinungsbild
Ähnlich wie Knoten kann auch das Aussehen von Konnektoren beliebig angepasst werden. Die Angular Diagram Kontrolle bietet eine reichhaltige Auswahl an Eigenschaften, durch die Sie Konnektorfarbe, -dicke, gepunktetes und gestricheltes Aussehen, Ecken und sogar Dekorateure anpassen können.
Ports (Verbindungspunkte)
Verbinden Sie Konnektoren an bestimmten Stellen eines Knotens über verschiedene Arten von Ports oder Verbindungspunkten.
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
Beliebig viele Beschriftungen hinzufügen und einzeln ausrichten.
Ausrichtung
Beschriftungen enthalten ausgefeilte Ausrichtungsoptionen: Platzieren Sie sie innerhalb oder außerhalb eines Knotens oder am Quell- oder Zielende eines Verbinders. Automatische Ausrichtung, wenn ein Knoten oder Verbinder verschoben wird.
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 Tastaturschnittstellen bearbeiten.
Auswählen und Ziehen
Wählen Sie ein oder mehrere Knoten, Konnektoren oder Anmerkungen aus und bearbeiten Sie diese mit Daumen oder Griffen.
Größe ändern
Sie können einen Knoten in acht verschiedene Richtungen in der Größe ändern und das Seitenverhältnis eines Knotens sperren, um dessen Form beizubehalten. Sie können auch mehrere Objekte gleichzeitig in der Größe ändern.
Rückgängig machen und Wiederholen
Machen Sie sich keine Sorgen, wenn Sie versehentlich bearbeiten – die Befehle zum Rückgängigmachen und Wiederholen helfen, Fehler einfach zu korrigieren.
Zwischenablage
Ausschneiden, Kopieren, Einfügen oder Duplizieren ausgewählter Objekte innerhalb und zwischen Diagram.
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 beim Ziehen präzise aus, indem Sie einfach an den nächsten 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 auch mit unserer Angular Diagram Komponente möglich.
Schnelle Befehle
Häufig verwendete Befehle wie Löschen, Verbinden und Duplizieren können als Schaltflächen neben einem Selektor angezeigt werden. Dies erleichtert den Benutzern die schnelle Ausführung dieser Operationen, anstatt nach den richtigen Schaltflächen in einer Toolbox suchen zu müssen.
Ausrichtung
Unser Angular Diagram verfügt über vordefinierte Ausrichtungsbefehle, mit denen Sie die ausgewählten Objekte, Knoten und Konnektoren in Bezug auf die Auswahlbegrenzung ausrichten können.
Abstände-Befehle
Abstands-Befehle 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 zuerst ausgewählte Objekt gleich groß zu machen.
Ausrichtungsbefehle
Alle Knoten oder Konnektoren in der Auswahlliste können links, rechts oder mittig horizontal, oder oben, unten oder mittig vertikal in Bezug auf die Auswahlbegrenzung ausgerichtet werden.
Automatisches Layout
Knoten automatisch anordnen basierend auf einem vordefinierten Layout-Algorithmus. Enthält integrierte hierarchische Baum-, radiale Baum- und symmetrische Layouts.
Lineal
Lineale ermöglichen es Ihnen, den Abstand von Knoten oder Verbindern zum Ursprung der Seite zu messen. Dies ist besonders nützlich beim Erstellen von maßstabsgetreuen Modellen.
Symbolpalette
Das Steuerelement umfasst eine Galerie von Schablonen, wiederverwendbaren Symbolen und Knoten, die auf die Oberfläche eines Diagramms gezogen werden können.
Übersichtsfenster
Das Übersichtsfenster ermöglicht es Ihnen, die Navigation beim Erkunden großer Diagram zu verbessern. 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 diese mit Konnektoren interaktiv, indem Sie einfach auf den Zeichenbereich klicken und ziehen.
Zoom- und Schwenkwerkzeuge
Betrachten Sie ein großes Diagramm genau oder verschaffen Sie sich einen umfassenderen Überblick, indem Sie herein- und herauszoomen. Navigieren Sie außerdem von einem Bereich eines Diagramms zu einem anderen, indem Sie über das Diagramm schwenken.
Exportieren
Sie können Diagram in verschiedene Bilddateien wie PNG, JPEG, BMP und SVG exportieren.
Diagram aus dem Browser drucken. Sie können auch die Seitengröße, Ausrichtung und Seitenränder anpassen und ein Diagramm auf eine einzelne Seite anpassen.
Serialisierung
Sie können den Zustand Ihres Diagramms im JSON-Format speichern und später zur weiteren Bearbeitung mit dem Serialisierer wieder laden.
Verschiedenes
Zusätzlich zu all den bisher aufgeführten Funktionen gibt es noch viele weitere, die das Diagramrlebnis verbessern.
Rasterlinien
Rasterlinien bieten Orientierung beim Ausrichten von Objekten.
Seitenlayout
Verleihen Sie der Zeichenfläche ein seitenähnliches Aussehen durch Seitengröße, Ausrichtung und Ränder.
Tooltip
Verwenden Sie Tooltips, um zusätzliche Informationen über einen Knoten bereitzustellen.
Kontextmenü
Häufig verwendete Befehle können einfach dem Kontextmenü zugeordnet werden.
Zusätzliche Funktionen
Tastaturnavigation
Das Angular Diagram Steuerelement 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 beim Erstellen hochzugänglicher Anwendungen mit diesem Steuerelement.
Entwicklerfreundliche APIs
Entwickler können die Benutzeroberfläche und das Verhalten des Ereigniskalenders über seine integrierten, entwicklerfreundlichen APIs vollständig steuern. Es ermöglicht Ihnen, selbst die komplexen Diagrammfunktionen mühelos anzupassen.
Angular Versionskompatibilität
Mit der kontinuierlichen Verbesserung der Angular Versionen wird das Angular Diagram stets auf dem neuesten Stand gehalten, um die Kompatibilität mit der neuesten Version zu gewährleisten.
Andere unterstützte Frameworks
Das Diagramm ist für die Frameworks Blazor, React, JavaScript und Vue verfügbar. Erkunden Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Das Angular Diagram funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Sie wissen nicht, wie Sie Ihr erstes Angular Diagram erstellen sollen? Unsere Tutorial-Videos und Dokumentation können helfen.
Ich möchte es jetzt ansehen Ich möchte es jetzt lesen145+ Angular-UI-Komponenten
ALLE KOMPONENTEN
INTELLIGENTE KOMPONENTEN
GITTER
DATENVISUALISIERUNG
Dropdown-Menüs
DATEI-ANSICHTEN & BEARBEITER
TASTEN
INTERAKTIVER CHAT
EINGABEN
NAVIGATION
Formulare
BENACHRICHTIGUNG
Häufig gestellte Fragen
Warum sollten Sie sich für Syncfusion Essential Studio® Angular Diagram entscheiden?
- Interaktive Diagram visualisieren, erstellen und bearbeiten.
Blitzschnelle Ladezeiten, reichhaltige UI-Interaktionen und Tastatur-Navigation.
Eine Vielzahl von Knoten mit optimaler Leistung laden.
Unterstützung für FlussDiagram, viele integrierte Formen und flexible Datenbindung.
Diagrammkomponenten problemlos in Layouts wie Organigramm, Mindmap, Radialbaum und hierarchischer Baum anordnen.
Nahtlose Export- und Druckfunktionen.
- Eines der besten Angular-Diagram auf dem Markt, das eine funktionsreiche Benutzeroberfläche für die Interaktion mit der Software bietet.
Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobilfreundlich per Touch und responsiv.
Umfangreiche Lernressourcen wie Demos und Dokumentation, um schnell zu lernen und mit Angular Diagram zu beginnen.
Was kostet Syncfusion Angular Diagram?
Wir verkaufen das Angular Diagram nicht separat. Es ist nur als Teil der Syncfusion Teamlizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des Angular Diagrams. Der Preis für die Teamlizenz 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 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 Demo für Syncfusion Angular Diagram?
Sie finden unsere Angular Diagram Demo, die zeigt, wie man ein Diagramm rendert und konfiguriert.
Kann ich die Syncfusion Angular Diagram Komponente separat erwerben?
Nein, unsere über 1,600 Komponenten und Frameworks für Web, Mobil und Desktop, einschließlich unseres Angular Diagrams, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch preislich so gestaltet, dass es nur geringfügig mehr kostet, als einige andere Anbieter für ihre Diagrammkomponente allein verlangen. Wir haben auch die Erfahrung gemacht, dass unsere Kunden in der Regel mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern, daher hielten wir es für das Beste, alle über 1,600 Komponenten und Frameworks für eine Abonnementgebühr anzubieten, die ab 395 US-Dollar pro Monat für ein Team von 5 Entwicklern beginnt. Zusätzlich könnten wir 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 Angular 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, 5 oder weniger Entwickler und insgesamt 10 oder weniger Mitarbeiter haben.
Wie fange ich mit Syncfusion Angular Diagram an?
Ein guter Ausgangspunkt wäre unsere umfassende Einstiegsdokumentation.
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 Angular 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 Angular Diagram Tutorials und Blogs
Die Angular Diagram Tutorial-Videos und Blog-Beiträge werden Ihnen helfen, Ihre erste App mit diesen Angular-Komponenten zu erstellen. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Features, kündigen neue Feature-Veröffentlichungen an, erklären Best Practices und zeigen Beispielszenarien. Erkunden Sie unsere neuesten Beiträge in unserem Blog und über die Tutorial-Videos für Angular Diagram Updates.
