Delphi, C++ Builder & .NET Teil von sgcUI

sgcDiagram, der Flussdiagramm- und Diagrammeditor für Delphi, C++ Builder & .NET

Gib deinen Nutzern einen echten Diagrammeditor in deiner eigenen Anwendung. Sie ziehen Formen aus einer Palette, verbinden sie, tippen Text direkt ins Element und machen alles rückgängig. Du ordnest das ganze Diagramm mit einem Aufruf an, speicherst es als JSON und exportierst es als PNG oder SVG, sogar auf einem Server ohne Fenster.

VCL, FireMonkey, WinForms, WPF, Avalonia14 Formen und 3 KonnektorartenHeadless PNG und SVG, Linux64 inklusiveEnthalten in sgcUI Enterprise
FlowchartEditor-Demo: die Formenpalette mit Flussdiagramm- und Grundformen neben einem Bestellablauf

Alles, was ein Diagrammeditor braucht

Dreizehn Features, die einen echten Diagrammeditor in deine Anwendung bringen.

Ein Editor, den deine Nutzer bedienen können

Alles, was ein Nutzer von einem Diagrammwerkzeug erwartet, als zwei Komponenten, die du auf ein Formular legst.

Ein Editor, den deine Nutzer bedienen können

Lass Nutzer eigene Diagramme zeichnen

Geschäftsanwendungen brauchen oft ein Diagramm, das dem Nutzer gehört: einen Freigabeablauf, eine Prozesslandkarte, den Plan einer Produktionslinie. Statt Nutzer zu einem separaten Zeichenprogramm zu schicken, setze den Editor in dein eigenes Formular. Lege eine TsgcVCLDiagramPalette und eine TsgcVCLDiagramView ab, verbinde sie über die Eigenschaft View der Palette, und deine Nutzer ziehen Formen auf die Zeichenfläche, zeichnen Konnektoren von den Ports und tippen den Text eines Knotens direkt ein. Dasselbe Paar gibt es für FireMonkey, WinForms, WPF und Avalonia.

  • TsgcVCLDiagramPalette legt Formen per Ziehen ab, oder mit einem Klick auf den Eintrag und einem Klick auf die Ansicht
  • Ein Doppelklick, F2 oder einfaches Tippen bearbeitet den Text eines Knotens direkt im Element
  • Tool wechselt zwischen dgtSelect, dgtPan, dgtConnector und dgtShape
  • Auswählen mit Umschalt, Strg oder einem Gummiband, dann verschieben, in der Größe ändern, drehen, gruppieren, kopieren und einfügen
  • Rechts nach links für Arabisch und Hebräisch: Palette, Lineale, Minimap und Symbolleisten sind gespiegelt, während die Zeichenfläche deine Geometrie behält, und die Richtung dglRightToLeft der automatischen Layouts ordnet ein Diagramm von rechts an
Hilfethema lesen
14 Formen für Flussdiagramme, Organigramme und Skizzen

Ein Editor, den deine Nutzer bedienen können

14 Formen für Flussdiagramme, Organigramme und Skizzen

Die meisten Diagramme in Geschäftssoftware nutzen ein kleines, vertrautes Vokabular, und sgcDiagram liefert es fertig mit. Du bekommst die Flussdiagrammsymbole Prozess, Entscheidung, Terminator, Daten, Dokument, vordefinierter Prozess und Verbindungskreis, dazu das einfache Rechteck, das abgerundete Rechteck und die Ellipse, freien Text, Bilder, Container, die andere Knoten aufnehmen, und eigene Umrisse aus SVG-Pfaddaten. Jede Form kennt ihren Umriss, ihren Textbereich, ihre Standard-Ports und ihre Theme-Farben, sodass eine Entscheidung ihre Ports ohne Code an den Ecken bekommt. Platziere einen Knoten mit Left, Top, Width und Height und drehe ihn mit Angle.

  • Shape nimmt einen TsgcDiagramShape-Wert wie dgsDecision
  • dgsPath zeichnet jeden Umriss aus PathData in SVG-Pfadsyntax
  • dgsContainer hält Kindknoten über ContainerId und bewegt sie mit
  • TextAlign und TextVAlign platzieren den umbrochenen Text in der Form
Hilfethema lesen
Gerade, orthogonale und geschwungene Konnektoren

Ein Editor, den deine Nutzer bedienen können

Gerade, orthogonale und geschwungene Konnektoren

Ein Diagramm ist nur so lesbar wie seine Linien. Jeder Konnektor wählt seine Art: gerade Linien oder Polylinien über Wegpunkte, orthogonale Wege aus horizontalen und vertikalen Segmenten oder sanfte Kurven für Knotengraphen. AddConnector erzeugt einen Konnektor mit der DefaultConnectorKind des Dokuments. Pfeilspitzen an beiden Enden, gestrichelte oder gepunktete Linien und beliebig viele Beschriftungen, entlang der Linie platziert und vom Nutzer verschiebbar, machen aus einer schlichten Linie einen klaren Ja- oder Nein-Zweig. In der Registered Edition umgeht der orthogonale Router die Knoten und verteilt parallele Segmente.

  • Kind ist dgcStraight, dgcOrthogonal oder dgcCurved
  • StartArrow und EndArrow nehmen einen TsgcDiagramArrow-Wert wie dgaTriangle oder dgaDiamond
  • Labels hält beliebig viele Beschriftungen, platziert mit Position und Offset
  • Waypoints knicken gerade und geschwungene Konnektoren, wo du es willst

Community verlegt orthogonale Konnektoren als einfache Winkel, die den Knoten nicht ausweichen.

Hilfethema lesen

Ein Editor, den deine Nutzer bedienen können

Ports und Andocken halten Verbindungen zusammen

Nichts ärgert einen Nutzer mehr als ein Diagramm, das auseinanderfällt, wenn ein Kasten verschoben wird. Jedes Konnektorende ist angedockt: an einem benannten Port, am Umriss des Knotens oder frei an einem Punkt. Verschiebe, vergrößere oder drehe einen Knoten, und seine Konnektoren folgen und werden neu geroutet. Formen bringen Ports in der Mitte ihrer Seiten mit, und du kannst eigene mit Position, Seite, Flussrichtung und Beschriftung hinzufügen, so entstehen die typisierten Ein- und Ausgänge eines Node-Editors. ShowPorts bestimmt, ob die Ports immer, beim Überfahren oder nie erscheinen.

  • TsgcDiagramPort hat Id, X, Y, Side, Flow und Caption
  • Flow macht einen Port mit dgfIn zum Eingang oder mit dgfOut zum Ausgang
  • SourcePortId und TargetPortId docken ein Konnektorende an einen Port an
  • ShowPorts ist standardmäßig dgvHover, oder dgvAlways und dgvNever
Hilfethema lesen

Diagramme, die sich selbst bauen

Überlasse dem Code die Aufräumarbeit: einen Graphen anordnen, aus einer Tabelle ein Diagramm bauen oder Blöcke per Regeln verdrahten.

Diagramme, die sich selbst bauen Nur Registered

Das ganze Diagramm mit einem Aufruf anordnen

Aus Code erzeugte oder schnell von Hand gezeichnete Diagramme sehen selten aufgeräumt aus. TsgcDiagramLayeredLayout ordnet einen gerichteten Graphen in Schichten an, nach der Sugiyama-Methode, sodass Flussdiagramme, Prozesslandkarten, Zustandsautomaten und Abhängigkeitsgraphen von links nach rechts oder von oben nach unten mit wenigen Kreuzungen und geradlinigen langen Konnektoren entstehen. TsgcDiagramTreeLayout zentriert Eltern über ihren Kindern für Organigramme und Kategoriebäume. Beide laufen als ein einziger Rückgängig-Schritt, sodass ein Nutzer ein Layout ausprobieren und mit Strg+Z zurücknehmen kann. SelectionOnly ordnet nur den ausgewählten Teil an.

  • Direction ist dglTopToBottom, dglLeftToRight, dglBottomToTop oder dglRightToLeft
  • LayerSpacing und NodeSpacing legen die Abstände fest, standardmäßig 60 und 30 Welteinheiten
  • Crossings meldet nach Execute die Konnektorkreuzungen
  • TreeStyle auf dgoCompactLeaves gesetzt stapelt die Mitarbeiter eines Vorgesetzten in einer Spalte

In Community bleiben die Knoten dort, wo Nutzer oder Code sie hinsetzen.

Hilfethema lesen
Organigramme direkt aus einer Tabelle

Diagramme, die sich selbst bauen Nur Registered

Organigramme direkt aus einer Tabelle

Deine Mitarbeiter, Kostenstellen oder Produktkategorien liegen schon in einer Tabelle mit einem Schlüssel und einer Elternspalte. TsgcDiagramDataBinding macht aus diesen Zeilen ein Diagramm: Jede Zeile wird ein Knoten, jeder Elternschlüssel ein Konnektor, und das Baum- oder Schicht-Layout ordnet das Ergebnis an. Setze DataSource, KeyField, ParentField und LabelField, richte Target auf die Ansicht und setze Active. Mit LiveUpdates baut eine gespeicherte Änderung, ein Einfügen oder ein Löschen das Diagramm beim nächsten Durchlauf der Nachrichtenschleife neu auf, während das Wechseln zwischen Zeilen die Auswahl in Ruhe lässt.

  • DataSource, KeyField, ParentField und LabelField ordnen die Spalten zu
  • OnCreateNode gestaltet jeden Knoten aus beliebigen Feldern seiner Zeile
  • dgbAuto wählt das Baum-Layout für einen Baum und das Schicht-Layout bei mehreren Eltern
  • ParentSeparator listet mehrere Eltern in einem Feld auf

Community hat keine Datenbindung: Baue die Knoten im Code mit AddNode und AddConnector.

Hilfethema lesen
Node-Editoren für Workflows und Pipelines

Diagramme, die sich selbst bauen

Node-Editoren für Workflows und Pipelines

Automatisierungsregeln, Datenpipelines und IoT-Abläufe lassen sich am leichtesten als verdrahtete Blöcke verstehen. Gib jedem Knoten typisierte Eingangs-Ports links und Ausgangs-Ports rechts, schalte DefaultConnectorKind auf geschwungene Konnektoren und zeichne die Blöcke in OnDrawNode selbst, mit Titelband und farbigen Port-Punkten. OnConnecting lässt dich eine Verbindung ablehnen, bevor sie entsteht, sodass ein Zahlenausgang nie einen Texteingang speist. Die NodeEditor-Demo baut genau das, mit in einem Rückgängig-Schritt hinzugefügten Blöcken und als JSON gespeicherten Graphen samt Ports und Beschriftungen.

  • OnConnecting verhindert eine Verbindung, zum Beispiel zwischen Ports unterschiedlicher Typen
  • OnDrawNode zeichnet einen Knoten oder ergänzt die Standarddarstellung
  • DefaultConnectorKind auf dgcCurved gesetzt ergibt den klassischen Node-Graph-Look
  • Die Caption eines Ports wird neben ihm im Knoten gezeichnet
Hilfethema lesen

Rückgängig, Dateien und Export

Sicheres Bearbeiten für den Nutzer, dazu ein Dokumentformat und eine Bildausgabe, auf die sich deine Anwendung verlassen kann.

Alles rückgängig machen, an Hilfslinien einrasten

Rückgängig, Dateien und Export

Alles rückgängig machen, an Hilfslinien einrasten

Nutzer probieren aus, wenn sie wissen, dass sie zurückgehen können. Das Dokument führt einen Rückgängig- und einen Wiederholen-Stapel, und jede Nutzeraktion in der Ansicht ist ein Schritt. Im Code fassen BeginTransaction und EndTransaction beliebig viele Änderungen zu einem benannten Schritt zusammen, und Rollback verwirft sie. Kopieren und Einfügen funktionieren innerhalb der Anwendung, und wiederholtes Einfügen wird versetzt, damit nichts übereinanderliegt. Beim Verschieben oder Ändern der Größe rasten die Kanten und Mittellinien eines Knotens am Raster und an den Knoten ringsum ein, und eine Hilfslinie zeigt die Ausrichtung.

  • BeginTransaction, EndTransaction und Rollback fassen im Code vorgenommene Änderungen zusammen
  • UndoLimit behält standardmäßig 100 Schritte, und UndoCaption benennt das nächste Rückgängig
  • CopyToClipboard, CutToClipboard und PasteFromClipboard an der Ansicht
  • SnapToGrid, SnapToGuides und GridSize steuern die Ausrichtungshilfen
Hilfethema lesen
Als JSON speichern, überall öffnen

Rückgängig, Dateien und Export

Als JSON speichern, überall öffnen

Ein Diagramm sind Daten, die deine Anwendung speichert, versendet und versioniert. Das Dokument wird als JSON gespeichert, als String, Datei oder Stream, und das Format ist auf jeder Plattform und in jeder Edition identisch: Eine von einer Delphi-Desktopanwendung gespeicherte Datei öffnet sich in einem C++-Builder-Werkzeug, einem .NET-Dienst oder einem Community-Build. Die Ausgabe ist kanonisch, mit fester Schlüsselreihenfolge und ohne Standardwerte, sodass dasselbe Diagramm immer denselben Text ergibt und sich sauber in der Versionsverwaltung vergleichen lässt. Bilder reisen als PNG-Daten in der Datei mit.

  • SaveToFile und LoadFromFile, SaveToStream und LoadFromStream
  • SaveToJSON und LoadFromJSON für ein Datenbankfeld oder eine Webanfrage
  • Eine Ansicht streamt ihr Diagramm als DiagramJSON in die Formulardatei
  • Die in der Datei gespeicherten Konnektorwege bleiben beim Laden erhalten
Hilfethema lesen
PNG und SVG exportieren, sogar auf einem Server

Rückgängig, Dateien und Export

PNG und SVG exportieren, sogar auf einem Server

Diagramme landen in Berichten, E-Mails, Wiki-Seiten und Folien. Die Ansicht speichert, was sie zeigt, als PNG oder SVG, mit einem Skalierungsfaktor für scharfe Bilder und mit angewandter eigener Darstellung und angewandtem Theme, sodass ein dunkles Diagramm dunkel exportiert wird. TsgcDiagramRenderer macht dasselbe ganz ohne Ansicht: Ein Konsolenprogramm, ein Windows-Dienst oder ein Linux64-Daemon baut ein Diagramm, ordnet es an und schreibt die Dateien. Die Headless-Demo tut genau das mit einem Support-Ticket-Flussdiagramm und schreibt, mit Delphi 13 gebaut, unter Win32, Win64 und Linux64 dieselben Bytes.

  • SaveToPNG und SaveToSVG an der Ansicht, mit einem Maßstab in Pixeln pro Welteinheit
  • SaveToPNGFile und SaveToSVGFile an TsgcDiagramRenderer, kein Fenster nötig
  • RenderTo zeichnet einen Teil eines Dokuments auf jede sgcUICore-Zeichenfläche
  • PDF-Export und Drucken sind nicht Teil von Version 1
Hilfethema lesen

Anzeigen und Gestalten

Zeige Diagramme Menschen, die sie nicht bearbeiten sollen, im Look deiner Anwendung.

Ein schreibgeschützter Viewer für Dashboards und Portale

Anzeigen und Gestalten

Ein schreibgeschützter Viewer für Dashboards und Portale

Nicht jeder Nutzer soll die Prozesslandkarte bearbeiten. Setze ReadOnly, und dieselbe Ansicht wird zum Viewer: Nutzer wählen aus, zoomen mit Strg und Mausrad und verschieben mit der mittleren Maustaste oder der Leertaste, aber nichts wird verschoben, verbunden oder gelöscht, und die Palette kann keine Formen ablegen. Der Zeiger wird über einem Element zur Hand, und OnItemClick meldet, welches es ist, sodass ein Klick auf einen Knoten den passenden Datensatz öffnen kann. ZoomToFit fasst das ganze Diagramm aus dem Code in den Blick. Um nur einen Teil eines Diagramms zu schützen, sperre einzelne Elemente oder ganze Ebenen.

  • ReadOnly behält Auswahl, Zoom und Verschieben und blockiert jede Änderung
  • OnItemClick, OnItemDblClick und OnHover melden das Element unter dem Zeiger
  • ZoomToFit, ZoomToSelection und CenterOn bewegen die Ansicht aus dem Code
  • Locked schützt einzelne Elemente oder eine ganze Ebene
Hilfethema lesen

Anzeigen und Gestalten

Hell, dunkel und deine eigene Darstellung

Ein Diagramm sollte wie ein Teil deiner Anwendung aussehen, nicht wie ein eingefügtes Bild. Die Ansichten, die Paletten und der Export nutzen die sgcUICore-Themes, sodass eine Eigenschaft Theme zwischen hell und dunkel umschaltet und zu den sgcUI-Grids, Diagrammen und Dashboards auf demselben Formular passt. Jeder Knoten und jeder Konnektor hat einen eigenen Style mit Füllung, Strich, Strichmuster, Eckenradius und Texteinstellungen, und NodeStyle und ConnectorStyle sind die Vorlagen für neue Elemente. Für volle Kontrolle lässt dich OnDrawNode einen Knoten selbst zeichnen, und FontFile zeichnet den Text mit einer TrueType-Schrift deiner Wahl.

  • Theme nimmt utDefault (folgt dem Anwendungs-Theme), utLight, utDark oder utCustom
  • Style legt Fill, Stroke, StrokeWidth, Dash und CornerRadius fest
  • NodeStyle und ConnectorStyle gestalten jedes neue Element
  • sgcUIARGB baut Farben wie ein Firmen-Petrol
Hilfethema lesen

Barrierefreiheit

UI Automation für Screenreader, Tastatur und hohen Kontrast, ohne Einrichtung.

Barrierefreiheit

Diagramme mit der Tastatur zeichnen und über UI Automation bereitstellen

sgcDiagram stellt die Knoten mit ihrem Text, die Verbindungen zwischen ihnen und die Formenpalette über Microsoft UI Automation bereit, und das Diagramm beschreibt sich mit derselben Textalternative, die es in ein barrierefreies PDF schreibt.

  • Pfeiltasten bewegen die Auswahl, Alt+Pfeiltasten verschieben sie um ein Pixel, und Alt+Umschalt+Pfeiltasten ändern die Größe des ausgewählten Knotens
  • Strg+K startet eine Verbindung vom ausgewählten Knoten: Tab und Umschalt+Tab wählen das Ziel, Enter verbindet, und Esc bricht ab
  • In der Palette wechseln die Pfeiltasten, Pos1 und Ende zwischen den Formen, und Enter oder Leertaste fügt die fokussierte Form hinzu
  • Strg+Tab und Strg+Umschalt+Tab setzen den Fokus auf das nächste oder vorherige Steuerelement, und unter einem Windows-Kontrastdesign zeichnet das Diagramm mit den Systemfarben

Barrierefreiheit ist in jeder Edition standardmäßig aktiv, auch in der kostenlosen Community-Edition, unter VCL in jeder Delphi- und C++Builder-Version von Delphi 7 bis Delphi 13, in FireMonkey unter Windows sowie unter WinForms, WPF und Avalonia. In Delphi und C++Builder legen AccessibleName und AccessibleDescription den Namen und die Beschreibung fest, die über UI Automation bereitgestellt werden, und unter .NET leisten der Standardname und der Standard-Hilfetext des jeweiligen Frameworks dasselbe. Siehe die Konformitätsberichte zur Barrierefreiheit. Die Stützpunkte von Konnektoren werden nur mit der Maus bearbeitet.

Hilfethema lesen

sgcDiagram in Aktion erleben

sgcDiagram in den sgcUI-Suite-Demos: vollständige Anwendungen, die offline mit integrierten Simulationsdaten laufen.

Wer mit sgcDiagram baut

Workflow- und Freigabe-Designer

Einkaufsfreigaben, Ticket-Eskalationen und Onboarding-Checklisten ändern sich oft, und die Menschen, die sie verantworten, sind keine Programmierer. Bette den Editor ein, damit ein Prozessverantwortlicher den Ablauf mit Entscheidungen und Ja- oder Nein-Beschriftungen zeichnet, ihn als JSON in deiner Datenbank speichert, und deine Anwendung liest dasselbe Dokument, um den echten Prozess zu steuern. ReadOnly macht den gespeicherten Ablauf für alle anderen zur Landkarte. Starte mit FlowchartEditor.

  • Palette und Bearbeiten im Element
  • Konnektorbeschriftungen
  • JSON-Dateien
Demo FlowchartEditor ausführen

Organigramme aus HR-Daten

HR- und ERP-Systeme wissen bereits, wer an wen berichtet. Binde die Mitarbeitertabelle mit TsgcDiagramDataBinding, lass das Baum-Layout mit kompakten Blättern Vorgesetzte und Mitarbeiter anordnen und färbe jeden Kasten in OnCreateNode nach Abteilung ein. Wenn HR eine Änderung im Grid speichert, baut sich das Diagramm von selbst neu auf, und ein Klick auf einen Knoten wählt den Mitarbeiter aus. Die OrgChart-Demo bindet auf diese Weise 60 Mitarbeiter.

  • Datenbindung
  • Baum-Layout
  • Viewer-Modus
Demo OrgChart ausführen

Node-Editoren für Pipelines und Automatisierung

Produkte, mit denen Kunden Datenpipelines, Automatisierungsregeln oder IoT-Abläufe bauen, brauchen eine Zeichenfläche, auf der Blöcke verdrahtet werden. Typisierte Ports, geschwungene Konnektoren und OnConnecting liefern die Regeln, OnDrawNode gibt den Blöcken deinen eigenen Look, und der Graph wird als JSON gespeichert, das deine Engine ausführen kann. Weil das Dokument keine Abhängigkeit von einer Benutzeroberfläche hat, kann ein Server denselben Graphen laden und prüfen.

  • Typisierte Ports
  • Verbindungsregeln
  • Eigene Darstellung
Demo NodeEditor ausführen

An Order Flow in a Few Lines

The same API in Delphi, C++ Builder and C#: add a palette and a view, create shapes and connectors in one undo step, then arrange them. The layout call needs the Registered or Trial edition.

uses
  Classes, SysUtils, Forms, Controls,
  sgcUICore_Theme, sgcDiagram_Types, sgcDiagram_Model, sgcDiagram_Layout,
  sgcDiagram_VCL;

type
  TFormOrders = class(TForm)
  private
    FPalette: TsgcVCLDiagramPalette;
    FView: TsgcVCLDiagramView;
    procedure DoSelectionChange(Sender: TObject);
  public
    constructor CreateNew(aOwner: TComponent; Dummy: Integer = 0); override;
    procedure BuildFlow;
  end;

constructor TFormOrders.CreateNew(aOwner: TComponent; Dummy: Integer);
begin
  inherited;
  FPalette := TsgcVCLDiagramPalette.Create(Self);
  FPalette.Parent := Self;
  FPalette.Align := alLeft;
  FView := TsgcVCLDiagramView.Create(Self);
  FView.Parent := Self;
  FView.Align := alClient;
  FView.ShowPorts := dgvHover;
  FView.Theme := utDark;
  FView.OnSelectionChange := DoSelectionChange;
  FPalette.View := FView;
end;

procedure TFormOrders.DoSelectionChange(Sender: TObject);
begin
  Caption := Format('Orders, %d selected', [FView.Diagram.Selection.Count]);
end;

procedure TFormOrders.BuildFlow;
var
  oDoc: TsgcDiagramDocument;
  oStart, oStock, oPay, oShip: TsgcDiagramNode;
  oLayout: TsgcDiagramLayeredLayout;
begin
  oDoc := FView.Diagram;
  oDoc.BeginTransaction('Order flow');
  try
    oStart := oDoc.AddNode(dgsTerminator, 0, 0, 140, 50, 'Order received');
    oStock := oDoc.AddNode(dgsDecision, 0, 0, 160, 90, 'In stock?');
    oPay := oDoc.AddNode(dgsProcess, 0, 0, 140, 60, 'Charge card');
    oShip := oDoc.AddNode(dgsPredefinedProcess, 0, 0, 140, 60, 'Ship order');
    oPay.Style.Fill := sgcUIARGB($FF, $00, $96, $88);
    oDoc.AddConnector(oStart, oStock);
    oDoc.AddConnector(oStock, oPay).Labels.Add.Text := 'Yes';
    oDoc.AddConnector(oPay, oShip);
    oDoc.AddConnector(oStock, oDoc.AddNode(dgsDocument, 0, 0, 140, 60,
      'Backorder note')).Labels.Add.Text := 'No';
  finally
    oDoc.EndTransaction;
  end;
  // arrange left to right, one undo step
  oLayout := TsgcDiagramLayeredLayout.Create(oDoc);
  try
    oLayout.Direction := dglLeftToRight;
    oLayout.Execute;
  finally
    oLayout.Free;
  end;
  FView.ZoomToFit;
  FView.SaveToPNG(ExtractFilePath(ParamStr(0)) + 'orders.png', 2);
end;
#include <vcl.h>
#include "sgcUICore_Theme.hpp"
#include "sgcDiagram_Types.hpp"
#include "sgcDiagram_Model.hpp"
#include "sgcDiagram_Layout.hpp"
#include "sgcDiagram_VCL.hpp"

void BuildOrderFlow(TForm *Form)
{
  TsgcVCLDiagramPalette *Palette = new TsgcVCLDiagramPalette(Form);
  Palette->Parent = Form;
  Palette->Align = alLeft;
  TsgcVCLDiagramView *View = new TsgcVCLDiagramView(Form);
  View->Parent = Form;
  View->Align = alClient;
  View->ShowPorts = dgvHover;
  View->Theme = utDark;
  Palette->View = View;

  TsgcDiagramDocument *Doc = View->Diagram;
  Doc->BeginTransaction("Order flow");
  try
  {
    TsgcDiagramNode *Start = Doc->AddNode(dgsTerminator, 0, 0, 140, 50, "Order received");
    TsgcDiagramNode *Stock = Doc->AddNode(dgsDecision, 0, 0, 160, 90, "In stock?");
    TsgcDiagramNode *Pay = Doc->AddNode(dgsProcess, 0, 0, 140, 60, "Charge card");
    TsgcDiagramNode *Ship = Doc->AddNode(dgsPredefinedProcess, 0, 0, 140, 60, "Ship order");
    TsgcDiagramNode *Note = Doc->AddNode(dgsDocument, 0, 0, 140, 60, "Backorder note");
    Pay->Style->Fill = sgcUIARGB(0xFF, 0x00, 0x96, 0x88);
    Doc->AddConnector(Start, Stock, "", "");
    Doc->AddConnector(Stock, Pay, "", "")->Labels->Add()->Text = "Yes";
    Doc->AddConnector(Pay, Ship, "", "");
    Doc->AddConnector(Stock, Note, "", "")->Labels->Add()->Text = "No";
  }
  __finally
  {
    Doc->EndTransaction();
  }
  // arrange left to right, one undo step
  TsgcDiagramLayeredLayout *Layout = new TsgcDiagramLayeredLayout(Doc);
  try
  {
    Layout->Direction = dglLeftToRight;
    Layout->Execute();
  }
  __finally
  {
    delete Layout;
  }
  View->ZoomToFit();
  View->SaveToPNG(ExtractFilePath(ParamStr(0)) + "orders.png", 2);
}
using System;
using System.IO;
using System.Windows.Forms;
using esegece.sgcDiagram;
using esegece.sgcUICore;

public class OrdersForm : Form
{
    readonly TsgcWinFormsDiagramView View;

    public OrdersForm()
    {
        View = new TsgcWinFormsDiagramView { Dock = DockStyle.Fill };
        View.ShowPorts = TsgcDiagramShowPorts.dgvHover;
        View.Theme = TsgcUITheme.utDark;
        View.OnSelectionChange += Sender =>
            Text = "Orders, " + View.Diagram.Selection.Count + " selected";
        Controls.Add(View);
        Controls.Add(new TsgcWinFormsDiagramPalette { Dock = DockStyle.Left, View = View });
        BuildFlow();
    }

    void BuildFlow()
    {
        TsgcDiagramDocument oDoc = View.Diagram;
        oDoc.BeginTransaction("Order flow");
        try
        {
            TsgcDiagramNode oStart = oDoc.AddNode(TsgcDiagramShape.dgsTerminator, 0, 0, 140, 50, "Order received");
            TsgcDiagramNode oStock = oDoc.AddNode(TsgcDiagramShape.dgsDecision, 0, 0, 160, 90, "In stock?");
            TsgcDiagramNode oPay = oDoc.AddNode(TsgcDiagramShape.dgsProcess, 0, 0, 140, 60, "Charge card");
            TsgcDiagramNode oShip = oDoc.AddNode(TsgcDiagramShape.dgsPredefinedProcess, 0, 0, 140, 60, "Ship order");
            TsgcDiagramNode oNote = oDoc.AddNode(TsgcDiagramShape.dgsDocument, 0, 0, 140, 60, "Backorder note");
            oPay.Style.Fill = sgcUICore_Theme.sgcUIARGB(0xFF, 0x00, 0x96, 0x88);
            oDoc.AddConnector(oStart, oStock);
            oDoc.AddConnector(oStock, oPay).Labels.Add().Text = "Yes";
            oDoc.AddConnector(oPay, oShip);
            oDoc.AddConnector(oStock, oNote).Labels.Add().Text = "No";
        }
        finally
        {
            oDoc.EndTransaction();
        }
        // arrange left to right, one undo step
        TsgcDiagramLayeredLayout oLayout = new TsgcDiagramLayeredLayout(oDoc);
        oLayout.Direction = TsgcDiagramDirection.dglLeftToRight;
        oLayout.Execute();
        View.ZoomToFit();
        View.SaveToPNG(Path.Combine(AppContext.BaseDirectory, "orders.png"), 2);
    }
}
dotnet add package esegece.sgcDiagram.WinForms

Die sgcDiagram-Demos ausführen

Jede Demo gibt es für Delphi und für C++ Builder unter demselben Namen. Die .NET-Edition enthält FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart und ConsoleRender.

FlowchartEditor

Nur Registered FlowchartEditor

Ein im Code gebauter Bestellablauf: Formen ziehen, Konnektoren von den Ports zeichnen, die Konnektorart wechseln, rückgängig machen, das Schicht-Layout ausführen, JSON öffnen und speichern, PNG und SVG exportieren, Theme und Schreibschutzmodus umschalten.

OrgChart

Nur Registered OrgChart

60 Mitarbeiter in einem TDBGrid, gebunden an eine schreibgeschützte Diagrammansicht. Speichere eine Änderung, und das Diagramm baut sich neu auf, mit kompakten Blättern, Abteilungsfarben, Klick zum Auswählen und PNG- und SVG-Export.

NodeEditor

NodeEditor

Typisierte Ein- und Ausgangs-Ports, eine Verbindungsregel in OnConnecting, geschwungene Konnektoren und in OnDrawNode gezeichnete Blöcke, als JSON mit ihren Ports und Beschriftungen gespeichert.

Nur Registered FlowchartEditorFMX

Der Flussdiagrammeditor auf der FireMonkey-Ansicht und -Palette, für Windows und Android, wo ein Tippen eine Form setzt und eine Pinch-Geste zoomt.

Headless

Nur Registered Headless

Ein Konsolenprogramm ohne VCL- oder FireMonkey-Unit, das ein Flussdiagramm baut, es mit dem Schicht-Layout anordnet und PNG, SVG und JSON schreibt, auch unter Linux64.

Kompilierte Demos

Sofort lauffähige Programme jedes sgcUI-Produkts, nichts zu installieren.

sgcUI_bin.zip herunterladen →

Wo sgcDiagram enthalten ist

sgcDiagram ist in sgcUI Enterprise enthalten und wird auch einzeln verkauft. sgcDiagram ist außerdem im All-Access-Bundle enthalten.

sgcDiagram Einzelpaket

€249 / Entwickler, voller Quellcode, 1 Jahr Updates.

sgcDiagram kaufen → Preise ansehen →

sgcUI Enterprise

Alle 14 sgcUI-Produkte, ab €699.

Enterprise ansehen →

Die kostenlose Community Edition (esegece.sgcDiagram.Community auf NuGet) lässt automatische Layouts, hindernisumgehendes Routing, Datenbindung und mehrere Ebenen weg. Für sgcDiagram gibt es keine sgcWebSockets-Brücke.

FunktionCommunity (kostenlos)Registered
Palette, Ansicht und Bearbeiten im Element✓✓
14 Formen, Ports, Gruppen und Container✓✓
Gerade, orthogonale und geschwungene Konnektoren✓✓
Rückgängig, Zwischenablage, Einrasten und Hilfslinien✓✓
JSON-Dateien, PNG- und SVG-Export✓✓
Helle und dunkle Themes, Viewer-Modus✓✓
Schicht- und Baum-Layouts−✓
Hindernisumgehendes orthogonales Routing−✓
Datenbindung−✓
Mehr als eine Ebene−✓

Unterstützte Frameworks und Plattformen

Komponenten in sgcDiagram

Ansichten und Paletten

TsgcVCLDiagramView und TsgcVCLDiagramPalette für VCL, TsgcFMXDiagramView und TsgcFMXDiagramPalette für FireMonkey.

Modell und Controller

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector und TsgcDiagramController, ohne Abhängigkeit von einer Benutzeroberfläche.

Renderer und Layouts

TsgcDiagramRenderer schreibt PNG und SVG ohne Fenster. TsgcDiagramLayeredLayout und TsgcDiagramTreeLayout ordnen das Diagramm an. Registered

.NET-Ansichten

TsgcWinFormsDiagramView, TsgcWpfDiagramView und TsgcAvaloniaDiagramView, jeweils mit eigener Palette, im Namespace esegece.sgcDiagram.

ZielKomponentePlattformen
Delphi 7 bis 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 und Win64
Delphi XE6 bis 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS und Android
C++ Builder 2007 bis 13Dieselben KomponentenGenerierte .hpp-Header und statische Bibliotheken
Delphi 10.2 bis 13, headlessDokument, JSON, Routing, Layouts, PNG- und SVG-RendererLinux64, zum Beispiel um Diagramme auf einem Server zu rendern
.NET Framework 4.7.2, .NET 8, 9 und 10WinForms-, WPF- und Avalonia-AnsichtenWindows, Linux und macOS, headless JSON, PNG und SVG

Häufig gestellte Fragen

Ja, dafür sind die Ansicht und die Palette da. Nutzer ziehen Formen, zeichnen Konnektoren von den Ports, bearbeiten Text im Element, gruppieren, kopieren und fügen ein und machen jede Aktion rückgängig oder wiederholen sie. Setze ReadOnly, wenn ein Nutzer nur schauen soll, oder sperre einzelne Elemente und Ebenen, um einen Teil eines Diagramms zu schützen, während der Rest bearbeitbar bleibt.

Ja, auf zwei Wegen. Im Code bauen AddNode und AddConnector innerhalb von BeginTransaction und EndTransaction jedes Diagramm als einen Rückgängig-Schritt. In der Registered Edition baut TsgcDiagramDataBinding es aus einem DataSet mit Schlüssel- und Elternspalte und baut es neu auf, wenn sich die Daten ändern. In .NET liest es eine DataTable.

Zwei, in der Registered und der Trial Edition. TsgcDiagramLayeredLayout ordnet gerichtete Graphen wie Flussdiagramme, Zustandsautomaten und Abhängigkeitsgraphen in Schichten mit wenigen Kreuzungen an. TsgcDiagramTreeLayout ordnet Hierarchien wie Organigramme und Kategoriebäume an, mit einem Stil mit kompakten Blättern. Beide funktionieren in vier Richtungen und laufen als ein Rückgängig-Schritt.

Nicht in Version 1. Diagramme lassen sich als PNG und SVG exportieren, aus der Ansicht oder mit TsgcDiagramRenderer ohne Fenster. SVG skaliert verlustfrei und eignet sich daher für Druck und Dokumente, und ein mit Maßstab 2 gespeichertes PNG bleibt auf Folien scharf. Drucken ist ebenfalls nicht Teil von Version 1.

Vier fortgeschrittene Features: die automatischen Layouts, das hindernisumgehende orthogonale Routing (Community zeichnet einfache Winkel), die Datenbindung und Ebenen über die erste hinaus. Alles andere ist da: jede Form, die drei Konnektorarten, Ports, Container, Rückgängig, die Zwischenablage, JSON, PNG und SVG, Themes, Einrasten und Hilfslinien. Registered und Trial haben alles.

Ja. Das JSON-Format ist auf jeder Plattform und in jeder Edition gleich, sodass ein von einer Delphi- oder C++-Builder-Anwendung gespeichertes Diagramm in einer WinForms-, WPF- oder Avalonia-Anwendung aufgeht und umgekehrt. Eine von der Registered Edition gespeicherte Datei öffnet sich auch in einem Community-Build, der ihre Ebenennamen behält.

Ja. Die FireMonkey-Ansicht und -Palette laufen ab Delphi XE6 unter Windows, macOS, iOS und Android, und die Demo FlowchartEditorFMX zeigt die Touch-Bearbeitung unter Android. In .NET läuft die Avalonia-Ansicht unter Windows, Linux und macOS.

sgcDiagram Hilfe

3,000+Entwickler
20+Jahre
761+Komponenten
30+API-Integrationen
5Plattformen
30 Tage Geld-zurück-GarantieNicht zufrieden? Fordere innerhalb von 30 Tagen nach dem Kauf eine vollständige Rückerstattung an. Rückerstattungsrichtlinie ansehen

sgcDiagram heute testen

Die sgcUI-Testversion enthält sgcDiagram und jedes andere sgcUI-Produkt.