Delphi, C++ Builder & .NET Fait partie de sgcUI

sgcDiagram, l'éditeur de diagrammes et d'organigrammes pour Delphi, C++ Builder & .NET

Offre à tes utilisateurs un vrai éditeur de diagrammes dans ta propre application. Ils glissent des formes depuis une palette, les relient, saisissent le texte directement dans la forme et annulent n'importe quelle action. Tu organises tout le diagramme d'un seul appel, tu l'enregistres en JSON et tu l'exportes en PNG ou SVG, même sur un serveur sans fenêtre.

VCL, FireMonkey, WinForms, WPF, Avalonia14 formes et 3 types de connecteursPNG et SVG sans interface, Linux64 comprisInclus dans sgcUI Enterprise
Démo FlowchartEditor : la palette de formes avec les formes de logigramme et les formes de base à côté d'un logigramme de commande

Tout ce dont un éditeur de diagrammes a besoin

Treize fonctionnalités qui placent un vrai éditeur de diagrammes dans ton application.

Un éditeur que tes utilisateurs savent utiliser

Tout ce qu'un utilisateur attend d'un outil de diagrammes, avec deux composants que tu déposes sur une fiche.

Un éditeur que tes utilisateurs savent utiliser

Laisse les utilisateurs dessiner leurs propres diagrammes

Les applications métier ont souvent besoin d'un diagramme que l'utilisateur possède : un circuit d'approbation, une cartographie de processus, le plan d'une ligne de production. Au lieu d'envoyer les utilisateurs vers un outil de dessin séparé, place l'éditeur dans ta propre fiche. Dépose un TsgcVCLDiagramPalette et un TsgcVCLDiagramView, relie-les avec la propriété View de la palette, et tes utilisateurs glissent des formes sur le canevas, tracent des connecteurs depuis les ports et saisissent le texte d'un nœud directement dessus. La même paire existe pour FireMonkey, WinForms, WPF et Avalonia.

  • TsgcVCLDiagramPalette dépose des formes par glisser, ou par un clic sur l'élément puis un clic sur la vue
  • Un double clic, F2 ou simplement la frappe modifie le texte d'un nœud en place
  • Tool bascule entre dgtSelect, dgtPan, dgtConnector et dgtShape
  • Sélectionne avec Maj, Ctrl ou un rectangle de sélection, puis déplace, redimensionne, pivote, groupe, copie et colle
  • De droite à gauche pour l'arabe et l'hébreu : la palette, les règles, la mini-carte et les barres d'outils sont en miroir tandis que le canevas garde ta géométrie, et la direction dglRightToLeft des dispositions automatiques organise un diagramme depuis la droite
Lire la rubrique d'aide
14 formes pour les logigrammes, les organigrammes et les croquis

Un éditeur que tes utilisateurs savent utiliser

14 formes pour les logigrammes, les organigrammes et les croquis

La plupart des diagrammes des logiciels métier utilisent un petit vocabulaire familier, et sgcDiagram le fournit prêt à l'emploi. Tu obtiens les symboles de logigramme processus, décision, terminateur, données, document, processus prédéfini et cercle de connexion, le rectangle de base, le rectangle arrondi et l'ellipse, le texte libre, les images, les conteneurs qui contiennent d'autres nœuds, et des contours personnalisés à partir de données de chemin SVG. Chaque forme connaît son contour, sa zone de texte, ses ports par défaut et ses couleurs de thème, donc une décision reçoit ses ports aux angles sans une ligne de code. Place un nœud avec Left, Top, Width et Height, et fais-le pivoter avec Angle.

  • Shape prend une valeur TsgcDiagramShape comme dgsDecision
  • dgsPath dessine n'importe quel contour à partir de PathData en syntaxe de chemin SVG
  • dgsContainer contient des nœuds enfants via ContainerId et les déplace avec lui
  • TextAlign et TextVAlign placent le texte à la ligne dans la forme
Lire la rubrique d'aide
Connecteurs droits, orthogonaux et courbes

Un éditeur que tes utilisateurs savent utiliser

Connecteurs droits, orthogonaux et courbes

Un diagramme n'est lisible que si ses lignes le sont. Chaque connecteur choisit son type : lignes droites ou polylignes passant par des points de passage, tracés orthogonaux de segments horizontaux et verticaux, ou courbes lisses pour les graphes de nœuds. AddConnector crée un connecteur du DefaultConnectorKind du document. Des pointes de flèche aux deux extrémités, des traits en tirets ou en pointillés et un nombre quelconque d'étiquettes, placées le long de la ligne et déplaçables par l'utilisateur, transforment une simple ligne en branche Oui ou Non bien claire. Dans l'édition Enregistrée, le routeur orthogonal contourne les nœuds et écarte les segments parallèles.

  • Kind vaut dgcStraight, dgcOrthogonal ou dgcCurved
  • StartArrow et EndArrow prennent un TsgcDiagramArrow comme dgaTriangle ou dgaDiamond
  • Labels contient un nombre quelconque d'étiquettes, placées avec Position et Offset
  • Waypoints plient les connecteurs droits et courbes où tu veux

Community trace les connecteurs orthogonaux en simples coudes qui ne contournent pas les nœuds.

Lire la rubrique d'aide

Un éditeur que tes utilisateurs savent utiliser

Ports et collage gardent les liens attachés

Rien ne frustre plus un utilisateur qu'un diagramme qui se disloque quand un rectangle bouge. Chaque extrémité de connecteur est collée : à un port nommé, au contour du nœud, ou laissée libre en un point. Déplace, redimensionne ou fais pivoter un nœud et ses connecteurs suivent et sont retracés. Les formes ont des ports au milieu de leurs côtés, et tu peux ajouter les tiens avec une position, un côté, un sens de flux et une légende, ce qui permet de construire les entrées et sorties typées d'un éditeur de nœuds. ShowPorts décide si les ports apparaissent toujours, au survol ou jamais.

  • TsgcDiagramPort a Id, X, Y, Side, Flow et Caption
  • Flow fait d'un port une entrée avec dgfIn ou une sortie avec dgfOut
  • SourcePortId et TargetPortId collent une extrémité de connecteur à un port
  • ShowPorts vaut dgvHover par défaut, ou dgvAlways et dgvNever
Lire la rubrique d'aide

Des diagrammes qui se construisent tout seuls

Laisse le code faire le rangement : organiser un graphe, construire un graphique à partir d'une table, ou câbler des blocs avec des règles.

Des diagrammes qui se construisent tout seuls Enregistrée uniquement

Organise tout le diagramme d'un seul appel

Les diagrammes construits par le code, ou dessinés vite par un utilisateur, sont rarement bien rangés. TsgcDiagramLayeredLayout organise un graphe orienté en niveaux, selon la méthode de Sugiyama, de sorte que les logigrammes, les cartographies de processus, les automates d'états et les graphes de dépendances sortent de gauche à droite ou de haut en bas avec peu de croisements de connecteurs et les longs connecteurs gardés droits. TsgcDiagramTreeLayout centre les parents au-dessus de leurs enfants pour les organigrammes et les arbres de catégories. Les deux s'exécutent en une seule étape d'annulation, donc un utilisateur peut essayer une mise en page et la défaire avec Ctrl+Z. SelectionOnly n'organise que la partie sélectionnée.

  • Direction vaut dglTopToBottom, dglLeftToRight, dglBottomToTop ou dglRightToLeft
  • LayerSpacing et NodeSpacing définissent les écarts, 60 et 30 unités du monde par défaut
  • Crossings indique les croisements de connecteurs après Execute
  • TreeStyle défini sur dgoCompactLeaves empile l'équipe d'un responsable dans une seule colonne

Dans Community, les nœuds restent là où l'utilisateur ou le code les place.

Lire la rubrique d'aide
Des organigrammes directement depuis une table

Des diagrammes qui se construisent tout seuls Enregistrée uniquement

Des organigrammes directement depuis une table

Tes employés, centres de coûts ou catégories de produits vivent déjà dans une table avec une clé et une colonne parent. TsgcDiagramDataBinding transforme ces lignes en diagramme : chaque ligne devient un nœud, chaque clé parent un connecteur, et la mise en page en arbre ou par niveaux organise le résultat. Définis DataSource, KeyField, ParentField et LabelField, pointe Target vers la vue et définis Active. Avec LiveUpdates activé, une modification validée, une insertion ou une suppression reconstruit le graphique au prochain tour de la boucle de messages, tandis que le déplacement dans les lignes laisse la sélection tranquille.

  • DataSource, KeyField, ParentField et LabelField associent les colonnes
  • OnCreateNode met en forme chaque nœud à partir de n'importe quel champ de sa ligne
  • dgbAuto choisit la mise en page en arbre pour un arbre et celle par niveaux pour plusieurs parents
  • ParentSeparator liste plusieurs parents dans un seul champ

Community n'a pas de liaison de données : construis les nœuds en code avec AddNode et AddConnector.

Lire la rubrique d'aide
Des éditeurs de nœuds pour les workflows et les pipelines

Des diagrammes qui se construisent tout seuls

Des éditeurs de nœuds pour les workflows et les pipelines

Les règles d'automatisation, les pipelines de données et les flux IoT se comprennent mieux sous forme de blocs reliés entre eux. Donne à chaque nœud des ports d'entrée typés à gauche et des ports de sortie à droite, passe DefaultConnectorKind en connecteurs courbes, et dessine les blocs toi-même dans OnDrawNode avec un bandeau de titre et des points de port colorés. OnConnecting te permet de refuser un lien avant sa création, pour qu'une sortie numérique n'alimente jamais une entrée texte. La démo NodeEditor construit exactement cela, avec des blocs ajoutés en une seule étape d'annulation et des graphes enregistrés en JSON avec leurs ports et leurs légendes.

  • OnConnecting oppose un veto à une connexion, par exemple entre des ports de types différents
  • OnDrawNode dessine un nœud, ou complète le dessin par défaut
  • DefaultConnectorKind défini sur dgcCurved donne l'aspect classique d'un graphe de nœuds
  • Le Caption d'un port est dessiné à côté de lui, dans le nœud
Lire la rubrique d'aide

Annulation, fichiers et export

Une édition sûre pour l'utilisateur, un format de document et une sortie image sur lesquels ton application peut compter.

Tout annuler, aimanter aux repères

Annulation, fichiers et export

Tout annuler, aimanter aux repères

Les utilisateurs expérimentent quand ils savent qu'ils peuvent revenir en arrière. Le document garde une pile d'annulation et une pile de rétablissement, et chaque action de l'utilisateur dans la vue est une étape. En code, BeginTransaction et EndTransaction regroupent un nombre quelconque de modifications en une seule étape nommée, et Rollback les abandonne. Copier et coller fonctionnent dans l'application, et les collages répétés sont décalés pour ne pas s'empiler. Pendant qu'un nœud se déplace ou se redimensionne, ses bords et ses lignes centrales s'aimantent à la grille et aux nœuds voisins, et une ligne de repère montre l'alignement.

  • BeginTransaction, EndTransaction et Rollback regroupent les modifications faites en code
  • UndoLimit garde 100 étapes par défaut, et UndoCaption nomme la prochaine annulation
  • CopyToClipboard, CutToClipboard et PasteFromClipboard sur la vue
  • SnapToGrid, SnapToGuides et GridSize contrôlent les aides à l'alignement
Lire la rubrique d'aide
Enregistre en JSON, ouvre n'importe où

Annulation, fichiers et export

Enregistre en JSON, ouvre n'importe où

Un diagramme est une donnée que ton application stocke, envoie et versionne. Le document s'enregistre en JSON sous forme de chaîne, de fichier ou de flux, et le format est identique sur toutes les plateformes et dans toutes les éditions : un fichier enregistré par une application de bureau Delphi s'ouvre dans un outil C++ Builder, un service .NET ou un build Community. La sortie est canonique, avec un ordre de clés fixe et les valeurs par défaut omises, donc le même diagramme donne toujours le même texte et se compare proprement dans le contrôle de source. Les images voyagent dans le fichier sous forme de données PNG.

  • SaveToFile et LoadFromFile, SaveToStream et LoadFromStream
  • SaveToJSON et LoadFromJSON pour un champ de base de données ou une requête web
  • Une vue sérialise son diagramme dans le fichier de fiche sous DiagramJSON
  • Les tracés de connecteurs stockés dans le fichier sont conservés au chargement
Lire la rubrique d'aide
Exporte en PNG et SVG, même sur un serveur

Annulation, fichiers et export

Exporte en PNG et SVG, même sur un serveur

Les diagrammes finissent dans des rapports, des e-mails, des pages wiki et des présentations. La vue enregistre ce qu'elle affiche en PNG ou SVG, avec un facteur d'échelle pour des images nettes et avec son dessin personnalisé et son thème appliqués, donc un diagramme sombre s'exporte en sombre. TsgcDiagramRenderer fait de même sans aucune vue : un programme console, un service Windows ou un démon Linux64 construit un diagramme, l'organise et écrit les fichiers. La démo Headless fait exactement cela avec un logigramme de ticket de support, et compilée avec Delphi 13 elle écrit les mêmes octets sous Win32, Win64 et Linux64.

  • SaveToPNG et SaveToSVG sur la vue, avec une échelle en pixels par unité du monde
  • SaveToPNGFile et SaveToSVGFile sur TsgcDiagramRenderer, sans fenêtre
  • RenderTo dessine une partie d'un document sur n'importe quel canevas sgcUICore
  • L'export PDF et l'impression ne font pas partie de la version 1
Lire la rubrique d'aide

Affichage et mise en forme

Montre des diagrammes à ceux qui ne doivent pas les modifier, dans l'apparence de ton application.

Une visionneuse en lecture seule pour les tableaux de bord et les portails

Affichage et mise en forme

Une visionneuse en lecture seule pour les tableaux de bord et les portails

Tous les utilisateurs ne doivent pas modifier la cartographie des processus. Définis ReadOnly et la même vue devient une visionneuse : les utilisateurs sélectionnent, zooment avec Ctrl et la molette et se déplacent avec le bouton du milieu ou Espace, mais rien ne bouge, ne se connecte ni ne se supprime, et la palette ne peut pas déposer de formes. Le pointeur devient une main au-dessus d'un élément et OnItemClick indique lequel, donc un clic sur un nœud peut ouvrir l'enregistrement correspondant. ZoomToFit cadre tout le diagramme depuis le code. Pour ne protéger qu'une partie d'un diagramme, verrouille plutôt des éléments isolés ou des calques entiers.

  • ReadOnly conserve la sélection, le zoom et le déplacement, et bloque toute modification
  • OnItemClick, OnItemDblClick et OnHover indiquent l'élément sous le pointeur
  • ZoomToFit, ZoomToSelection et CenterOn déplacent la vue depuis le code
  • Locked protège des éléments isolés ou un calque entier
Lire la rubrique d'aide

Affichage et mise en forme

Clair, sombre et ton propre dessin

Un diagramme doit ressembler à une partie de ton application, pas à une image collée. Les vues, les palettes et l'export utilisent les thèmes sgcUICore, donc une seule propriété Theme bascule entre clair et sombre et s'accorde aux grilles, graphiques et tableaux de bord sgcUI de la même fiche. Chaque nœud et chaque connecteur a son propre Style avec remplissage, trait, tirets, rayon d'angle et réglages de texte, et NodeStyle et ConnectorStyle sont les modèles des nouveaux éléments. Pour un contrôle total, OnDrawNode te permet de dessiner un nœud toi-même, et FontFile dessine le texte avec la police TrueType de ton choix.

  • Theme prend utDefault (suit le thème de l'application), utLight, utDark ou utCustom
  • Style définit Fill, Stroke, StrokeWidth, Dash et CornerRadius
  • NodeStyle et ConnectorStyle mettent en forme chaque nouvel élément
  • sgcUIARGB construit des couleurs comme un turquoise d'entreprise
Lire la rubrique d'aide

Accessibilité

UI Automation pour les lecteurs d'écran, le clavier et le contraste élevé, sans configuration.

Accessibilité

Dessiner des diagrammes au clavier et les exposer à UI Automation

sgcDiagram expose à Microsoft UI Automation les nœuds avec leur texte, les liens entre eux et la palette de formes, et le diagramme se décrit avec la même alternative textuelle que celle qu'il écrit dans un PDF accessible.

  • Les flèches déplacent la sélection, Alt+Flèches la décalent d'un pixel et Alt+Shift+Flèches redimensionnent le nœud sélectionné
  • Ctrl+K démarre un lien depuis le nœud sélectionné : Tab et Shift+Tab choisissent la cible, Entrée connecte et Échap annule
  • Dans la palette, les flèches, Début et Fin passent d'une forme à l'autre, et Entrée ou Espace ajoute la forme qui a le focus
  • Ctrl+Tab et Ctrl+Shift+Tab déplacent le focus vers le contrôle suivant ou précédent, et sous un thème à contraste élevé de Windows le diagramme se dessine avec les couleurs du système

L'accessibilité est activée par défaut dans toutes les éditions, l'édition Community gratuite comprise, sur VCL dans toutes les versions de Delphi et C++Builder de Delphi 7 à Delphi 13, sur FireMonkey sous Windows, et sur WinForms, WPF et Avalonia. Dans Delphi et C++Builder, AccessibleName et AccessibleDescription définissent le nom et la description exposés à UI Automation, et en .NET le nom accessible et le texte d'aide standard de chaque framework font de même. Voir les rapports de conformité d'accessibilité. Les points d'inflexion des connecteurs ne se modifient qu'à la souris.

Lire la rubrique d'aide

Découvre sgcDiagram en action

sgcDiagram dans les démos de la suite sgcUI : des applications complètes qui fonctionnent hors ligne avec des données simulées intégrées.

Qui construit avec sgcDiagram

Concepteurs de workflows et d'approbations

Les approbations d'achat, les escalades de tickets et les listes d'intégration changent souvent, et ceux qui en sont responsables ne sont pas programmeurs. Intègre l'éditeur pour qu'un responsable de processus dessine le flux avec des décisions et des étiquettes Oui ou Non, l'enregistre en JSON dans ta base de données, et ton application lit le même document pour piloter le vrai processus. ReadOnly transforme le flux stocké en carte pour tous les autres. Pars de FlowchartEditor.

  • Palette et édition en place
  • Étiquettes de connecteurs
  • Fichiers JSON
Lance la démo FlowchartEditor

Organigrammes à partir des données RH

Les systèmes RH et ERP savent déjà qui dépend de qui. Lie la table des employés avec TsgcDiagramDataBinding, laisse la mise en page en arbre avec feuilles compactes organiser les responsables et leurs équipes, et colorie chaque rectangle par service dans OnCreateNode. Quand les RH valident une modification dans la grille, le graphique se reconstruit tout seul, et un clic sur un nœud sélectionne l'employé. La démo OrgChart lie ainsi 60 employés.

  • Liaison de données
  • Mise en page en arbre
  • Mode visionneuse
Lance la démo OrgChart

Éditeurs de nœuds pour les pipelines et l'automatisation

Les produits qui permettent à leurs clients de construire des pipelines de données, des règles d'automatisation ou des flux IoT ont besoin d'un canevas où des blocs sont reliés entre eux. Les ports typés, les connecteurs courbes et OnConnecting te donnent les règles, OnDrawNode donne aux blocs ton propre aspect, et le graphe est enregistré en JSON que ton moteur peut exécuter. Comme le document n'a aucune dépendance envers l'interface utilisateur, un serveur peut charger et vérifier le même graphe.

  • Ports typés
  • Règles de connexion
  • Dessin personnalisé
Lance la démo NodeEditor

An Order Flow in a Few Lines

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

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

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

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

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

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

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

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

public class OrdersForm : Form
{
    readonly TsgcWinFormsDiagramView View;

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

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

Lance les démos de sgcDiagram

Chaque démo est livrée pour Delphi et pour C++ Builder sous le même nom. L'édition .NET propose FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart et ConsoleRender.

FlowchartEditor

Enregistrée uniquement FlowchartEditor

Un flux de commande construit en code : glisser des formes, tracer des connecteurs depuis les ports, changer le type de connecteur, annuler, lancer la mise en page par niveaux, ouvrir et enregistrer du JSON, exporter en PNG et SVG, changer de thème et passer en lecture seule.

OrgChart

Enregistrée uniquement OrgChart

60 employés dans un TDBGrid, liés à une vue de diagramme en lecture seule. Valide une modification et le graphique se reconstruit, avec feuilles compactes, couleurs par service, clic pour sélectionner et export PNG et SVG.

NodeEditor

NodeEditor

Ports d'entrée et de sortie typés, une règle de connexion dans OnConnecting, des connecteurs courbes et des blocs dessinés dans OnDrawNode, enregistrés en JSON avec leurs ports et leurs légendes.

Enregistrée uniquement FlowchartEditorFMX

L'éditeur de logigrammes sur la vue et la palette FireMonkey, pour Windows et Android, où un toucher place une forme et un pincement zoome.

Headless

Enregistrée uniquement Headless

Un programme console sans unité VCL ni FireMonkey qui construit un logigramme, l'organise avec la mise en page par niveaux et écrit du PNG, du SVG et du JSON, aussi sous Linux64.

Démos compilées

Des exécutables prêts à lancer pour chaque produit sgcUI, rien à installer.

Télécharger sgcUI_bin.zip →

Où sgcDiagram est inclus

sgcDiagram fait partie de sgcUI Enterprise, et il est aussi vendu séparément. sgcDiagram est aussi inclus dans le pack All-Access.

sgcDiagram, package seul

€249 / développeur, code source complet, 1 an de mises à jour.

Acheter sgcDiagram → Voir les tarifs →

sgcUI Enterprise

Les 14 produits sgcUI, à partir de €699.

Voir Enterprise →

L'édition Community gratuite (esegece.sgcDiagram.Community sur NuGet) laisse de côté les mises en page automatiques, le routage qui évite les obstacles, la liaison de données et les calques multiples. Il n'existe pas de passerelle sgcWebSockets pour sgcDiagram.

FonctionnalitéCommunity (gratuite)Enregistrée
Palette, view and in place editing✓✓
14 shapes, ports, groups and containers✓✓
Straight, orthogonal and curved connectors✓✓
Undo, clipboard, snapping and guides✓✓
JSON files, PNG and SVG export✓✓
Light and dark themes, viewer mode✓✓
Layered and tree layouts−✓
Obstacle avoiding orthogonal routing−✓
Data binding−✓
More than one layer−✓

Frameworks et plateformes pris en charge

Composants de sgcDiagram

Vues et palettes

TsgcVCLDiagramView et TsgcVCLDiagramPalette pour VCL, TsgcFMXDiagramView et TsgcFMXDiagramPalette pour FireMonkey.

Modèle et contrôleur

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector et TsgcDiagramController, sans dépendance envers l'interface utilisateur.

Moteur de rendu et mises en page

TsgcDiagramRenderer écrit du PNG et du SVG sans fenêtre. TsgcDiagramLayeredLayout et TsgcDiagramTreeLayout organisent le diagramme. Enregistrée

Vues .NET

TsgcWinFormsDiagramView, TsgcWpfDiagramView et TsgcAvaloniaDiagramView, chacune avec sa palette, dans l'espace de noms esegece.sgcDiagram.

CibleComposantPlateformes
Delphi 7 à 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 et Win64
Delphi XE6 à 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS et Android
C++ Builder 2007 à 13Les mêmes composantsEn-têtes .hpp générés et bibliothèques statiques
Delphi 10.2 à 13, sans interfaceDocument, JSON, routage, mises en page, moteur de rendu PNG et SVGLinux64, par exemple pour générer des diagrammes sur un serveur
.NET Framework 4.7.2, .NET 8, 9 et 10Vues WinForms, WPF et AvaloniaWindows, Linux et macOS, JSON, PNG et SVG sans interface

Foire aux questions

Oui, c'est à cela que servent la vue et la palette. Les utilisateurs glissent des formes, tracent des connecteurs depuis les ports, modifient le texte en place, groupent, copient et collent, et annulent ou rétablissent chaque action. Définis ReadOnly quand un utilisateur doit seulement regarder, ou verrouille des éléments isolés et des calques pour protéger une partie d'un diagramme pendant que le reste reste modifiable.

Oui, de deux façons. En code, AddNode et AddConnector entre BeginTransaction et EndTransaction construisent n'importe quel diagramme en une seule étape d'annulation. Dans l'édition Enregistrée, TsgcDiagramDataBinding le construit à partir d'un jeu de données avec une clé et une colonne parent et le reconstruit quand les données changent. En .NET, il lit un DataTable.

Deux, dans les éditions Enregistrée et d'essai. TsgcDiagramLayeredLayout organise en niveaux des graphes orientés comme les logigrammes, les automates d'états et les graphes de dépendances, avec peu de croisements. TsgcDiagramTreeLayout organise des hiérarchies comme les organigrammes et les arbres de catégories, avec un style à feuilles compactes. Les deux fonctionnent dans quatre directions et s'exécutent en une seule étape d'annulation.

Pas dans la version 1. Les diagrammes s'exportent en PNG et SVG, depuis la vue ou avec TsgcDiagramRenderer sans fenêtre. Le SVG s'agrandit sans perte, donc il convient à l'impression et aux documents, et un PNG enregistré avec une échelle de 2 reste net dans des présentations. L'impression ne fait pas non plus partie de la version 1.

Quatre fonctionnalités avancées : les mises en page automatiques, le routage orthogonal qui évite les obstacles (Community trace de simples coudes), la liaison de données, et les calques au-delà du premier. Tout le reste est là : toutes les formes, les trois types de connecteurs, les ports, les conteneurs, l'annulation, le presse-papiers, JSON, PNG et SVG, les thèmes, l'aimantation et les repères. Les éditions Enregistrée et d'essai ont tout.

Oui. Le format JSON est le même sur toutes les plateformes et dans toutes les éditions, donc un diagramme enregistré par une application Delphi ou C++ Builder s'ouvre dans une application WinForms, WPF ou Avalonia et inversement. Un fichier enregistré par l'édition Enregistrée s'ouvre aussi dans un build Community, qui conserve les noms de ses calques.

Oui. La vue et la palette FireMonkey fonctionnent sous Windows, macOS, iOS et Android à partir de Delphi XE6, et la démo FlowchartEditorFMX montre l'édition tactile sous Android. En .NET, la vue Avalonia fonctionne sous Windows, Linux et macOS.

Aide de sgcDiagram

3,000+Développeurs
20+Ans
761+Composants
30+Intégrations d'API
5Plateformes
Garantie satisfait ou remboursé de 30 joursPas satisfait ? Demandez un remboursement intégral dans les 30 jours suivant l'achat. Voir la politique de remboursement

Essaie sgcDiagram dès aujourd'hui

L'essai sgcUI inclut sgcDiagram et tous les autres produits sgcUI.