Delphi, C++ Builder & .NET Onderdeel van sgcUI

sgcDiagram, de stroomschema- en diagrameditor voor Delphi, C++ Builder & .NET

Geef je gebruikers een echte diagrameditor in je eigen toepassing. Ze slepen vormen uit een palet, verbinden ze, typen tekst ter plekke en maken alles ongedaan. Jij rangschikt het hele diagram met één aanroep, slaat het op als JSON en exporteert het naar PNG of SVG, zelfs op een server zonder venster.

VCL, FireMonkey, WinForms, WPF, Avalonia14 vormen en 3 soorten connectorenHeadless PNG en SVG, Linux64 inbegrepenInbegrepen in sgcUI Enterprise
Proefversie downloaden Bekijk hoe het draait
FlowchartEditor-demo: het vormenpalet met stroomschema- en basisvormen naast een stroomschema van een bestelling
BELANGRIJKSTE FUNCTIES

Alles wat een diagrameditor nodig heeft

Dertien functies die een echte diagrameditor in je toepassing zetten.

Een editor die je gebruikers kunnen gebruiken

Alles wat een gebruiker van een diagramtool verwacht, als twee componenten die je op een formulier zet.

Een editor die je gebruikers kunnen gebruiken

Laat gebruikers hun eigen diagrammen tekenen

Zakelijke toepassingen hebben vaak een diagram nodig dat de gebruiker zelf beheert: een goedkeuringsproces, een processchema, de plattegrond van een productielijn. Stuur gebruikers niet naar een apart tekenprogramma, maar zet de editor in je eigen formulier. Plaats een TsgcVCLDiagramPalette en een TsgcVCLDiagramView, koppel ze met de eigenschap View van het palet, en je gebruikers slepen vormen op het canvas, trekken connectoren vanaf de poorten en typen de tekst van een knoop ter plekke. Hetzelfde paar bestaat voor FireMonkey, WinForms, WPF en Avalonia.

  • TsgcVCLDiagramPalette plaatst vormen met slepen, of met een klik op het item en een klik op de weergave
  • Dubbelklikken, F2 of gewoon typen bewerkt de tekst van een knoop ter plekke
  • Tool schakelt tussen dgtSelect, dgtPan, dgtConnector en dgtShape
  • Selecteer met Shift, Ctrl of een selectiekader, en verplaats, wijzig het formaat, draai, groepeer, kopieer en plak
  • Rechts naar links voor Arabisch en Hebreeuws: het palet, de linialen, de minimap en de werkbalken zijn gespiegeld terwijl het canvas je geometrie behoudt, en de richting dglRightToLeft van de automatische layouts rangschikt een diagram vanaf rechts
Het helponderwerp lezen
14 vormen voor stroomschema's, organigrammen en schetsen

Een editor die je gebruikers kunnen gebruiken

14 vormen voor stroomschema's, organigrammen en schetsen

De meeste diagrammen in bedrijfssoftware gebruiken een klein, bekend vocabulaire, en sgcDiagram levert dat kant-en-klaar. Je krijgt de stroomschemasymbolen proces, beslissing, begin/einde, gegevens, document, vooraf gedefinieerd proces en connectorcirkel, de basisvormen rechthoek, afgeronde rechthoek en ellips, vrije tekst, afbeeldingen, containers die andere knopen bevatten en eigen contouren uit SVG-padgegevens. Elke vorm kent zijn contour, zijn tekstgebied, zijn standaardpoorten en zijn themakleuren, dus een beslissing krijgt zijn poorten op de hoeken zonder code. Plaats een knoop met Left, Top, Width en Height en draai hem met Angle.

  • Shape neemt een TsgcDiagramShape-waarde zoals dgsDecision
  • dgsPath tekent elke contour uit PathData in SVG-padsyntaxis
  • dgsContainer bevat onderliggende knopen via ContainerId en verplaatst ze mee
  • TextAlign en TextVAlign plaatsen de afgebroken tekst binnen de vorm
Het helponderwerp lezen
Rechte, orthogonale en gebogen connectoren

Een editor die je gebruikers kunnen gebruiken

Rechte, orthogonale en gebogen connectoren

Een diagram is zo leesbaar als zijn lijnen. Elke connector kiest zijn soort: rechte lijnen of polylijnen via waypoints, orthogonale routes van horizontale en verticale segmenten, of vloeiende bochten voor knooppuntgrafen. AddConnector maakt een connector van de DefaultConnectorKind van het document. Pijlpunten aan beide uiteinden, streepjes- of stippellijnen en een willekeurig aantal labels, langs de lijn geplaatst en versleepbaar door de gebruiker, maken van een gewone lijn een duidelijke Ja- of Nee-tak. In de Registered-editie stuurt de orthogonale router om de knopen heen en verdeelt parallelle segmenten.

  • Kind is dgcStraight, dgcOrthogonal of dgcCurved
  • StartArrow en EndArrow nemen een TsgcDiagramArrow zoals dgaTriangle of dgaDiamond
  • Labels bevat een willekeurig aantal labels, geplaatst met Position en Offset
  • Waypoints buigen rechte en gebogen connectoren waar je wilt

Community routeert orthogonale connectoren als eenvoudige knikken die de knopen niet ontwijken.

Het helponderwerp lezen

Een editor die je gebruikers kunnen gebruiken

Poorten en vastkoppelen houden verbindingen intact

Niets frustreert een gebruiker meer dan een diagram dat uit elkaar valt als een vak verschuift. Elk connectoruiteinde is vastgekoppeld: aan een benoemde poort, aan de contour van de knoop, of vrij gelaten op een punt. Verplaats, vergroot of draai een knoop en zijn connectoren volgen en worden opnieuw gerouteerd. Vormen hebben poorten op het midden van hun zijden, en je kunt er eigen toevoegen met een positie, een zijde, een stroomrichting en een bijschrift, waarmee de getypte in- en uitgangen van een knooppunteditor worden gebouwd. ShowPorts bepaalt of de poorten altijd, bij hover of nooit verschijnen.

  • TsgcDiagramPort heeft Id, X, Y, Side, Flow en Caption
  • Flow maakt een poort een ingang met dgfIn of een uitgang met dgfOut
  • SourcePortId en TargetPortId koppelen een connectoruiteinde vast aan een poort
  • ShowPorts is standaard dgvHover, of dgvAlways en dgvNever
Het helponderwerp lezen

Diagrammen die zichzelf bouwen

Laat de code het opruimwerk doen: rangschik een graaf, bouw een schema uit een tabel, of verbind blokken met regels.

Diagrammen die zichzelf bouwen Alleen geregistreerd

Rangschik het hele diagram met één aanroep

Diagrammen die uit code zijn gebouwd of snel door een gebruiker zijn getekend, zien er zelden netjes uit. TsgcDiagramLayeredLayout rangschikt een gerichte graaf in lagen, de Sugiyama-methode, zodat stroomschema's, processchema's, toestandsmachines en afhankelijkheidsgrafen van links naar rechts of van boven naar beneden uitkomen met weinig kruisende connectoren en rechte lange connectoren. TsgcDiagramTreeLayout centreert ouders boven hun kinderen voor organigrammen en categoriebomen. Beide draaien als één ongedaanmaakstap, dus een gebruiker kan een indeling proberen en met Ctrl+Z terugdraaien. SelectionOnly rangschikt alleen het geselecteerde deel.

  • Direction is dglTopToBottom, dglLeftToRight, dglBottomToTop of dglRightToLeft
  • LayerSpacing en NodeSpacing stellen de tussenruimte in, standaard 60 en 30 wereldeenheden
  • Crossings meldt de kruisende connectoren na Execute
  • TreeStyle ingesteld op dgoCompactLeaves stapelt de medewerkers van een manager in één kolom

In Community blijven de knopen staan waar de gebruiker of de code ze zet.

Het helponderwerp lezen
Organigrammen rechtstreeks uit een tabel

Diagrammen die zichzelf bouwen Alleen geregistreerd

Organigrammen rechtstreeks uit een tabel

Je medewerkers, kostenplaatsen of productcategorieën staan al in een tabel met een sleutel- en een oudercolom. TsgcDiagramDataBinding maakt van die rijen een diagram: elke rij wordt een knoop, elke oudersleutel een connector, en de boom- of gelaagde indeling rangschikt het resultaat. Stel DataSource, KeyField, ParentField en LabelField in, wijs Target naar de weergave en zet Active aan. Met LiveUpdates aan bouwt een geposte wijziging, een insert of een delete het schema opnieuw bij de volgende ronde van de berichtenlus, terwijl het doorlopen van de rijen de selectie met rust laat.

  • DataSource, KeyField, ParentField en LabelField koppelen de kolommen
  • OnCreateNode stileert elke knoop vanuit elk veld van zijn rij
  • dgbAuto kiest de boomindeling voor een boom en de gelaagde indeling voor meerdere ouders
  • ParentSeparator somt meerdere ouders op in één veld

Community heeft geen databinding: bouw de knopen in code met AddNode en AddConnector.

Het helponderwerp lezen
Knooppunteditors voor workflows en pipelines

Diagrammen die zichzelf bouwen

Knooppunteditors voor workflows en pipelines

Automatiseringsregels, datapipelines en IoT-stromen begrijp je het makkelijkst als blokken die aan elkaar gekoppeld zijn. Geef elke knoop getypte ingangspoorten links en uitgangspoorten rechts, zet DefaultConnectorKind op gebogen connectoren en teken de blokken zelf in OnDrawNode met een titelbalk en gekleurde poortpunten. Met OnConnecting weiger je een verbinding voordat die wordt gemaakt, zodat een getaluitgang nooit een tekstingang voedt. De NodeEditor-demo bouwt precies dit, met blokken die in één ongedaanmaakstap worden toegevoegd en grafen die als JSON worden opgeslagen samen met hun poorten en bijschriften.

  • OnConnecting weigert een verbinding, bijvoorbeeld tussen poorten van verschillende typen
  • OnDrawNode tekent een knoop, of vult de standaardtekening aan
  • DefaultConnectorKind ingesteld op dgcCurved geeft de klassieke knooppuntgraaf-look
  • De Caption van een poort wordt ernaast getekend, binnen de knoop
Het helponderwerp lezen

Ongedaan maken, bestanden en export

Veilig bewerken voor de gebruiker, en een documentformaat en beeldexport waarop je toepassing kan rekenen.

Alles ongedaan maken, uitlijnen op hulplijnen

Ongedaan maken, bestanden en export

Alles ongedaan maken, uitlijnen op hulplijnen

Gebruikers experimenteren als ze weten dat ze terug kunnen. Het document houdt een stapel voor ongedaan maken en opnieuw uitvoeren bij, en elke gebruikersactie in de weergave is één stap. In code groeperen BeginTransaction en EndTransaction een willekeurig aantal wijzigingen tot één benoemde stap, en Rollback gooit ze weg. Kopiëren en plakken werken binnen de toepassing, en herhaald plakken wordt verschoven zodat de items niet op elkaar liggen. Terwijl een knoop verplaatst of van formaat verandert, springen zijn randen en middellijnen naar het raster en naar de knopen eromheen, en een hulplijn toont de uitlijning.

  • BeginTransaction, EndTransaction en Rollback groeperen wijzigingen in code
  • UndoLimit bewaart standaard 100 stappen, en UndoCaption benoemt de volgende ongedaanmaking
  • CopyToClipboard, CutToClipboard en PasteFromClipboard op de weergave
  • SnapToGrid, SnapToGuides en GridSize regelen de uitlijnhulpen
Het helponderwerp lezen
Opslaan als JSON, overal te openen

Ongedaan maken, bestanden en export

Opslaan als JSON, overal te openen

Een diagram bestaat uit gegevens die je toepassing opslaat, verstuurt en versiebeheert. Het document wordt als string, bestand of stream als JSON opgeslagen, en het formaat is identiek op elk platform en in elke editie: een bestand dat door een Delphi-desktoptoepassing is opgeslagen, opent in een C++ Builder-tool, een .NET-service of een Community-build. De uitvoer is canoniek, met een vaste volgorde van sleutels en weggelaten standaardwaarden, zodat hetzelfde diagram altijd dezelfde tekst oplevert en netjes vergelijkt in versiebeheer. Afbeeldingen reizen als PNG-gegevens mee in het bestand.

  • SaveToFile en LoadFromFile, SaveToStream en LoadFromStream
  • SaveToJSON en LoadFromJSON voor een databaseveld of een webverzoek
  • Een weergave streamt zijn diagram in het formulierbestand als DiagramJSON
  • De in het bestand opgeslagen connectorroutes blijven behouden bij het laden
Het helponderwerp lezen
Exporteer PNG en SVG, zelfs op een server

Ongedaan maken, bestanden en export

Exporteer PNG en SVG, zelfs op een server

Diagrammen belanden in rapporten, e-mails, wikipagina's en presentaties. De weergave slaat op wat ze toont als PNG of SVG, met een schaalfactor voor scherpe afbeeldingen en met haar eigen tekening en thema toegepast, zodat een donker diagram donker exporteert. TsgcDiagramRenderer doet hetzelfde helemaal zonder weergave: een consoleprogramma, een Windows-service of een Linux64-daemon bouwt een diagram, rangschikt het en schrijft de bestanden. De Headless-demo doet precies dat met een stroomschema van een supportticket, en gebouwd met Delphi 13 schrijft hij dezelfde bytes op Win32, Win64 en Linux64.

  • SaveToPNG en SaveToSVG op de weergave, met een schaal in pixels per wereldeenheid
  • SaveToPNGFile en SaveToSVGFile op TsgcDiagramRenderer, geen venster nodig
  • RenderTo tekent een deel van een document op elk sgcUICore-canvas
  • PDF-export en afdrukken maken geen deel uit van versie 1
Het helponderwerp lezen

Weergeven en vormgeven

Toon diagrammen aan mensen die ze niet mogen bewerken, in de stijl van je toepassing.

Een alleen-lezen viewer voor dashboards en portalen

Weergeven en vormgeven

Een alleen-lezen viewer voor dashboards en portalen

Niet elke gebruiker hoort het processchema te bewerken. Zet ReadOnly aan en dezelfde weergave wordt een viewer: gebruikers selecteren, zoomen met Ctrl en het wiel en pannen met de middelste knop of Spatie, maar niets wordt verplaatst, verbonden of verwijderd, en het palet kan geen vormen neerzetten. De aanwijzer wordt een hand boven een item en OnItemClick meldt welk item het is, zodat een klik op een knoop het bijbehorende record kan openen. ZoomToFit toont het hele diagram vanuit code. Om slechts een deel van een diagram te beschermen, vergrendel je losse items of hele lagen.

  • ReadOnly behoudt selectie, zoom en pannen, en blokkeert elke bewerking
  • OnItemClick, OnItemDblClick en OnHover melden het item onder de aanwijzer
  • ZoomToFit, ZoomToSelection en CenterOn verplaatsen de weergave vanuit code
  • Locked beschermt losse items of een hele laag
Het helponderwerp lezen

Weergeven en vormgeven

Licht, donker en je eigen tekening

Een diagram moet eruitzien als onderdeel van je toepassing, niet als een geplakte afbeelding. De weergaven, de paletten en de export gebruiken de sgcUICore-thema's, dus één eigenschap Theme schakelt tussen licht en donker en past bij de sgcUI-grids, -grafieken en -dashboards op hetzelfde formulier. Elke knoop en connector heeft zijn eigen Style met vulling, lijn, streepjes, hoekradius en tekstinstellingen, en NodeStyle en ConnectorStyle zijn de sjablonen voor nieuwe items. Voor volledige controle laat OnDrawNode je een knoop zelf tekenen, en FontFile tekent de tekst met een TrueType-lettertype naar keuze.

  • Theme neemt utDefault (volgt het applicatiethema), utLight, utDark of utCustom
  • Style stelt Fill, Stroke, StrokeWidth, Dash en CornerRadius in
  • NodeStyle en ConnectorStyle stileren elk nieuw item
  • sgcUIARGB bouwt kleuren zoals een huisstijlturkoois
Het helponderwerp lezen

Toegankelijkheid

UI Automation voor schermlezers, het toetsenbord en hoog contrast, zonder configuratie.

Toegankelijkheid

Teken diagrammen met het toetsenbord en bied ze aan UI Automation aan

sgcDiagram biedt de knopen met hun tekst, de verbindingen ertussen en het vormenpalet aan Microsoft UI Automation aan, en het diagram beschrijft zichzelf met hetzelfde tekstalternatief dat het in een toegankelijke PDF schrijft.

  • Pijltoetsen verplaatsen de selectie, Alt+pijltoetsen schuiven die één pixel op en Alt+Shift+pijltoetsen wijzigen het formaat van de geselecteerde knoop
  • Ctrl+K start een verbinding vanaf de geselecteerde knoop: Tab en Shift+Tab kiezen het doel, Enter verbindt en Esc annuleert
  • In het palet gaan de pijltoetsen, Home en End tussen vormen, en Enter of Spatie voegt de vorm met focus toe
  • Ctrl+Tab en Ctrl+Shift+Tab verplaatsen de focus naar het volgende of vorige besturingselement, en onder een Windows-thema met hoog contrast tekent het diagram met de systeemkleuren

Toegankelijkheid staat standaard aan in elke editie, ook in de gratis Community-editie, op VCL in elke Delphi- en C++Builder-versie van Delphi 7 tot en met Delphi 13, op FireMonkey op Windows, en op WinForms, WPF en Avalonia. In Delphi en C++Builder stellen AccessibleName en AccessibleDescription de naam en de beschrijving in die aan UI Automation worden aangeboden, en in .NET doen de standaard toegankelijke naam en helptekst van elk framework hetzelfde. Zie de toegankelijkheidsrapporten. Buigpunten van connectoren worden alleen met de muis bewerkt.

Het helponderwerp lezen
IN ACTIE

Zie sgcDiagram in actie

sgcDiagram in de sgcUI suite-demo's: complete applicaties die offline draaien met ingebouwde gesimuleerde gegevens.

Het procesdiagram van Lijn 1 van tanks tot vulmachine, met de defecte pomp P-201 in rood.

Het procesdiagram van Lijn 1 van tanks tot vulmachine, met de defecte pomp P-201 in rood.

Altamira Plant →
Een hubnetwerkdiagram: baanbreedte naar volume, kleur naar status.

Een hubnetwerkdiagram: baanbreedte naar volume, kleur naar status.

Altamira Fleet →
Mijlpaalafhankelijkheden over projecten heen, automatisch opgemaakt, kritieke koppelingen gemarkeerd.

Mijlpaalafhankelijkheden over projecten heen, automatisch opgemaakt, kritieke koppelingen gemarkeerd.

Altamira PMO →
Een inkoopgoedkeuringsworkflow naast het aanvragenraster en hun goedkeuringsstatus.

Een inkoopgoedkeuringsworkflow naast het aanvragenraster en hun goedkeuringsstatus.

Altamira ERP →
Bekijk alle suite-demo's
TOEPASSINGEN

Wie bouwt er met sgcDiagram

Ontwerpers voor workflows en goedkeuringen

Inkoopgoedkeuringen, ticketescalaties en onboardingchecklists veranderen vaak, en de mensen die erover gaan zijn geen programmeurs. Bouw de editor in, zodat een procesverantwoordelijke de stroom tekent met beslissingen en Ja- of Nee-labels, die als JSON in je database opslaat, en je toepassing leest hetzelfde document om het echte proces aan te sturen. ReadOnly maakt van de opgeslagen stroom een kaart voor alle anderen. Begin met FlowchartEditor.

  • Palet en bewerken ter plekke
  • Connectorlabels
  • JSON-bestanden
Start de FlowchartEditor-demo

Organigrammen uit HR-gegevens

HR- en ERP-systemen weten al wie aan wie rapporteert. Bind de medewerkerstabel met TsgcDiagramDataBinding, laat de boomindeling met compacte bladeren managers en medewerkers rangschikken, en kleur elk vak per afdeling in OnCreateNode. Als HR een wijziging in het grid post, bouwt het schema zichzelf opnieuw op, en een klik op een knoop selecteert de medewerker. De OrgChart-demo bindt zo 60 medewerkers.

  • Databinding
  • Boomindeling
  • Viewermodus
Start de OrgChart-demo

Knooppunteditors voor pipelines en automatisering

Producten waarmee klanten datapipelines, automatiseringsregels of IoT-stromen bouwen, hebben een canvas nodig waar blokken aan elkaar worden gekoppeld. Getypte poorten, gebogen connectoren en OnConnecting geven je de regels, OnDrawNode geeft de blokken je eigen look, en de graaf wordt opgeslagen als JSON die je engine kan uitvoeren. Omdat het document geen afhankelijkheid van een gebruikersinterface heeft, kan een server dezelfde graaf laden en controleren.

  • Getypte poorten
  • Verbindingsregels
  • Eigen tekening
Start de NodeEditor-demo
SNEL STARTEN

Een bestelstroom in een paar regels

Dezelfde API in Delphi, C++ Builder en C#: voeg een palet en een weergave toe, maak vormen en connectoren in één ongedaanmaakstap en rangschik ze daarna. De indelingsaanroep vereist de Registered- of Trial-editie.

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
Proefversie downloaden
DEMO'S

Probeer de sgcDiagram-demo's uit

Elke demo wordt geleverd voor Delphi en voor C++ Builder onder dezelfde naam. De .NET-editie heeft FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart en ConsoleRender.

FlowchartEditor

Alleen geregistreerd FlowchartEditor

Een bestelstroom in code gebouwd: sleep vormen, trek connectoren vanaf de poorten, wissel van connectorsoort, maak ongedaan, voer de gelaagde indeling uit, open en bewaar JSON, exporteer PNG en SVG, wissel van thema en alleen-lezenmodus.

OrgChart

Alleen geregistreerd OrgChart

60 medewerkers in een TDBGrid, gebonden aan een alleen-lezen diagramweergave. Post een wijziging en het schema wordt opnieuw opgebouwd, met compacte bladeren, afdelingskleuren, klikken om te selecteren en PNG- en SVG-export.

NodeEditor

NodeEditor

Getypte in- en uitgangspoorten, een verbindingsregel in OnConnecting, gebogen connectoren en blokken getekend in OnDrawNode, opgeslagen als JSON met hun poorten en bijschriften.

Alleen geregistreerd FlowchartEditorFMX

De stroomschema-editor op de FireMonkey-weergave en het palet, voor Windows en Android, waar een tik een vorm plaatst en knijpen zoomt.

Headless

Alleen geregistreerd Headless

Een consoleprogramma zonder VCL- of FireMonkey-unit dat een stroomschema bouwt, het met de gelaagde indeling rangschikt en PNG, SVG en JSON schrijft, ook op Linux64.

Gecompileerde demo's

Direct uitvoerbare programma's van elk sgcUI-product, zonder installatie.

sgcUI_bin.zip downloaden →
EDITIES

Waar sgcDiagram in zit

sgcDiagram zit in sgcUI Enterprise en wordt ook los verkocht. sgcDiagram zit ook in de All-Access-bundel.

sgcDiagram los pakket

€249 / ontwikkelaar, volledige broncode, 1 jaar updates.

sgcDiagram kopen → Prijzen bekijken →

sgcUI Enterprise

Alle 14 sgcUI-producten, vanaf €699.

Enterprise bekijken →

De gratis Community-editie (esegece.sgcDiagram.Community op NuGet) laat automatische indelingen, routering die obstakels ontwijkt, databinding en meerdere lagen weg. Er is geen sgcWebSockets-bridge voor sgcDiagram.

FunctieCommunity (gratis)Geregistreerd
Palet, weergave en bewerken ter plekke✓✓
14 vormen, poorten, groepen en containers✓✓
Rechte, orthogonale en gebogen connectoren✓✓
Ongedaan maken, klembord, uitlijnen en hulplijnen✓✓
JSON-bestanden, PNG- en SVG-export✓✓
Lichte en donkere thema's, viewermodus✓✓
Gelaagde indelingen en boomindelingen−✓
Orthogonale routering die obstakels ontwijkt−✓
Databinding−✓
Meer dan één laag−✓
PLATFORMEN

Ondersteunde frameworks en platformen

Componenten in sgcDiagram

Weergaven en paletten

TsgcVCLDiagramView en TsgcVCLDiagramPalette voor VCL, TsgcFMXDiagramView en TsgcFMXDiagramPalette voor FireMonkey.

Model en controller

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector en TsgcDiagramController, zonder afhankelijkheid van een gebruikersinterface.

Renderer en indelingen

TsgcDiagramRenderer schrijft PNG en SVG zonder venster. TsgcDiagramLayeredLayout en TsgcDiagramTreeLayout rangschikken het diagram. Registered

.NET-weergaven

TsgcWinFormsDiagramView, TsgcWpfDiagramView en TsgcAvaloniaDiagramView, elk met zijn palet, in de namespace esegece.sgcDiagram.

DoelComponentPlatformen
Delphi 7 tot 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 and Win64
Delphi XE6 tot 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS en Android
C++ Builder 2007 tot 13Dezelfde componentenGegenereerde .hpp-headers en statische bibliotheken
Delphi 10.2 tot 13, headlessDocument, JSON, routering, indelingen, PNG- en SVG-rendererLinux64, bijvoorbeeld om diagrammen op een server te renderen
.NET Framework 4.7.2, .NET 8, 9 en 10WinForms-, WPF- en Avalonia-weergavenWindows, Linux en macOS, headless JSON, PNG en SVG
VEELGESTELDE VRAGEN

Veelgestelde vragen

Ja, daar dienen de weergave en het palet voor. Gebruikers slepen vormen, trekken connectoren vanaf de poorten, bewerken tekst ter plekke, groeperen, kopiëren en plakken, en maken elke actie ongedaan of voeren die opnieuw uit. Zet ReadOnly aan als een gebruiker alleen mag kijken, of vergrendel losse items en lagen om een deel van een diagram te beschermen terwijl de rest bewerkbaar blijft.

Ja, op twee manieren. In code bouwen AddNode en AddConnector binnen BeginTransaction en EndTransaction elk diagram als één ongedaanmaakstap. In de Registered-editie bouwt TsgcDiagramDataBinding het uit een dataset met een sleutel- en een oudercolom en bouwt het opnieuw op als de gegevens veranderen. In .NET leest het een DataTable.

Twee, in de Registered- en Trial-edities. TsgcDiagramLayeredLayout rangschikt gerichte grafen zoals stroomschema's, toestandsmachines en afhankelijkheidsgrafen in lagen met weinig kruisingen. TsgcDiagramTreeLayout rangschikt hiërarchieën zoals organigrammen en categoriebomen, met een compacte bladerenstijl. Beide werken in vier richtingen en draaien als één ongedaanmaakstap.

Niet in versie 1. Diagrammen exporteren naar PNG en SVG, vanuit de weergave of met TsgcDiagramRenderer zonder venster. SVG schaalt zonder verlies, dus past bij druk en documenten, en een PNG die met schaal 2 is opgeslagen blijft scherp op presentaties. Afdrukken maakt ook geen deel uit van versie 1.

Vier geavanceerde functies: de automatische indelingen, orthogonale routering die obstakels ontwijkt (Community tekent eenvoudige knikken), databinding en lagen na de eerste. Al het andere zit erin: elke vorm, de drie soorten connectoren, poorten, containers, ongedaan maken, het klembord, JSON, PNG en SVG, thema's, uitlijnen en hulplijnen. Registered en Trial hebben alles.

Ja. Het JSON-formaat is hetzelfde op elk platform en in elke editie, dus een diagram dat door een Delphi- of C++ Builder-toepassing is opgeslagen, opent in een WinForms-, WPF- of Avalonia-toepassing en andersom. Een bestand dat door de Registered-editie is opgeslagen, opent ook in een Community-build, die de laagnamen behoudt.

Ja. De FireMonkey-weergave en het palet draaien vanaf Delphi XE6 op Windows, macOS, iOS en Android, en de FlowchartEditorFMX-demo toont bewerken met touch op Android. In .NET draait de Avalonia-weergave op Windows, Linux en macOS.

DOCUMENTATIE

sgcDiagram help

Delphi

Inleiding, Snelstart VCL, Snelstart FMX, Headless, Gelaagde indeling, Export, Platformen, Edities.

C++ Builder

Inleiding, Snelstart C++ Builder, Gelaagde indeling.

.NET

.NET-overzicht, Snelstart WinForms, WPF, Avalonia.

PDF-handleidingen

Delphi, C++ Builder en .NET, voor elk sgcUI-product.

3,000+Ontwikkelaars
20+Jaar
761+Componenten
30+API-integraties
5Platformen
Niet-goed-geld-terug-garantie van 30 dagenNiet tevreden? Vraag binnen 30 dagen na aankoop een volledige terugbetaling aan. Bekijk het terugbetalingsbeleid

Probeer sgcDiagram vandaag

De sgcUI-proefversie bevat sgcDiagram en alle andere sgcUI-producten.

Proefversie downloaden sgcDiagram kopen