Delphi, C++ Builder & .NET Parte di sgcUI

sgcDiagram, l'editor di flowchart e diagrammi per Delphi, C++ Builder & .NET

Offri ai tuoi utenti un vero editor di diagrammi dentro la tua applicazione. Trascinano le forme da una palette, le collegano, scrivono il testo direttamente sul nodo e annullano qualsiasi azione. Tu disponi l'intero diagramma con una sola chiamata, lo salvi come JSON e lo esporti in PNG o SVG, anche su un server senza finestre.

VCL, FireMonkey, WinForms, WPF, Avalonia14 forme e 3 tipi di connettorePNG e SVG headless, Linux64 inclusoIncluso in sgcUI Enterprise
Demo FlowchartEditor: la palette di forme con simboli di flowchart e forme di base accanto a un flowchart di ordine

Tutto ciò che serve a un editor di diagrammi

Tredici funzionalità che portano un vero editor di diagrammi nella tua applicazione.

Un editor che i tuoi utenti sanno usare

Tutto ciò che un utente si aspetta da uno strumento di diagrammi, in due componenti da posare su un form.

Un editor che i tuoi utenti sanno usare

Lascia che gli utenti disegnino i propri diagrammi

Le applicazioni gestionali hanno spesso bisogno di un diagramma di proprietà dell'utente: un flusso di approvazione, una mappa dei processi, la planimetria di una linea di produzione. Invece di mandare gli utenti a uno strumento di disegno separato, inserisci l'editor nel tuo form. Posa un TsgcVCLDiagramPalette e un TsgcVCLDiagramView, collegali con la proprietà View della palette, e i tuoi utenti trascinano le forme sulla tela, tracciano connettori dalle porte e scrivono il testo di un nodo direttamente sul posto. La stessa coppia esiste per FireMonkey, WinForms, WPF e Avalonia.

  • TsgcVCLDiagramPalette inserisce le forme con un trascinamento, oppure con un clic sull'elemento e un clic sulla vista
  • Un doppio clic, F2 o semplicemente scrivere modifica il testo di un nodo sul posto
  • Tool passa tra dgtSelect, dgtPan, dgtConnector e dgtShape
  • Seleziona con Maiusc, Ctrl o un rettangolo di selezione, poi sposta, ridimensiona, ruota, raggruppa, copia e incolla
  • Da destra a sinistra per arabo ed ebraico: tavolozza, righelli, minimappa e barre degli strumenti sono speculari mentre la tela mantiene la tua geometria, e la direzione dglRightToLeft dei layout automatici dispone un diagramma da destra
Leggi l'argomento della guida
14 forme per flowchart, organigrammi e schizzi

Un editor che i tuoi utenti sanno usare

14 forme per flowchart, organigrammi e schizzi

La maggior parte dei diagrammi nel software gestionale usa un vocabolario piccolo e familiare, e sgcDiagram lo fornisce già pronto. Hai i simboli di flowchart processo, decisione, terminatore, dati, documento, processo predefinito e cerchio connettore, il rettangolo di base, il rettangolo arrotondato e l'ellisse, il testo libero, le immagini, i contenitori che racchiudono altri nodi e i contorni personalizzati da dati di percorso SVG. Ogni forma conosce il proprio contorno, la propria area di testo, le porte predefinite e i colori del tema, così una decisione ha le porte sugli angoli senza scrivere codice. Posiziona un nodo con Left, Top, Width e Height e ruotalo con Angle.

  • Shape accetta un valore TsgcDiagramShape come dgsDecision
  • dgsPath disegna qualsiasi contorno da PathData nella sintassi dei percorsi SVG
  • dgsContainer contiene nodi figli tramite ContainerId e li sposta insieme
  • TextAlign e TextVAlign posizionano il testo a capo dentro la forma
Leggi l'argomento della guida
Connettori diritti, ortogonali e curvi

Un editor che i tuoi utenti sanno usare

Connettori diritti, ortogonali e curvi

Un diagramma è leggibile quanto le sue linee. Ogni connettore sceglie il proprio tipo: linee rette o polilinee con punti intermedi, percorsi ortogonali di segmenti orizzontali e verticali, oppure curve morbide per i grafi di nodi. AddConnector crea un connettore del DefaultConnectorKind del documento. Punte di freccia a entrambe le estremità, tratti tratteggiati o punteggiati e un numero qualsiasi di etichette, posizionate lungo la linea e trascinabili dall'utente, trasformano una semplice linea in un chiaro ramo Sì o No. Nell'edizione Registered il router ortogonale aggira i nodi e distanzia i segmenti paralleli.

  • Kind è dgcStraight, dgcOrthogonal o dgcCurved
  • StartArrow e EndArrow accettano un TsgcDiagramArrow come dgaTriangle o dgaDiamond
  • Labels contiene un numero qualsiasi di etichette, posizionate con Position e Offset
  • Waypoints piega i connettori diritti e curvi dove vuoi

Community instrada i connettori ortogonali come semplici gomiti che non evitano i nodi.

Leggi l'argomento della guida

Un editor che i tuoi utenti sanno usare

Porte e aggancio mantengono i collegamenti

Niente frustra di più un utente di un diagramma che si sfascia quando si sposta una casella. Ogni estremità di un connettore è agganciata: a una porta con nome, al contorno del nodo, oppure lasciata libera in un punto. Sposta, ridimensiona o ruota un nodo e i suoi connettori lo seguono e vengono instradati di nuovo. Le forme hanno porte nei punti medi dei lati e puoi aggiungerne di tue con una posizione, un lato, una direzione del flusso e una didascalia, ed è così che si costruiscono gli ingressi e le uscite tipizzati di un editor di nodi. ShowPorts decide se le porte compaiono sempre, al passaggio del mouse o mai.

  • TsgcDiagramPort ha Id, X, Y, Side, Flow e Caption
  • Flow rende una porta un ingresso con dgfIn o un'uscita con dgfOut
  • SourcePortId e TargetPortId agganciano l'estremità di un connettore a una porta
  • ShowPorts è dgvHover per impostazione predefinita, oppure dgvAlways e dgvNever
Leggi l'argomento della guida

Diagrammi che si costruiscono da soli

Lascia al codice il lavoro di riordino: disponi un grafo, costruisci un grafico da una tabella o collega blocchi con regole.

Diagrammi che si costruiscono da soli Solo Registered

Disponi l'intero diagramma con una sola chiamata

I diagrammi costruiti da codice, o disegnati in fretta da un utente, raramente appaiono ordinati. TsgcDiagramLayeredLayout dispone un grafo orientato a livelli, con il metodo Sugiyama, così flowchart, mappe di processo, macchine a stati e grafi di dipendenze escono da sinistra a destra o dall'alto in basso con pochi incroci di connettori e i connettori lunghi mantenuti dritti. TsgcDiagramTreeLayout centra i genitori sopra i figli per organigrammi e alberi di categorie. Entrambi sono un unico passo di annullamento, quindi un utente può provare un layout e tornare indietro con Ctrl+Z. SelectionOnly dispone solo la parte selezionata.

  • Direction è dglTopToBottom, dglLeftToRight, dglBottomToTop o dglRightToLeft
  • LayerSpacing e NodeSpacing impostano gli spazi, 60 e 30 unità del mondo per impostazione predefinita
  • Crossings riporta gli incroci dei connettori dopo Execute
  • TreeStyle impostato su dgoCompactLeaves impila i collaboratori di un responsabile in una sola colonna

In Community i nodi restano dove li mette l'utente o il codice.

Leggi l'argomento della guida
Organigrammi direttamente da una tabella

Diagrammi che si costruiscono da soli Solo Registered

Organigrammi direttamente da una tabella

I tuoi dipendenti, centri di costo o categorie di prodotto vivono già in una tabella con una chiave e una colonna padre. TsgcDiagramDataBinding trasforma quelle righe in un diagramma: ogni riga diventa un nodo, ogni chiave padre un connettore, e il layout ad albero o a livelli dispone il risultato. Imposta DataSource, KeyField, ParentField e LabelField, punta Target alla vista e imposta Active. Con LiveUpdates attivo, una modifica registrata, un inserimento o una cancellazione ricostruisce il grafico al giro successivo del ciclo dei messaggi, mentre lo scorrimento tra le righe non tocca la selezione.

  • DataSource, KeyField, ParentField e LabelField mappano le colonne
  • OnCreateNode applica lo stile a ogni nodo da qualsiasi campo della sua riga
  • dgbAuto sceglie il layout ad albero per un albero e quello a livelli per più genitori
  • ParentSeparator elenca più genitori in un solo campo

Community non ha il collegamento ai dati: costruisci i nodi nel codice con AddNode e AddConnector.

Leggi l'argomento della guida
Editor di nodi per workflow e pipeline

Diagrammi che si costruiscono da soli

Editor di nodi per workflow e pipeline

Regole di automazione, pipeline di dati e flussi IoT si capiscono meglio come blocchi collegati tra loro. Dai a ogni nodo porte di ingresso tipizzate a sinistra e porte di uscita a destra, passa DefaultConnectorKind ai connettori curvi e disegna tu i blocchi in OnDrawNode con una banda del titolo e punti colorati per le porte. OnConnecting ti permette di rifiutare un collegamento prima che avvenga, così un'uscita numerica non alimenta mai un ingresso di testo. La demo NodeEditor costruisce esattamente questo, con blocchi aggiunti in un solo passo di annullamento e grafi salvati come JSON insieme a porte e didascalie.

  • OnConnecting blocca una connessione, ad esempio tra porte di tipi diversi
  • OnDrawNode disegna un nodo, oppure integra il disegno predefinito
  • DefaultConnectorKind impostato su dgcCurved dà il classico aspetto da grafo di nodi
  • La Caption di una porta viene disegnata accanto a essa dentro il nodo
Leggi l'argomento della guida

Annulla, file ed esportazione

Modifica sicura per l'utente, e un formato di documento e un output di immagini su cui la tua applicazione può contare.

Annulla tutto, aggancia alle guide

Annulla, file ed esportazione

Annulla tutto, aggancia alle guide

Gli utenti sperimentano quando sanno di poter tornare indietro. Il documento mantiene una pila di annulla e una di ripeti, e ogni azione dell'utente nella vista è un passo. Nel codice, BeginTransaction e EndTransaction raggruppano un numero qualsiasi di modifiche in un unico passo con nome, e Rollback le scarta. Copia e incolla funzionano dentro l'applicazione, e gli incolla ripetuti vengono sfalsati per non sovrapporsi. Mentre un nodo si sposta o si ridimensiona, i suoi bordi e le linee centrali si agganciano alla griglia e ai nodi vicini, e una linea guida mostra l'allineamento.

  • BeginTransaction, EndTransaction e Rollback raggruppano le modifiche fatte nel codice
  • UndoLimit conserva 100 passi per impostazione predefinita, e UndoCaption dà il nome al prossimo annullamento
  • CopyToClipboard, CutToClipboard e PasteFromClipboard sulla vista
  • SnapToGrid, SnapToGuides e GridSize controllano gli aiuti di allineamento
Leggi l'argomento della guida
Salva come JSON, aprilo ovunque

Annulla, file ed esportazione

Salva come JSON, aprilo ovunque

Un diagramma è un dato che la tua applicazione archivia, invia e versiona. Il documento si salva in JSON come stringa, file o stream, e il formato è identico su ogni piattaforma e in ogni edizione: un file salvato da un'applicazione desktop Delphi si apre in uno strumento C++ Builder, in un servizio .NET o in una build Community. L'output è canonico, con un ordine fisso delle chiavi e i valori predefiniti omessi, quindi lo stesso diagramma produce sempre lo stesso testo e si confronta pulitamente nel controllo di versione. Le immagini viaggiano dentro il file come dati PNG.

  • SaveToFile e LoadFromFile, SaveToStream e LoadFromStream
  • SaveToJSON e LoadFromJSON per un campo di database o una richiesta web
  • Una vista trasmette il suo diagramma nel file del form come DiagramJSON
  • I percorsi dei connettori memorizzati nel file vengono mantenuti al caricamento
Leggi l'argomento della guida
Esporta PNG e SVG, anche su un server

Annulla, file ed esportazione

Esporta PNG e SVG, anche su un server

I diagrammi finiscono in report, e-mail, pagine wiki e slide. La vista salva ciò che mostra come PNG o SVG, con un fattore di scala per immagini nitide e con il disegno personalizzato e il tema applicati, così un diagramma scuro si esporta scuro. TsgcDiagramRenderer fa lo stesso senza alcuna vista: un programma console, un servizio Windows o un daemon Linux64 costruisce un diagramma, lo dispone e scrive i file. La demo Headless fa esattamente questo con il flowchart di un ticket di assistenza, e compilata con Delphi 13 scrive gli stessi byte su Win32, Win64 e Linux64.

  • SaveToPNG e SaveToSVG sulla vista, con una scala in pixel per unità del mondo
  • SaveToPNGFile e SaveToSVGFile su TsgcDiagramRenderer, senza bisogno di finestre
  • RenderTo disegna parte di un documento su qualsiasi canvas sgcUICore
  • L'esportazione in PDF e la stampa non fanno parte della versione 1
Leggi l'argomento della guida

Visualizzazione e stile

Mostra i diagrammi a chi non deve modificarli, con l'aspetto della tua applicazione.

Un visualizzatore in sola lettura per dashboard e portali

Visualizzazione e stile

Un visualizzatore in sola lettura per dashboard e portali

Non tutti gli utenti devono modificare la mappa dei processi. Imposta ReadOnly e la stessa vista diventa un visualizzatore: gli utenti selezionano, zoomano con Ctrl e la rotellina e scorrono con il tasto centrale o Spazio, ma nulla si sposta, si collega o si cancella, e la palette non può inserire forme. Il puntatore diventa una mano sopra un elemento e OnItemClick segnala quale, così un clic su un nodo può aprire il record corrispondente. ZoomToFit inquadra l'intero diagramma da codice. Per proteggere solo una parte di un diagramma, blocca singoli elementi o interi livelli.

  • ReadOnly mantiene selezione, zoom e scorrimento, e blocca ogni modifica
  • OnItemClick, OnItemDblClick e OnHover segnalano l'elemento sotto il puntatore
  • ZoomToFit, ZoomToSelection e CenterOn muovono la vista da codice
  • Locked protegge singoli elementi o un intero livello
Leggi l'argomento della guida

Visualizzazione e stile

Chiaro, scuro e disegno personalizzato

Un diagramma dovrebbe sembrare parte della tua applicazione, non un'immagine incollata. Le viste, le palette e l'esportazione usano i temi sgcUICore, quindi una sola proprietà Theme passa dal chiaro allo scuro e si abbina alle griglie, ai grafici e alle dashboard sgcUI sullo stesso form. Ogni nodo e connettore ha il proprio Style con riempimento, tratto, tratteggio, raggio degli angoli e impostazioni del testo, e NodeStyle e ConnectorStyle sono i modelli per i nuovi elementi. Per il controllo totale, OnDrawNode ti permette di disegnare un nodo da te, e FontFile disegna il testo con un font TrueType a tua scelta.

  • Theme accetta utDefault (segue il tema dell'applicazione), utLight, utDark o utCustom
  • Style imposta Fill, Stroke, StrokeWidth, Dash e CornerRadius
  • NodeStyle e ConnectorStyle danno lo stile a ogni nuovo elemento
  • sgcUIARGB costruisce colori come un verde acqua aziendale
Leggi l'argomento della guida

Accessibilità

UI Automation per screen reader, tastiera e alto contrasto, senza alcuna configurazione.

Accessibilità

Disegna diagrammi con la tastiera ed esponili a UI Automation

sgcDiagram espone i nodi con il loro testo, i collegamenti tra di essi e la palette delle forme a Microsoft UI Automation, e il diagramma si descrive con lo stesso testo alternativo che scrive in un PDF accessibile.

  • Le frecce spostano la selezione, Alt+Frecce la spostano di un pixel e Alt+Maiusc+Frecce ridimensionano il nodo selezionato
  • Ctrl+K avvia un collegamento dal nodo selezionato: Tab e Maiusc+Tab scelgono la destinazione, Invio collega e Esc annulla
  • Nella palette, le frecce, Home e End si spostano tra le forme, e Invio o Spazio aggiunge la forma con il focus
  • Ctrl+Tab e Ctrl+Maiusc+Tab spostano il focus sul controllo successivo o precedente, e con un tema Windows ad alto contrasto il diagramma si disegna con i colori di sistema

L'accessibilità è attiva per impostazione predefinita in tutte le edizioni, compresa l'edizione Community gratuita, su VCL in ogni versione di Delphi e C++Builder da Delphi 7 a Delphi 13, su FireMonkey su Windows e su WinForms, WPF e Avalonia. In Delphi e C++Builder, AccessibleName e AccessibleDescription impostano il nome e la descrizione esposti a UI Automation, e in .NET il nome accessibile e il testo della guida standard di ciascun framework fanno lo stesso. Vedi i report di conformità sull'accessibilità. I punti di piegatura dei connettori si modificano solo con il mouse.

Leggi l'argomento della guida

Guarda sgcDiagram all'opera

sgcDiagram nelle demo della suite sgcUI: applicazioni complete che funzionano offline con dati simulati integrati.

Chi sviluppa con sgcDiagram

Designer di workflow e approvazioni

Approvazioni di acquisto, escalation di ticket e checklist di onboarding cambiano spesso, e chi li gestisce non è un programmatore. Incorpora l'editor così il responsabile del processo disegna il flusso con decisioni ed etichette Sì o No, lo salva come JSON nel tuo database, e la tua applicazione legge lo stesso documento per guidare il processo reale. ReadOnly trasforma il flusso salvato in una mappa per tutti gli altri. Parti da FlowchartEditor.

  • Palette e modifica sul posto
  • Etichette dei connettori
  • File JSON
Esegui la demo FlowchartEditor

Organigrammi dai dati HR

I sistemi HR ed ERP sanno già chi risponde a chi. Collega la tabella dei dipendenti con TsgcDiagramDataBinding, lascia che il layout ad albero con foglie compatte disponga responsabili e collaboratori, e colora ogni casella per reparto in OnCreateNode. Quando HR registra una modifica nella griglia, il grafico si ricostruisce da solo, e un clic su un nodo seleziona il dipendente. La demo OrgChart collega così 60 dipendenti.

  • Collegamento ai dati
  • Layout ad albero
  • Modalità visualizzatore
Esegui la demo OrgChart

Editor di nodi per pipeline e automazione

I prodotti che permettono ai clienti di costruire pipeline di dati, regole di automazione o flussi IoT hanno bisogno di una tela dove i blocchi si collegano tra loro. Porte tipizzate, connettori curvi e OnConnecting ti danno le regole, OnDrawNode dà ai blocchi un aspetto tutto tuo, e il grafo si salva come JSON che il tuo motore può eseguire. Poiché il documento non dipende dall'interfaccia utente, un server può caricare e verificare lo stesso grafo.

  • Porte tipizzate
  • Regole di connessione
  • Disegno personalizzato
Esegui la demo NodeEditor

Un flusso d'ordine in poche righe

La stessa API in Delphi, C++ Builder e C#: aggiungi una palette e una vista, crea forme e connettori in un solo passo di annullamento, poi disponili. La chiamata di layout richiede l'edizione Registered o Trial.

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

Esegui le demo di sgcDiagram

Ogni demo è fornita per Delphi e per C++ Builder con lo stesso nome. L'edizione .NET include FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart e ConsoleRender.

FlowchartEditor

Solo Registered FlowchartEditor

Un flusso d'ordine costruito nel codice: trascina le forme, traccia connettori dalle porte, cambia il tipo di connettore, annulla, esegui il layout a livelli, apri e salva JSON, esporta PNG e SVG, cambia tema e modalità sola lettura.

OrgChart

Solo Registered OrgChart

60 dipendenti in un TDBGrid, collegati a una vista diagramma in sola lettura. Registra una modifica e il grafico si ricostruisce, con foglie compatte, colori per reparto, clic per selezionare ed esportazione PNG e SVG.

NodeEditor

NodeEditor

Porte di ingresso e uscita tipizzate, una regola di connessione in OnConnecting, connettori curvi e blocchi disegnati in OnDrawNode, salvati come JSON con porte e didascalie.

Solo Registered FlowchartEditorFMX

L'editor di flowchart sulla vista e sulla palette FireMonkey, per Windows e Android, dove un tocco inserisce una forma e un pizzico zooma.

Headless

Solo Registered Headless

Un programma console senza unit VCL o FireMonkey che costruisce un flowchart, lo dispone con il layout a livelli e scrive PNG, SVG e JSON, anche su Linux64.

Demo compilate

Eseguibili pronti all'uso di ogni prodotto sgcUI, senza nulla da installare.

Scarica sgcUI_bin.zip →

Dove è incluso sgcDiagram

sgcDiagram fa parte di sgcUI Enterprise ed è venduto anche separatamente. sgcDiagram è incluso anche nel bundle All-Access.

sgcDiagram come pacchetto singolo

€249 / sviluppatore, codice sorgente completo, 1 anno di aggiornamenti.

Acquista sgcDiagram → Vedi i prezzi →

sgcUI Enterprise

Tutti i 14 prodotti sgcUI, da €699.

Vedi Enterprise →

L'edizione Community gratuita (esegece.sgcDiagram.Community su NuGet) non include layout automatici, instradamento che evita gli ostacoli, collegamento ai dati e livelli multipli. Non esiste un ponte sgcWebSockets per sgcDiagram.

FunzionalitàCommunity (gratuita)Registered
Palette, vista e modifica sul posto✓✓
14 forme, porte, gruppi e contenitori✓✓
Connettori diritti, ortogonali e curvi✓✓
Annulla, appunti, aggancio e guide✓✓
File JSON, esportazione PNG e SVG✓✓
Temi chiaro e scuro, modalità visualizzatore✓✓
Layout a livelli e ad albero−✓
Instradamento ortogonale che evita gli ostacoli−✓
Collegamento ai dati−✓
Più di un livello−✓

Framework e piattaforme supportati

Componenti di sgcDiagram

Viste e palette

TsgcVCLDiagramView and TsgcVCLDiagramPalette per VCL, TsgcFMXDiagramView e TsgcFMXDiagramPalette per FireMonkey.

Modello e controller

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector e TsgcDiagramController, senza dipendenze dall'interfaccia utente.

Renderer e layout

TsgcDiagramRenderer scrive PNG e SVG senza una finestra. TsgcDiagramLayeredLayout e TsgcDiagramTreeLayout dispongono il diagramma. Registered

Viste .NET

TsgcWinFormsDiagramView, TsgcWpfDiagramView and TsgcAvaloniaDiagramView, ciascuna con la sua palette, nel namespace esegece.sgcDiagram.

DestinazioneComponentePiattaforme
Da Delphi 7 a 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 e Win64
Da Delphi XE6 a 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS e Android
C++ Builder da 2007 a 13Gli stessi componentiHeader .hpp generati e librerie statiche
Da Delphi 10.2 a 13, headlessDocumento, JSON, instradamento, layout, renderer PNG e SVGLinux64, ad esempio per generare diagrammi su un server
.NET Framework 4.7.2, .NET 8, 9 e 10Viste WinForms, WPF e AvaloniaWindows, Linux e macOS, JSON, PNG e SVG headless

Domande frequenti

Sì, è proprio a questo che servono la vista e la palette. Gli utenti trascinano le forme, tracciano connettori dalle porte, modificano il testo sul posto, raggruppano, copiano e incollano, e annullano o ripetono ogni azione. Imposta ReadOnly quando un utente deve solo guardare, oppure blocca singoli elementi e livelli per proteggere una parte del diagramma mentre il resto resta modificabile.

Sì, in due modi. Nel codice, AddNode e AddConnector dentro BeginTransaction e EndTransaction costruiscono qualsiasi diagramma come un unico passo di annullamento. Nell'edizione Registered, TsgcDiagramDataBinding lo costruisce da un dataset con una chiave e una colonna padre e lo ricostruisce quando i dati cambiano. In .NET legge un DataTable.

Due, nelle edizioni Registered e Trial. TsgcDiagramLayeredLayout dispone a livelli grafi orientati come flowchart, macchine a stati e grafi di dipendenze con pochi incroci. TsgcDiagramTreeLayout dispone gerarchie come organigrammi e alberi di categorie, con uno stile a foglie compatte. Entrambi funzionano in quattro direzioni e sono un unico passo di annullamento.

Non nella versione 1. I diagrammi si esportano in PNG e SVG, dalla vista o con TsgcDiagramRenderer senza una finestra. L'SVG scala senza perdite, quindi è adatto alla stampa e ai documenti, e un PNG salvato con scala 2 resta nitido sulle slide. Anche la stampa non fa parte della versione 1.

Quattro funzionalità avanzate: i layout automatici, l'instradamento ortogonale che evita gli ostacoli (Community disegna semplici gomiti), il collegamento ai dati e i livelli oltre il primo. Tutto il resto c'è: ogni forma, i tre tipi di connettore, porte, contenitori, annulla, appunti, JSON, PNG e SVG, temi, aggancio e guide. Registered e Trial hanno tutto.

Sì. Il formato JSON è lo stesso su ogni piattaforma e in ogni edizione, quindi un diagramma salvato da un'applicazione Delphi o C++ Builder si apre in un'applicazione WinForms, WPF o Avalonia e viceversa. Un file salvato dall'edizione Registered si apre anche in una build Community, che ne conserva i nomi dei livelli.

Sì. La vista e la palette FireMonkey funzionano su Windows, macOS, iOS e Android da Delphi XE6, e la demo FlowchartEditorFMX mostra la modifica touch su Android. In .NET la vista Avalonia funziona su Windows, Linux e macOS.

Guida di sgcDiagram

3,000+Sviluppatori
20+Anni
761+Componenti
30+Integrazioni API
5Piattaforme
Garanzia soddisfatti o rimborsati di 30 giorniNon sei soddisfatto? Richiedi un rimborso completo entro 30 giorni dall'acquisto. Vedi la politica di rimborso

Prova sgcDiagram oggi

Il trial di sgcUI include sgcDiagram e ogni altro prodotto sgcUI.