Delphi, C++ Builder i .NET Część sgcUI

sgcDiagram, edytor schematów blokowych i diagramów dla Delphi, C++ Builder i .NET

Daj użytkownikom prawdziwy edytor diagramów w twojej własnej aplikacji. Przeciągają kształty z palety, łączą je, wpisują tekst bezpośrednio w kształcie i cofają wszystko. Ty układasz cały diagram jednym wywołaniem, zapisujesz go jako JSON i eksportujesz do PNG lub SVG, nawet na serwerze bez okna.

VCL, FireMonkey, WinForms, WPF, Avalonia14 kształtów i 3 rodzaje łącznikówPNG i SVG bez interfejsu, także na Linux64W sgcUI Enterprise
Demo FlowchartEditor: paleta kształtów ze schematem blokowym i kształtami podstawowymi obok schematu zamówienia

Wszystko, czego potrzebuje edytor diagramów

Trzynaście funkcji, które wstawiają prawdziwy edytor diagramów do twojej aplikacji.

Edytor, którego mogą używać twoi użytkownicy

Wszystko, czego użytkownik oczekuje od narzędzia do diagramów, jako dwa komponenty, które upuszczasz na formularz.

Edytor, którego mogą używać twoi użytkownicy

Pozwól użytkownikom rysować własne diagramy

Aplikacje biznesowe często potrzebują diagramu, którego właścicielem jest użytkownik: przepływu akceptacji, mapy procesu, planu linii produkcyjnej. Zamiast odsyłać użytkowników do osobnego programu graficznego, umieść edytor w swoim formularzu. Upuść TsgcVCLDiagramPalette i TsgcVCLDiagramView, połącz je właściwością View palety, a użytkownicy przeciągną kształty na płótno, narysują łączniki z portów i wpiszą tekst węzła w miejscu. Ta sama para istnieje dla FireMonkey, WinForms, WPF i Avalonia.

  • TsgcVCLDiagramPalette upuszcza kształty przeciągnięciem albo kliknięciem elementu i kliknięciem widoku
  • Dwukrotne kliknięcie, F2 lub zwykłe pisanie edytuje tekst węzła w miejscu
  • Tool przełącza między dgtSelect, dgtPan, dgtConnector i dgtShape
  • Zaznaczaj z Shift, Ctrl lub ramką, a potem przenoś, zmieniaj rozmiar, obracaj, grupuj, kopiuj i wklejaj
  • Od prawej do lewej dla arabskiego i hebrajskiego: paleta, linijki, minimapa i paski narzędzi są odbite lustrzanie, a kanwa zachowuje Twoją geometrię, natomiast kierunek dglRightToLeft układów automatycznych rozmieszcza diagram od prawej
Przeczytaj temat pomocy
14 kształtów do schematów blokowych, organizacyjnych i szkiców

Edytor, którego mogą używać twoi użytkownicy

14 kształtów do schematów blokowych, organizacyjnych i szkiców

Większość diagramów w oprogramowaniu biznesowym używa małego, znajomego słownika, a sgcDiagram dostarcza go gotowego. Dostajesz symbole schematu blokowego: proces, decyzję, terminator, dane, dokument, proces predefiniowany i okrąg łącznika, a także podstawowy prostokąt, prostokąt z zaokrąglonymi rogami i elipsę, wolny tekst, obrazy, kontenery zawierające inne węzły oraz własne kontury z danych ścieżki SVG. Każdy kształt zna swój kontur, obszar tekstu, domyślne porty i kolory motywu, więc decyzja dostaje porty w rogach bez żadnego kodu. Umieść węzeł przez Left, Top, Width i Height, a obróć go przez Angle.

  • Shape przyjmuje wartość TsgcDiagramShape, na przykład dgsDecision
  • dgsPath rysuje dowolny kontur z PathData w składni ścieżki SVG
  • dgsContainer zawiera węzły potomne przez ContainerId i przesuwa je razem ze sobą
  • TextAlign i TextVAlign umieszczają zawinięty tekst wewnątrz kształtu
Przeczytaj temat pomocy
Łączniki proste, ortogonalne i krzywe

Edytor, którego mogą używać twoi użytkownicy

Łączniki proste, ortogonalne i krzywe

Diagram jest tak czytelny, jak jego linie. Każdy łącznik wybiera swój rodzaj: linie proste lub łamane przez punkty pośrednie, trasy ortogonalne z segmentów poziomych i pionowych albo gładkie krzywe dla grafów węzłów. AddConnector tworzy łącznik o rodzaju DefaultConnectorKind dokumentu. Groty strzałek na obu końcach, linie kreskowane lub kropkowane oraz dowolna liczba etykiet, umieszczonych wzdłuż linii i przeciągalnych przez użytkownika, zamieniają zwykłą linię w czytelną gałąź Tak lub Nie. W edycji Registered router ortogonalny omija węzły i rozsuwa równoległe segmenty.

  • Kind to dgcStraight, dgcOrthogonal lub dgcCurved
  • StartArrow i EndArrow przyjmują TsgcDiagramArrow, na przykład dgaTriangle lub dgaDiamond
  • Labels przechowuje dowolną liczbę etykiet, umieszczanych przez Position i Offset
  • Waypoints zaginają łączniki proste i krzywe tam, gdzie chcesz

Community prowadzi łączniki ortogonalne jako proste kolanka, które nie omijają węzłów.

Przeczytaj temat pomocy

Edytor, którego mogą używać twoi użytkownicy

Porty i przyklejanie utrzymują połączenia

Nic nie frustruje użytkownika bardziej niż diagram, który się rozpada po przesunięciu pola. Każdy koniec łącznika jest przyklejony: do nazwanego portu, do konturu węzła lub pozostawiony wolny w punkcie. Przenieś, zmień rozmiar lub obróć węzeł, a jego łączniki podążą za nim i zostaną poprowadzone od nowa. Kształty mają porty w środkach boków, a możesz dodać własne z pozycją, stroną, kierunkiem przepływu i podpisem, tak buduje się typowane wejścia i wyjścia edytora węzłów. ShowPorts decyduje, czy porty są widoczne zawsze, po najechaniu, czy nigdy.

  • TsgcDiagramPort ma Id, X, Y, Side, Flow i Caption
  • Flow czyni port wejściem przez dgfIn lub wyjściem przez dgfOut
  • SourcePortId i TargetPortId przyklejają koniec łącznika do portu
  • ShowPorts domyślnie ma dgvHover, albo dgvAlways i dgvNever
Przeczytaj temat pomocy

Diagramy, które budują się same

Pozwól kodowi wykonać porządkową pracę: uporządkuj graf, zbuduj wykres z tabeli lub połącz bloki regułami.

Diagramy, które budują się same Tylko zarejestrowana

Uporządkuj cały diagram jednym wywołaniem

Diagramy budowane z kodu lub szybko rysowane przez użytkownika rzadko wyglądają schludnie. TsgcDiagramLayeredLayout układa graf skierowany w warstwach, metodą Sugiyamy, więc schematy blokowe, mapy procesów, automaty stanów i grafy zależności wychodzą od lewej do prawej lub z góry na dół, z niewielką liczbą skrzyżowań łączników i prostymi długimi łącznikami. TsgcDiagramTreeLayout centruje rodziców nad ich dziećmi dla schematów organizacyjnych i drzew kategorii. Oba działają jako jeden krok cofania, więc użytkownik może wypróbować układ i cofnąć go przez Ctrl+Z. SelectionOnly porządkuje tylko zaznaczoną część.

  • Direction to dglTopToBottom, dglLeftToRight, dglBottomToTop lub dglRightToLeft
  • LayerSpacing i NodeSpacing ustawiają odstępy, domyślnie 60 i 30 jednostek świata
  • Crossings podaje liczbę skrzyżowań łączników po Execute
  • TreeStyle ustawione na dgoCompactLeaves układa podwładnych kierownika w jednej kolumnie

W Community węzły zostają tam, gdzie umieści je użytkownik lub kod.

Przeczytaj temat pomocy
Schematy organizacyjne prosto z tabeli

Diagramy, które budują się same Tylko zarejestrowana

Schematy organizacyjne prosto z tabeli

Twoi pracownicy, centra kosztów lub kategorie produktów już są w tabeli z kolumną klucza i kolumną rodzica. TsgcDiagramDataBinding zamienia te wiersze w diagram: każdy wiersz staje się węzłem, każdy klucz rodzica łącznikiem, a układ drzewiasty lub warstwowy porządkuje wynik. Ustaw DataSource, KeyField, ParentField i LabelField, wskaż widok przez Target i ustaw Active. Przy włączonym LiveUpdates zatwierdzona zmiana, wstawienie lub usunięcie przebudowuje wykres w następnym obrocie pętli komunikatów, a poruszanie się po wierszach nie zmienia zaznaczenia.

  • DataSource, KeyField, ParentField i LabelField mapują kolumny
  • OnCreateNode stylizuje każdy węzeł na podstawie dowolnego pola jego wiersza
  • dgbAuto wybiera układ drzewiasty dla drzewa i warstwowy dla wielu rodziców
  • ParentSeparator wymienia kilku rodziców w jednym polu

Community nie ma powiązania z danymi: buduj węzły w kodzie przez AddNode i AddConnector.

Przeczytaj temat pomocy
Edytory węzłów dla przepływów pracy i potoków

Diagramy, które budują się same

Edytory węzłów dla przepływów pracy i potoków

Reguły automatyzacji, potoki danych i przepływy IoT najłatwiej zrozumieć jako połączone bloki. Daj każdemu węzłowi typowane porty wejściowe po lewej i wyjściowe po prawej, przełącz DefaultConnectorKind na łączniki krzywe i maluj bloki samodzielnie w OnDrawNode, z paskiem tytułu i kolorowymi kropkami portów. OnConnecting pozwala odrzucić połączenie, zanim powstanie, więc wyjście liczbowe nigdy nie zasili wejścia tekstowego. Demo NodeEditor buduje dokładnie to, z blokami dodawanymi w jednym kroku cofania i grafami zapisywanymi jako JSON razem z portami i podpisami.

  • OnConnecting blokuje połączenie, na przykład między portami różnych typów
  • OnDrawNode maluje węzeł lub dodaje coś do domyślnego rysunku
  • DefaultConnectorKind ustawione na dgcCurved daje klasyczny wygląd grafu węzłów
  • Caption portu jest rysowany obok niego wewnątrz węzła
Przeczytaj temat pomocy

Cofanie, pliki i eksport

Bezpieczna edycja dla użytkownika oraz format dokumentu i wyjście obrazów, na których twoja aplikacja może polegać.

Cofaj wszystko, przyciągaj do prowadnic

Cofanie, pliki i eksport

Cofaj wszystko, przyciągaj do prowadnic

Użytkownicy eksperymentują, gdy wiedzą, że mogą wrócić. Dokument utrzymuje stos cofania i ponawiania, a każda akcja użytkownika w widoku to jeden krok. W kodzie BeginTransaction i EndTransaction grupują dowolną liczbę zmian w jeden nazwany krok, a Rollback je odrzuca. Kopiowanie i wklejanie działają wewnątrz aplikacji, a kolejne wklejenia są przesuwane, aby się nie nakładały. Gdy węzeł jest przesuwany lub zmieniany, jego krawędzie i linie środkowe przyciągają się do siatki i do sąsiednich węzłów, a linia prowadząca pokazuje wyrównanie.

  • BeginTransaction, EndTransaction i Rollback grupują zmiany wykonane w kodzie
  • UndoLimit domyślnie zachowuje 100 kroków, a UndoCaption nazywa następne cofnięcie
  • CopyToClipboard, CutToClipboard i PasteFromClipboard w widoku
  • SnapToGrid, SnapToGuides i GridSize sterują pomocami wyrównywania
Przeczytaj temat pomocy
Zapisz jako JSON, otwórz gdziekolwiek

Cofanie, pliki i eksport

Zapisz jako JSON, otwórz gdziekolwiek

Diagram to dane, które twoja aplikacja przechowuje, wysyła i wersjonuje. Dokument zapisuje się do JSON jako ciąg znaków, plik lub strumień, a format jest identyczny na każdej platformie i w każdej edycji: plik zapisany przez aplikację desktopową Delphi otwiera się w narzędziu C++ Builder, usłudze .NET lub kompilacji Community. Wynik jest kanoniczny, ze stałą kolejnością kluczy i pominiętymi wartościami domyślnymi, więc ten sam diagram zawsze daje ten sam tekst i czysto porównuje się w kontroli wersji. Obrazy podróżują wewnątrz pliku jako dane PNG.

  • SaveToFile i LoadFromFile, SaveToStream i LoadFromStream
  • SaveToJSON i LoadFromJSON dla pola bazy danych lub żądania webowego
  • Widok zapisuje swój diagram w pliku formularza jako DiagramJSON
  • Trasy łączników zapisane w pliku są zachowywane przy wczytywaniu
Przeczytaj temat pomocy
Eksport PNG i SVG, nawet na serwerze

Cofanie, pliki i eksport

Eksport PNG i SVG, nawet na serwerze

Diagramy trafiają do raportów, e-maili, stron wiki i slajdów. Widok zapisuje to, co pokazuje, jako PNG lub SVG, ze współczynnikiem skali dla ostrych obrazów i z zastosowanym własnym rysowaniem i motywem, więc ciemny diagram eksportuje się jako ciemny. TsgcDiagramRenderer robi to samo bez żadnego widoku: program konsolowy, usługa Windows lub demon Linux64 buduje diagram, układa go i zapisuje pliki. Demo Headless robi dokładnie to ze schematem blokowym zgłoszenia do wsparcia, a zbudowane w Delphi 13 zapisuje te same bajty na Win32, Win64 i Linux64.

  • SaveToPNG i SaveToSVG w widoku, ze skalą w pikselach na jednostkę świata
  • SaveToPNGFile i SaveToSVGFile w TsgcDiagramRenderer, okno nie jest potrzebne
  • RenderTo maluje część dokumentu na dowolnym płótnie sgcUICore
  • Eksport do PDF i drukowanie nie wchodzą w skład wersji 1
Przeczytaj temat pomocy

Wyświetlanie i stylizacja

Pokaż diagramy osobom, które nie powinny ich edytować, w wyglądzie twojej aplikacji.

Przeglądarka tylko do odczytu dla dashboardów i portali

Wyświetlanie i stylizacja

Przeglądarka tylko do odczytu dla dashboardów i portali

Nie każdy użytkownik powinien edytować mapę procesu. Ustaw ReadOnly, a ten sam widok staje się przeglądarką: użytkownicy zaznaczają, powiększają z Ctrl i kółkiem oraz przesuwają środkowym przyciskiem lub Spacją, ale nic nie przesuwa się, nie łączy ani nie jest usuwane, a paleta nie może upuszczać kształtów. Wskaźnik zmienia się w rękę nad elementem, a OnItemClick zgłasza, który to element, więc kliknięcie węzła może otworzyć odpowiedni rekord. ZoomToFit dopasowuje cały diagram z kodu. Aby chronić tylko część diagramu, zablokuj pojedyncze elementy lub całe warstwy.

  • ReadOnly zachowuje zaznaczanie, powiększanie i przesuwanie, a blokuje każdą edycję
  • OnItemClick, OnItemDblClick i OnHover zgłaszają element pod wskaźnikiem
  • ZoomToFit, ZoomToSelection i CenterOn poruszają widokiem z kodu
  • Locked chroni pojedyncze elementy lub całą warstwę
Przeczytaj temat pomocy

Wyświetlanie i stylizacja

Jasny, ciemny i twój własny rysunek

Diagram powinien wyglądać jak część twojej aplikacji, a nie wklejony obrazek. Widoki, palety i eksport używają motywów sgcUICore, więc jedna właściwość Theme przełącza między jasnym a ciemnym i pasuje do siatek, wykresów i dashboardów sgcUI na tym samym formularzu. Każdy węzeł i łącznik ma własny Style z wypełnieniem, obrysem, kreskowaniem, promieniem narożnika i ustawieniami tekstu, a NodeStyle i ConnectorStyle są szablonami dla nowych elementów. Dla pełnej kontroli OnDrawNode pozwala namalować węzeł samodzielnie, a FontFile rysuje tekst wybraną czcionką TrueType.

  • Theme przyjmuje utDefault (podąża za motywem aplikacji), utLight, utDark lub utCustom
  • Style ustawia Fill, Stroke, StrokeWidth, Dash i CornerRadius
  • NodeStyle i ConnectorStyle stylizują każdy nowy element
  • sgcUIARGB buduje kolory, na przykład firmowy turkus
Przeczytaj temat pomocy

Dostępność

UI Automation dla czytników ekranu, klawiatura i wysoki kontrast, bez konfiguracji.

Dostępność

Rysuj diagramy klawiaturą i udostępniaj je UI Automation

sgcDiagram udostępnia Microsoft UI Automation węzły wraz z ich tekstem, łączące je połączenia oraz paletę kształtów, a diagram opisuje się tym samym tekstem alternatywnym, który zapisuje do dostępnego pliku PDF.

  • Strzałki przesuwają zaznaczenie, Alt+strzałki przesuwają je o jeden piksel, a Alt+Shift+strzałki zmieniają rozmiar zaznaczonego węzła
  • Ctrl+K rozpoczyna połączenie od zaznaczonego węzła: Tab i Shift+Tab wybierają cel, Enter łączy, a Esc anuluje
  • W palecie strzałki, Home i End przechodzą między kształtami, a Enter lub Space dodaje kształt z fokusem
  • Ctrl+Tab i Ctrl+Shift+Tab przenoszą fokus do następnej lub poprzedniej kontrolki, a w motywie wysokiego kontrastu systemu Windows diagram rysuje się kolorami systemowymi

Dostępność jest domyślnie włączona w każdej edycji, łącznie z bezpłatną edycją Community, w VCL w każdej wersji Delphi i C++Builder od Delphi 7 do Delphi 13, w FireMonkey w systemie Windows oraz w WinForms, WPF i Avalonia. W Delphi i C++Builder właściwości AccessibleName i AccessibleDescription ustawiają nazwę i opis udostępniane UI Automation, a w .NET to samo robią standardowa nazwa dostępności i tekst pomocy każdego frameworka. Zobacz raporty zgodności dotyczące dostępności. Punkty załamania łączników edytuje się wyłącznie myszą.

Przeczytaj temat pomocy

Zobacz sgcDiagram w akcji

sgcDiagram w demach pakietu sgcUI: kompletne aplikacje działające offline na wbudowanych danych symulowanych.

Kto buduje z sgcDiagram

Projektanci przepływów pracy i akceptacji

Akceptacje zakupów, eskalacje zgłoszeń i listy kontrolne wdrożenia często się zmieniają, a ich właściciele nie są programistami. Osadź edytor, aby właściciel procesu rysował przepływ z decyzjami i etykietami Tak lub Nie, zapisywał go jako JSON w twojej bazie danych, a twoja aplikacja odczytywała ten sam dokument, aby sterować prawdziwym procesem. ReadOnly zamienia zapisany przepływ w mapę dla wszystkich pozostałych. Zacznij od FlowchartEditor.

  • Paleta i edycja w miejscu
  • Etykiety łączników
  • Pliki JSON
Uruchom demo FlowchartEditor

Schematy organizacyjne z danych kadrowych

Systemy HR i ERP już wiedzą, kto komu podlega. Powiąż tabelę pracowników przez TsgcDiagramDataBinding, pozwól układowi drzewiastemu z zagęszczonymi liśćmi uporządkować kierowników i podwładnych, a każde pole pokoloruj według działu w OnCreateNode. Gdy dział HR zatwierdzi zmianę w siatce, wykres przebuduje się sam, a kliknięcie węzła zaznacza pracownika. Demo OrgChart wiąże w ten sposób 60 pracowników.

  • Powiązanie z danymi
  • Układ drzewiasty
  • Tryb przeglądarki
Uruchom demo OrgChart

Edytory węzłów dla potoków i automatyzacji

Produkty, które pozwalają klientom budować potoki danych, reguły automatyzacji lub przepływy IoT, potrzebują płótna, na którym łączy się bloki. Typowane porty, łączniki krzywe i OnConnecting dają ci reguły, OnDrawNode nadaje blokom twój własny wygląd, a graf jest zapisywany jako JSON, który twój silnik może wykonać. Ponieważ dokument nie zależy od interfejsu użytkownika, serwer może wczytać i sprawdzić ten sam graf.

  • Typowane porty
  • Reguły połączeń
  • Własne rysowanie
Uruchom demo NodeEditor

Przepływ zamówienia w kilku linijkach

To samo API w Delphi, C++ Builder i C#: dodaj paletę i widok, utwórz kształty i łączniki w jednym kroku cofania, a potem je uporządkuj. Wywołanie układu wymaga edycji Registered lub wersji próbnej.

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

Uruchom dema sgcDiagram

Każde demo jest dostępne dla Delphi i dla C++ Builder pod tą samą nazwą. Edycja .NET ma FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart i ConsoleRender.

FlowchartEditor

Tylko zarejestrowana FlowchartEditor

Przepływ zamówienia zbudowany w kodzie: przeciągaj kształty, rysuj łączniki z portów, zmieniaj rodzaj łącznika, cofaj, uruchom układ warstwowy, otwórz i zapisz JSON, eksportuj PNG i SVG, przełącz motyw i tryb tylko do odczytu.

OrgChart

Tylko zarejestrowana OrgChart

60 pracowników w TDBGrid, powiązanych z widokiem diagramu tylko do odczytu. Zatwierdź zmianę, a wykres się przebuduje, z zagęszczonymi liśćmi, kolorami działów, zaznaczaniem kliknięciem oraz eksportem PNG i SVG.

NodeEditor

NodeEditor

Typowane porty wejściowe i wyjściowe, reguła połączenia w OnConnecting, łączniki krzywe i bloki malowane w OnDrawNode, zapisane jako JSON razem z portami i podpisami.

Tylko zarejestrowana FlowchartEditorFMX

Edytor schematów blokowych na widoku i palecie FireMonkey, dla Windows i Androida, gdzie dotknięcie umieszcza kształt, a uszczypnięcie powiększa.

Headless

Tylko zarejestrowana Headless

Program konsolowy bez jednostek VCL ani FireMonkey, który buduje schemat blokowy, układa go układem warstwowym i zapisuje PNG, SVG i JSON, także na Linux64.

Skompilowane dema

Gotowe do uruchomienia pliki wykonywalne każdego produktu sgcUI, nic nie trzeba instalować.

Pobierz sgcUI_bin.zip →

Gdzie jest sgcDiagram

sgcDiagram jest w sgcUI Enterprise i jest też sprzedawany osobno. sgcDiagram jest też zawarty w pakiecie All-Access.

Pojedynczy pakiet sgcDiagram

€249 / programista, pełny kod źródłowy, 1 rok aktualizacji.

Kup sgcDiagram → Zobacz cennik →

sgcUI Enterprise

Wszystkie produkty sgcUI (14), od €699.

Zobacz Enterprise →

Bezpłatna edycja Community (esegece.sgcDiagram.Community w NuGet) pomija automatyczne układy, trasowanie omijające przeszkody, powiązanie z danymi i wiele warstw. Dla sgcDiagram nie ma mostu sgcWebSockets.

FunkcjaCommunity (bezpłatna)Zarejestrowana
Paleta, widok i edycja w miejscu✓✓
14 kształtów, porty, grupy i kontenery✓✓
Łączniki proste, ortogonalne i krzywe✓✓
Cofanie, schowek, przyciąganie i prowadnice✓✓
Pliki JSON, eksport PNG i SVG✓✓
Jasny i ciemny motyw, tryb przeglądarki✓✓
Układy warstwowe i drzewiaste−✓
Trasowanie ortogonalne omijające przeszkody−✓
Powiązanie z danymi−✓
Więcej niż jedna warstwa−✓

Obsługiwane frameworki i platformy

Komponenty w sgcDiagram

Widoki i palety

TsgcVCLDiagramView i TsgcVCLDiagramPalette dla VCL, TsgcFMXDiagramView i TsgcFMXDiagramPalette dla FireMonkey.

Model i kontroler

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector i TsgcDiagramController, bez zależności od interfejsu użytkownika.

Renderer i układy

TsgcDiagramRenderer zapisuje PNG i SVG bez okna. TsgcDiagramLayeredLayout i TsgcDiagramTreeLayout porządkują diagram. Registered

Widoki .NET

TsgcWinFormsDiagramView, TsgcWpfDiagramView i TsgcAvaloniaDiagramView, każdy z własną paletą, w przestrzeni nazw esegece.sgcDiagram.

CelKomponentPlatformy
Delphi 7 do 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 i Win64
Delphi XE6 do 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS i Android
C++ Builder 2007 do 13Te same komponentyWygenerowane nagłówki .hpp i biblioteki statyczne
Delphi 10.2 do 13, bez interfejsuDokument, JSON, trasowanie, układy, renderer PNG i SVGLinux64, na przykład do renderowania diagramów na serwerze
.NET Framework 4.7.2, .NET 8, 9 i 10Widoki WinForms, WPF i AvaloniaWindows, Linux i macOS, JSON, PNG i SVG bez interfejsu

Najczęściej zadawane pytania

Tak, do tego służą widok i paleta. Użytkownicy przeciągają kształty, rysują łączniki z portów, edytują tekst w miejscu, grupują, kopiują i wklejają oraz cofają lub ponawiają każdą akcję. Ustaw ReadOnly, gdy użytkownik ma tylko patrzeć, albo zablokuj pojedyncze elementy i warstwy, aby chronić część diagramu, podczas gdy reszta pozostaje edytowalna.

Tak, na dwa sposoby. W kodzie AddNode i AddConnector wewnątrz BeginTransaction i EndTransaction budują dowolny diagram jako jeden krok cofania. W edycji Registered TsgcDiagramDataBinding buduje go ze zbioru danych z kolumną klucza i rodzica oraz przebudowuje go, gdy dane się zmienią. W .NET czyta DataTable.

Dwa, w edycjach Registered i Trial. TsgcDiagramLayeredLayout układa grafy skierowane, takie jak schematy blokowe, automaty stanów i grafy zależności, w warstwach z małą liczbą skrzyżowań. TsgcDiagramTreeLayout układa hierarchie, takie jak schematy organizacyjne i drzewa kategorii, ze stylem zagęszczonych liści. Oba działają w czterech kierunkach i jako jeden krok cofania.

Nie w wersji 1. Diagramy eksportuje się do PNG i SVG, z widoku lub przez TsgcDiagramRenderer bez okna. SVG skaluje się bez strat, więc nadaje się do druku i dokumentów, a PNG zapisany ze skalą 2 pozostaje ostry na slajdach. Drukowanie również nie wchodzi w skład wersji 1.

Czterech zaawansowanych funkcji: automatycznych układów, trasowania ortogonalnego omijającego przeszkody (Community rysuje proste kolanka), powiązania z danymi i warstw poza pierwszą. Cała reszta jest: każdy kształt, trzy rodzaje łączników, porty, kontenery, cofanie, schowek, JSON, PNG i SVG, motywy, przyciąganie i prowadnice. Registered i Trial mają wszystko.

Tak. Format JSON jest taki sam na każdej platformie i w każdej edycji, więc diagram zapisany przez aplikację Delphi lub C++ Builder otwiera się w aplikacji WinForms, WPF lub Avalonia i odwrotnie. Plik zapisany przez edycję Registered otwiera się też w kompilacji Community, która zachowuje nazwy jego warstw.

Tak. Widok i paleta FireMonkey działają w systemach Windows, macOS, iOS i Android od Delphi XE6, a demo FlowchartEditorFMX pokazuje edycję dotykową na Androidzie. W .NET widok Avalonia działa w systemach Windows, Linux i macOS.

Pomoc sgcDiagram

3,000+Programistów
20+Lat
761+Komponentów
30+Integracji API
5Platform
30-dniowa gwarancja zwrotu pieniędzyNie jesteś zadowolony? Poproś o pełny zwrot pieniędzy w ciągu 30 dni od zakupu. Zobacz politykę zwrotów

Wypróbuj sgcDiagram już dziś

Wersja próbna sgcUI zawiera sgcDiagram i każdy inny produkt sgcUI.