Diagramming für JavaScript, V4.4.4

Eineunabhängige Plattform für webbasierte Datenvisualisierung mit Diagrammfunktion.

Ihr Diagramm auf allen Geräten

Die JsDiagram beinhaltet sämtliche Funktionen, um webbasierte Datenvisualisierungen mit JavaScript zu erstellen. Keine Zeit mehr mit Programmieren und Austesten verschwenden – sie erhalten von Anfang an eine bewährte JavaScript Zeichnungssammlung für Ablaufdiagramme.

"Ich habe gerade bestellt und kann es kaum erwarten es in mein Projekt zu integrieren! Der Versuch meine eigene benutzerdefinierte Bibliothek für Diagrammerstellung zu schreiben, hat mich umgehauen. Ich bin begeistert wieder auf dem Weg des Fortschritts zu sein."
Mr. Kevin Sheahan, Killbox

JavaScript Flussdiagramm für Entscheidungsfindung

Die JavaScript Diagramm Komponente

Das Diagramm-Tool wurde zu 100% in JavaScript erstellt und nutzt das HTML5 Canvas Element zur Darstellung. Die Komponente hat keine Abhängigkeiten von Drittanbietern, wenn sie in modernen Browsern ausgeführt wird. Bei Bedarf können Sie Js Diagram mit jQuery oder Microsoft Ajax® verwenden, um ältere Browser und Browserversionen (vor IE11) zu unterstützen.

Video Tutorial: Getting Started mit Diagramming für JavaScript
Online Beispiel: Klassen Diagramm

Beeindruckende Vielfalt an Diagrammgrafiken

Egal, ob sie ein Diagramm für Arbeitsabläufe, Prozesse, Stammbäume oder einen Graphen erstellen wollen – die MindFusion JavaScript Sammlung beinhaltet eine Vielzahl an vorinstallierten Knotenformen. Es lassen sich sogar eigenen erstellen. Jeder Knotenpunkt kann Labels oder Bilder als Hintergrund nutzen. Zudem gibt es zahlreiche Individualisierungsmöglichkeiten – zum Beispiel Geraden oder Kurven, unterschiedliche Formen für Pfeilspitzen am Start oder Ende, Farben und Positionen. MindFusion JavaScript lässt kein Platz für Kompromisse und garantiert ihnen die besten webbasierten Ablaufdiagramme.

Schritt-für-Schritt Anleitung: Erstellen eines maßgeschneiderten Knotens.
Online Beispiel: JavaScript Diagramm-Form
Tutorial: Hinzufügen von benutzerdefinierten Formen zu Link-Segmenten.

Beste Benutzerinteraktion und Funktionalität

Interaktive Diagramme für JavaScript und HTML zu erstellen ist mit Hilfe der MindFusion Sammlung einfacher denn je. Die Nutzer ihrer Webanwendung können nach Belieben Knoten erstellen, bearbeiten, auswählen, positionieren und verändern. Es können sowohl Mausgesteuerte als auch Touchgesteuerte Anwendung Browserunabhängig verarbeitet werden. Sie können zudem zwischen verschiedenen Benutzer-Modi wählen, die festlegen wie ihre Diagramme auf Nutzeraktionen reagieren. Falls ihr Diagramm auf iOS Safari angeschaut wird, verarbeitet die Komponente ein bzw. zwei Touchvorgänge zum Erstellen, Modifizieren, Scrollen und Zoomen.

Online Dokumentation: Benutzerinteraktion.
Online Beispiel: Hinzufügen/Rückgängigmachen der Funktionen und Zwischenablagevorgängen eines JavaScript Diagramms.

Elegante API

Erfolgreiche Programmierung für Webinhalte benötigen Erfahrung, Leidenschaft und Engagement. Und die richtigen Werkzeuge! Die MindFusion JavaScript Sammlung strebt nach all dem. Sie bietet Zugang zur Programmformel eines jeden Elements. Es gibt Einstellungen, die das Aussehen des Elements oder die Steuerung der Aktionen des Benutzers ändern können. Die API ist äußerst detailgetreu, es gibt verschiedene Codierungs- und Funktionsbeispiele sowie Tutorials für den Anfang.

Online Dokumentation: Übersicht der Programmierschnittstelle.

Diagramming für JavaScript: automatische Layouts

Starke automatische Layout-Algorithmen

Automatische Algorithmen für das Grafik-Layout sind genau das richtige für ihren Arbeitsablaufplan, Tabelle, Grafik, Klassenhierarchie oder jegliches andere Ablaufdiagramm. Die JsDiagram Layouts sind schnell und einfach anzuwenden – mit Hilfe von nur einer Methode. Jeder Algorithmus bietet je nach Belieben eine Vielzahl an individuellen Anpassungsmöglichkeiten.

Online Dokumentation: Das Diagramm anlegen.
Online Beispiel: Geschichtetes Layout, Animated Tree Layout.
Automatische Layouts in Diagrammsteuerelementen.

Unwiderstehliches Aussehen

Heutzutage ist bei Webanwendungen eine gute Optik entscheidender denn je. Das MindFusion JavaScript Tool bietet zahlreiche Gestaltungsoptionen für Ablaufdiagramme mit höchster Funktionalität. Es bestehen hierbei nahezu keine Grenzen – sie können die Stifte und Pinsel für ihre Knoten und Links wählen, den Hintergrund anpassen und dem Diagramm verschiedene Glass oder Aero Effekte hinzufügen.

Online Dokumentation: Aussehen des Diagramms.
Online Beispiel: Animierte Diagramme in JavaScript.

Interaktive Diagramme in JavaScript und HTML

Zusätzliche Komponenten

Die Diagrammerstellung für JavaScript ist eine dynamische, webbasierte Visualisierungssammlung, wo sämtliche Benutzerinteraktionen vollzogen werden. Zudem steht ihnen eine hochentwickelte Übersichtsteuerung zur Verfügung, die eine Vorschau des gesamten Diagramms ermöglicht. Die NodeListView Steuerung eignet sich hervorragend, um Baumähnliche Hierarchien durch einige Mausklicks zu veranschaulichen.

Online Beispiel: Hilfssteuerungen.

TypScript-Unterstützung

Für alle jene, die TypeScript verwenden möchten, bietet die JavaScript-Diagrammbibliothek TypeScript-Definitionen der API in der Datei jsdiagram.d.ts im herunterladbaren Archiv an. Es gibt mehrere Beispiele, die die TypeScript-API veranschaulichen und Ihnen helfen, schnell zu lernen, wie Sie Ihr bevorzugtes Flowchart mit der MindFusion-Diagrammbibliothek und TypeScript implementieren können.

Die JS Diagram auf NPM

Diagrammbibliothek für React

Die Diagrammbibliothek enthält die Komponente React DiagramView. Es rendert eine Diagramminstanz, die der "Diagramm"-prop als Modell zugewiesen ist. Derzeit können die folgenden Eigenschaften auch von JSX aus gesetzt werden: allowInplaceEdit, autoResize, backBrush, behavior, defaultShape, enabled, linkHeadShapeSize, linkShape, roundedLinks, routeLinks, showAnchors, showGrid. Alle Diagrammereignisse können auch über die JSX-Syntax verarbeitet werden.

Installieren Sie Diagramming für React von npm

Unterstützung für Vue und Angular

Die Diagrammbibliothek ist vollgepackt mit Modulen für Vue und Angular, die es Ihnen ermöglichen, sie mit diesen Frameworks zu verwenden. Die Komponenten sind zusammen mit Beispielprojekten Teil des Js-Diagrammarchivs und auch bei npm erhältlich.

Installieren Sie Diagramming für Angular von npm
Installieren Sie Diagramming für Vue von npm

Die Diagrammbibliothek für Angular und Vue

Die Diagramm-Bibliothek für Blazor auf NuGet

Unterstützung für Blazor

MindFusion.Diagramming.Blazor ermöglicht die Integration der JavaScript-Diagrammerstellungs-API in Blazor-Anwendungen. Es enthält eine Reihe von .NET-Wrapperklassen, die die JSInterop-API von Blazor verwenden, um die clientseitigen Objekte zu erstellen und zu bearbeiten. Das Paket bietet einfachen Zugriff von C#-Code auf die meisten MindFusion.Diagramming-Funktionen, einschließlich verschiedener Knotentypen, Layouts und Stile. Zusätzliche UI-Komponenten wie Übersicht, NodeListView, ZoomControl und Ruler sind ebenfalls enthalten.

Diagramming für Blazor von NuGet Installieren

"Zunächst ist das Produkt das beste auf dem Markt - und das habe ich recherchiert. Zweitens erhielt ich hervorragende technische Unterstützung von Mindfusion auch während des Versuchszeitraums! Ich mag das einfach, lizenzfreie Lizenzmodell, das Mindfusion Produkte eine ideale Plattform für kommerzielle Anwendungen macht."

Herr Mark Horbal, unabhängiger Entwickler

Weitere Referenzen >>