Delphi, C++ Builder y .NET Parte de sgcUI

sgcDiagram, el editor de diagramas y diagramas de flujo para Delphi, C++ Builder y .NET

Da a tus usuarios un editor de diagramas de verdad dentro de tu propia aplicación. Arrastran formas desde una paleta, las conectan, escriben el texto en el sitio y deshacen cualquier cosa. Tú dispones todo el diagrama con una sola llamada, lo guardas como JSON y lo exportas a PNG o SVG, incluso en un servidor sin ventana.

VCL, FireMonkey, WinForms, WPF, Avalonia14 formas y 3 tipos de conectorPNG y SVG sin ventana, Linux64 incluidoIncluido en sgcUI Enterprise
Descargar prueba Míralo en acción
Demo FlowchartEditor: la paleta de formas con símbolos de diagrama de flujo y formas básicas junto a un diagrama de flujo de pedidos
FUNCIONES CLAVE

Todo lo que necesita un editor de diagramas

Trece funciones que ponen un editor de diagramas de verdad en tu aplicación.

Un editor que tus usuarios pueden usar

Todo lo que un usuario espera de una herramienta de diagramas, en dos componentes que sueltas en un formulario.

Un editor que tus usuarios pueden usar

Deja que los usuarios dibujen sus propios diagramas

Las aplicaciones de negocio suelen necesitar un diagrama que pertenece al usuario: un flujo de aprobación, un mapa de procesos, el plano de una línea de producción. En lugar de enviar a los usuarios a una herramienta de dibujo aparte, pon el editor dentro de tu propio formulario. Suelta un TsgcVCLDiagramPalette y un TsgcVCLDiagramView, enlázalos con la propiedad View de la paleta, y tus usuarios arrastran formas al lienzo, dibujan conectores desde los puertos y escriben el texto de un nodo en el sitio. El mismo par existe para FireMonkey, WinForms, WPF y Avalonia.

  • TsgcVCLDiagramPalette suelta formas con un arrastre, o con un clic en el elemento y otro en la vista
  • Un doble clic, F2 o simplemente escribir edita el texto de un nodo en el sitio
  • Tool cambia entre dgtSelect, dgtPan, dgtConnector y dgtShape
  • Selecciona con Mayús, Ctrl o una banda elástica, y luego mueve, redimensiona, gira, agrupa, copia y pega
  • De derecha a izquierda para árabe y hebreo: la paleta, las reglas, el minimapa y las barras de herramientas están reflejados mientras que el lienzo conserva tu geometría, y la dirección dglRightToLeft de los diseños automáticos organiza un diagrama desde la derecha
Leer el tema de la ayuda
14 formas para diagramas de flujo, organigramas y bocetos

Un editor que tus usuarios pueden usar

14 formas para diagramas de flujo, organigramas y bocetos

La mayoría de los diagramas del software de negocio usan un vocabulario pequeño y conocido, y sgcDiagram lo trae listo. Tienes los símbolos de diagrama de flujo proceso, decisión, terminador, datos, documento, proceso predefinido y círculo conector, el rectángulo básico, el rectángulo redondeado y la elipse, texto libre, imágenes, contenedores que albergan otros nodos y contornos personalizados a partir de datos de ruta SVG. Cada forma conoce su contorno, su área de texto, sus puertos por defecto y los colores de su tema, de modo que una decisión recibe sus puertos en las esquinas sin escribir código. Coloca un nodo con Left, Top, Width y Height, y gíralo con Angle.

  • Shape toma un valor TsgcDiagramShape como dgsDecision
  • dgsPath dibuja cualquier contorno a partir de PathData con sintaxis de ruta SVG
  • dgsContainer contiene nodos hijos mediante ContainerId y los mueve con él
  • TextAlign y TextVAlign colocan el texto ajustado dentro de la forma
Leer el tema de la ayuda
Conectores rectos, ortogonales y curvos

Un editor que tus usuarios pueden usar

Conectores rectos, ortogonales y curvos

Un diagrama solo es tan legible como sus líneas. Cada conector elige su tipo: líneas rectas o poligonales con puntos intermedios, rutas ortogonales de segmentos horizontales y verticales, o curvas suaves para grafos de nodos. AddConnector crea un conector del DefaultConnectorKind del documento. Puntas de flecha en ambos extremos, trazos discontinuos o punteados y cualquier número de etiquetas, colocadas a lo largo de la línea y arrastrables por el usuario, convierten una línea simple en una rama clara de Sí o No. En la edición registrada el enrutador ortogonal esquiva los nodos y separa los segmentos paralelos.

  • Kind es dgcStraight, dgcOrthogonal o dgcCurved
  • StartArrow y EndArrow toman un TsgcDiagramArrow como dgaTriangle o dgaDiamond
  • Labels guarda cualquier número de etiquetas, colocadas con Position y Offset
  • Waypoints doblan los conectores rectos y curvos donde quieras

Community enruta los conectores ortogonales como codos simples que no esquivan los nodos.

Leer el tema de la ayuda

Un editor que tus usuarios pueden usar

Los puertos y el pegado mantienen unidos los enlaces

Nada frustra más a un usuario que un diagrama que se deshace al mover una caja. Cada extremo de conector está pegado: a un puerto con nombre, al contorno del nodo, o libre en un punto. Mueve, redimensiona o gira un nodo y sus conectores lo siguen y se vuelven a enrutar. Las formas traen puertos en los puntos medios de sus lados, y puedes añadir los tuyos con una posición, un lado, una dirección de flujo y un título, que es como se construyen las entradas y salidas tipadas de un editor de nodos. ShowPorts decide si los puertos aparecen siempre, al pasar el ratón o nunca.

  • TsgcDiagramPort tiene Id, X, Y, Side, Flow y Caption
  • Flow convierte un puerto en entrada con dgfIn o en salida con dgfOut
  • SourcePortId y TargetPortId pegan un extremo de conector a un puerto
  • ShowPorts es dgvHover por defecto, o dgvAlways y dgvNever
Leer el tema de la ayuda

Diagramas que se construyen solos

Deja que el código haga el trabajo de orden: dispón un grafo, construye un gráfico a partir de una tabla o conecta bloques con reglas.

Diagramas que se construyen solos Solo registrada

Dispón todo el diagrama con una sola llamada

Los diagramas construidos desde código, o dibujados deprisa por un usuario, rara vez quedan ordenados. TsgcDiagramLayeredLayout dispone un grafo dirigido en capas, el método Sugiyama, de modo que diagramas de flujo, mapas de procesos, máquinas de estados y grafos de dependencias salen de izquierda a derecha o de arriba abajo con pocos cruces de conectores y los conectores largos rectos. TsgcDiagramTreeLayout centra los padres sobre sus hijos para organigramas y árboles de categorías. Ambos se ejecutan como un solo paso de deshacer, así que un usuario puede probar una disposición y revertirla con Ctrl+Z. SelectionOnly dispone solo la parte seleccionada.

  • Direction es dglTopToBottom, dglLeftToRight, dglBottomToTop o dglRightToLeft
  • LayerSpacing y NodeSpacing definen los espacios, 60 y 30 unidades de mundo por defecto
  • Crossings informa de los cruces de conectores tras Execute
  • TreeStyle con dgoCompactLeaves apila el personal de un jefe en una columna

En Community los nodos se quedan donde los pone el usuario o el código.

Leer el tema de la ayuda
Organigramas directamente desde una tabla

Diagramas que se construyen solos Solo registrada

Organigramas directamente desde una tabla

Tus empleados, centros de coste o categorías de producto ya viven en una tabla con una columna de clave y otra de padre. TsgcDiagramDataBinding convierte esas filas en un diagrama: cada fila es un nodo, cada clave de padre un conector, y la disposición en árbol o por capas ordena el resultado. Define DataSource, KeyField, ParentField y LabelField, apunta Target a la vista y activa Active. Con LiveUpdates activado, una edición confirmada, una inserción o un borrado reconstruyen el gráfico en el siguiente turno del bucle de mensajes, mientras que moverse por las filas no altera la selección.

  • DataSource, KeyField, ParentField y LabelField asignan las columnas
  • OnCreateNode da estilo a cada nodo a partir de cualquier campo de su fila
  • dgbAuto elige la disposición en árbol para un árbol y la disposición por capas para varios padres
  • ParentSeparator lista varios padres en un solo campo

Community no tiene enlace con datos: construye los nodos en código con AddNode y AddConnector.

Leer el tema de la ayuda
Editores de nodos para flujos de trabajo y pipelines

Diagramas que se construyen solos

Editores de nodos para flujos de trabajo y pipelines

Las reglas de automatización, los pipelines de datos y los flujos IoT se entienden mejor como bloques conectados. Da a cada nodo puertos de entrada tipados a la izquierda y de salida a la derecha, cambia DefaultConnectorKind a conectores curvos y pinta los bloques tú mismo en OnDrawNode con una banda de título y puntos de color en los puertos. OnConnecting te permite rechazar un enlace antes de crearlo, de modo que una salida numérica nunca alimenta una entrada de texto. La demo NodeEditor construye exactamente esto, con bloques añadidos en un solo paso de deshacer y grafos guardados como JSON junto con sus puertos y títulos.

  • OnConnecting veta una conexión, por ejemplo entre puertos de tipos distintos
  • OnDrawNode pinta un nodo, o añade algo al dibujo por defecto
  • DefaultConnectorKind con dgcCurved da el aspecto clásico de grafo de nodos
  • El Caption de un puerto se dibuja junto a él dentro del nodo
Leer el tema de la ayuda

Deshacer, archivos y exportación

Edición segura para el usuario, y un formato de documento y una salida de imagen en los que tu aplicación puede confiar.

Deshaz todo, ajusta a guías

Deshacer, archivos y exportación

Deshaz todo, ajusta a guías

Los usuarios experimentan cuando saben que pueden volver atrás. El documento mantiene una pila de deshacer y otra de rehacer, y cada acción del usuario en la vista es un paso. En código, BeginTransaction y EndTransaction agrupan cualquier número de cambios en un solo paso con nombre, y Rollback los descarta. Copiar y pegar funcionan dentro de la aplicación, y los pegados repetidos se desplazan para que no se apilen. Mientras un nodo se mueve o se redimensiona, sus bordes y líneas centrales se ajustan a la cuadrícula y a los nodos de alrededor, y una línea guía muestra la alineación.

  • BeginTransaction, EndTransaction y Rollback agrupan los cambios hechos en código
  • UndoLimit guarda 100 pasos por defecto, y UndoCaption nombra el siguiente deshacer
  • CopyToClipboard, CutToClipboard y PasteFromClipboard en la vista
  • SnapToGrid, SnapToGuides y GridSize controlan las ayudas de alineación
Leer el tema de la ayuda
Guarda como JSON, ábrelo en cualquier sitio

Deshacer, archivos y exportación

Guarda como JSON, ábrelo en cualquier sitio

Un diagrama es un dato que tu aplicación guarda, envía y versiona. El documento se guarda en JSON como cadena, archivo o flujo, y el formato es idéntico en todas las plataformas y en todas las ediciones: un archivo guardado por una aplicación de escritorio Delphi se abre en una herramienta C++ Builder, un servicio .NET o una compilación Community. La salida es canónica, con un orden de claves fijo y sin los valores por defecto, así que el mismo diagrama da siempre el mismo texto y se compara limpiamente en el control de código fuente. Las imágenes viajan dentro del archivo como datos PNG.

  • SaveToFile y LoadFromFile, SaveToStream y LoadFromStream
  • SaveToJSON y LoadFromJSON para un campo de base de datos o una petición web
  • Una vista guarda su diagrama en el archivo de formulario como DiagramJSON
  • Las rutas de conector guardadas en el archivo se conservan al cargarlo
Leer el tema de la ayuda
Exporta PNG y SVG, incluso en un servidor

Deshacer, archivos y exportación

Exporta PNG y SVG, incluso en un servidor

Los diagramas acaban en informes, correos, páginas wiki y presentaciones. La vista guarda lo que muestra como PNG o SVG, con un factor de escala para imágenes nítidas y con su dibujo personalizado y su tema aplicados, así que un diagrama oscuro se exporta oscuro. TsgcDiagramRenderer hace lo mismo sin ninguna vista: un programa de consola, un servicio de Windows o un demonio Linux64 construye un diagrama, lo dispone y escribe los archivos. La demo Headless hace exactamente eso con un diagrama de flujo de un ticket de soporte, y compilada con Delphi 13 escribe los mismos bytes en Win32, Win64 y Linux64.

  • SaveToPNG y SaveToSVG en la vista, con una escala de píxeles por unidad de mundo
  • SaveToPNGFile y SaveToSVGFile en TsgcDiagramRenderer, sin necesidad de ventana
  • RenderTo pinta parte de un documento en cualquier lienzo de sgcUICore
  • La exportación a PDF y la impresión no forman parte de la versión 1
Leer el tema de la ayuda

Visualización y estilo

Muestra diagramas a quienes no deben editarlos, con el aspecto de tu aplicación.

Un visor de solo lectura para dashboards y portales

Visualización y estilo

Un visor de solo lectura para dashboards y portales

No todos los usuarios deben editar el mapa de procesos. Define ReadOnly y la misma vista se convierte en visor: los usuarios seleccionan, hacen zoom con Ctrl y la rueda y se desplazan con el botón central o Espacio, pero nada se mueve, se conecta ni se borra, y la paleta no puede soltar formas. El puntero se convierte en una mano sobre un elemento y OnItemClick informa de cuál es, así que un clic en un nodo puede abrir el registro correspondiente. ZoomToFit encuadra todo el diagrama desde código. Para proteger solo una parte de un diagrama, bloquea elementos sueltos o capas enteras.

  • ReadOnly mantiene la selección, el zoom y el desplazamiento, y bloquea toda edición
  • OnItemClick, OnItemDblClick y OnHover informan del elemento bajo el puntero
  • ZoomToFit, ZoomToSelection y CenterOn mueven la vista desde código
  • Locked protege elementos sueltos o una capa entera
Leer el tema de la ayuda

Visualización y estilo

Claro, oscuro y tu propio dibujo

Un diagrama debe parecer parte de tu aplicación, no una imagen pegada. Las vistas, las paletas y la exportación usan los temas de sgcUICore, así que una propiedad Theme cambia entre claro y oscuro y combina con las cuadrículas, gráficos y dashboards de sgcUI del mismo formulario. Cada nodo y conector tiene su propio Style con relleno, trazo, guiones, radio de esquina y ajustes de texto, y NodeStyle y ConnectorStyle son las plantillas para los elementos nuevos. Para un control total, OnDrawNode te permite pintar un nodo tú mismo, y FontFile dibuja el texto con la fuente TrueType que elijas.

  • Theme toma utDefault (sigue el tema de la aplicación), utLight, utDark o utCustom
  • Style define Fill, Stroke, StrokeWidth, Dash y CornerRadius
  • NodeStyle y ConnectorStyle dan estilo a cada elemento nuevo
  • sgcUIARGB construye colores como un verde azulado corporativo
Leer el tema de la ayuda

Accesibilidad

UI Automation para lectores de pantalla, teclado y alto contraste, sin configuración.

Accesibilidad

Dibuja diagramas con el teclado y exponlos a UI Automation

sgcDiagram expone los nodos con su texto, los enlaces entre ellos y la paleta de formas a Microsoft UI Automation, y el diagrama se describe a sí mismo con la misma alternativa de texto que escribe en un PDF accesible.

  • Las flechas mueven la selección, Alt+flechas la desplazan un píxel y Alt+Mayús+flechas redimensionan el nodo seleccionado
  • Ctrl+K inicia un enlace desde el nodo seleccionado: Tab y Mayús+Tab eligen el destino, Intro conecta y Esc cancela
  • En la paleta, las flechas, Inicio y Fin se mueven entre formas, e Intro o Espacio añade la forma con el foco
  • Ctrl+Tab y Ctrl+Mayús+Tab pasan el foco al control siguiente o anterior, y con un tema de alto contraste de Windows el diagrama se pinta con los colores del sistema

La accesibilidad está activada por defecto en todas las ediciones, también en la edición Community gratuita, en VCL en todas las versiones de Delphi y C++Builder desde Delphi 7 hasta Delphi 13, en FireMonkey en Windows, y en WinForms, WPF y Avalonia. En Delphi y C++Builder, AccessibleName y AccessibleDescription establecen el nombre y la descripción expuestos a UI Automation, y en .NET lo hacen el nombre accesible y el texto de ayuda estándar de cada framework. Consulta los informes de conformidad de accesibilidad (en inglés). Los puntos de inflexión de los conectores solo se editan con el ratón.

Leer el tema de la ayuda
EN ACCIÓN

Mira sgcDiagram en acción

sgcDiagram dentro de las demos de la suite sgcUI: aplicaciones completas que funcionan sin conexión con datos simulados integrados.

El diagrama del proceso de la Línea 1, de los tanques al llenador, con la bomba averiada P-201 en rojo.

El diagrama del proceso de la Línea 1, de los tanques al llenador, con la bomba averiada P-201 en rojo.

Altamira Plant →
Un diagrama de la red de centros: ancho de línea según el volumen, color según el estado.

Un diagrama de la red de centros: ancho de línea según el volumen, color según el estado.

Altamira Fleet →
Dependencias de hitos entre proyectos, con diseño automático y los enlaces críticos resaltados.

Dependencias de hitos entre proyectos, con diseño automático y los enlaces críticos resaltados.

Altamira PMO →
Un flujo de aprobación de compras junto a la cuadrícula de solicitudes y su estado de aprobación.

Un flujo de aprobación de compras junto a la cuadrícula de solicitudes y su estado de aprobación.

Altamira ERP →
Ver todas las demos de la suite
CASOS DE USO

Quién construye con sgcDiagram

Diseñadores de flujos de trabajo y aprobaciones

Las aprobaciones de compra, las escalaciones de tickets y las listas de incorporación cambian a menudo, y quienes las gestionan no son programadores. Incrusta el editor para que el responsable del proceso dibuje el flujo con decisiones y etiquetas de Sí o No, lo guarde como JSON en tu base de datos, y tu aplicación lea el mismo documento para dirigir el proceso real. ReadOnly convierte el flujo guardado en un mapa para todos los demás. Empieza desde FlowchartEditor.

  • Paleta y edición en el sitio
  • Etiquetas de conector
  • Archivos JSON
Ejecuta la demo FlowchartEditor

Organigramas a partir de datos de RR. HH.

Los sistemas de RR. HH. y ERP ya saben quién depende de quién. Enlaza la tabla de empleados con TsgcDiagramDataBinding, deja que la disposición en árbol con hojas compactas ordene jefes y personal, y colorea cada caja por departamento en OnCreateNode. Cuando RR. HH. confirma un cambio en la cuadrícula, el gráfico se reconstruye solo, y un clic en un nodo selecciona al empleado. La demo OrgChart enlaza así 60 empleados.

  • Enlace con datos
  • Disposición en árbol
  • Modo visor
Ejecuta la demo OrgChart

Editores de nodos para pipelines y automatización

Los productos que permiten a sus clientes construir pipelines de datos, reglas de automatización o flujos IoT necesitan un lienzo donde se conecten bloques. Los puertos tipados, los conectores curvos y OnConnecting te dan las reglas, OnDrawNode da a los bloques tu propio aspecto, y el grafo se guarda como JSON que tu motor puede ejecutar. Como el documento no depende de ninguna interfaz de usuario, un servidor puede cargar y comprobar el mismo grafo.

  • Puertos tipados
  • Reglas de conexión
  • Dibujo personalizado
Ejecuta la demo NodeEditor
INICIO RÁPIDO

Un flujo de pedidos en pocas líneas

La misma API en Delphi, C++ Builder y C#: añade una paleta y una vista, crea formas y conectores en un solo paso de deshacer y luego dispónlos. La llamada de disposición necesita la edición registrada o de prueba.

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
Descargar prueba
DEMOS

Ejecuta las demos de sgcDiagram

Cada demo se entrega para Delphi y para C++ Builder con el mismo nombre. La edición .NET incluye FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart y ConsoleRender.

FlowchartEditor

Solo registrada FlowchartEditor

Un flujo de pedidos construido en código: arrastra formas, dibuja conectores desde los puertos, cambia el tipo de conector, deshaz, ejecuta la disposición por capas, abre y guarda JSON, exporta PNG y SVG, cambia de tema y al modo de solo lectura.

OrgChart

Solo registrada OrgChart

60 empleados en un TDBGrid, enlazados a una vista de diagrama de solo lectura. Confirma una edición y el gráfico se reconstruye, con hojas compactas, colores por departamento, clic para seleccionar y exportación PNG y SVG.

NodeEditor

NodeEditor

Puertos de entrada y salida tipados, una regla de conexión en OnConnecting, conectores curvos y bloques pintados en OnDrawNode, guardados como JSON con sus puertos y títulos.

Solo registrada FlowchartEditorFMX

El editor de diagramas de flujo en la vista y la paleta de FireMonkey, para Windows y Android, donde un toque coloca una forma y un pellizco hace zoom.

Headless

Solo registrada Headless

Un programa de consola sin ninguna unidad VCL ni FireMonkey que construye un diagrama de flujo, lo dispone con la disposición por capas y escribe PNG, SVG y JSON, también en Linux64.

Demos compiladas

Ejecutables listos para usar de cada producto sgcUI, sin nada que instalar.

Descargar sgcUI_bin.zip →
EDICIONES

Dónde se incluye sgcDiagram

sgcDiagram forma parte de sgcUI Enterprise y también se vende por separado. sgcDiagram también está incluido en el paquete All-Access.

Paquete individual de sgcDiagram

€249 / desarrollador, código fuente completo, 1 año de actualizaciones.

Comprar sgcDiagram → Ver precios →

sgcUI Enterprise

Los 14 productos sgcUI, desde €699.

Ver Enterprise →

La edición Community gratuita (esegece.sgcDiagram.Community en NuGet) deja fuera las disposiciones automáticas, el enrutado que esquiva obstáculos, el enlace con datos y las capas múltiples. No hay puente con sgcWebSockets para sgcDiagram.

FunciónCommunity (gratuita)Registrada
Paleta, vista y edición en el sitio✓✓
14 formas, puertos, grupos y contenedores✓✓
Conectores rectos, ortogonales y curvos✓✓
Deshacer, portapapeles, ajuste y guías✓✓
Archivos JSON, exportación PNG y SVG✓✓
Temas claro y oscuro, modo visor✓✓
Disposiciones por capas y en árbol−✓
Enrutado ortogonal que esquiva obstáculos−✓
Enlace con datos−✓
Más de una capa−✓
PLATAFORMAS

Frameworks y plataformas compatibles

Componentes de sgcDiagram

Vistas y paletas

TsgcVCLDiagramView y TsgcVCLDiagramPalette para VCL, TsgcFMXDiagramView y TsgcFMXDiagramPalette para FireMonkey.

Modelo y controlador

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector y TsgcDiagramController, sin dependencia de interfaz de usuario.

Renderizador y disposiciones

TsgcDiagramRenderer escribe PNG y SVG sin ventana. TsgcDiagramLayeredLayout y TsgcDiagramTreeLayout disponen el diagrama. Registrada

Vistas .NET

TsgcWinFormsDiagramView, TsgcWpfDiagramView y TsgcAvaloniaDiagramView, cada una con su paleta, en el espacio de nombres esegece.sgcDiagram.

DestinoComponentePlataformas
Delphi 7 a 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 y Win64
Delphi XE6 a 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS y Android
C++ Builder 2007 a 13Los mismos componentesCabeceras .hpp generadas y bibliotecas estáticas
Delphi 10.2 a 13, sin ventanaDocumento, JSON, enrutado, disposiciones, renderizador PNG y SVGLinux64, por ejemplo para renderizar diagramas en un servidor
.NET Framework 4.7.2, .NET 8, 9 y 10Vistas WinForms, WPF y AvaloniaWindows, Linux y macOS, JSON, PNG y SVG sin ventana
PREGUNTAS FRECUENTES

Preguntas frecuentes

Sí, para eso están la vista y la paleta. Los usuarios arrastran formas, dibujan conectores desde los puertos, editan el texto en el sitio, agrupan, copian y pegan, y deshacen o rehacen cada acción. Define ReadOnly cuando un usuario solo deba mirar, o bloquea elementos sueltos y capas para proteger una parte del diagrama mientras el resto sigue siendo editable.

Sí, de dos maneras. En código, AddNode y AddConnector dentro de BeginTransaction y EndTransaction construyen cualquier diagrama como un solo paso de deshacer. En la edición registrada, TsgcDiagramDataBinding lo construye a partir de un dataset con una columna de clave y otra de padre, y lo reconstruye cuando cambian los datos. En .NET lee un DataTable.

Dos, en las ediciones registrada y de prueba. TsgcDiagramLayeredLayout dispone en capas grafos dirigidos como diagramas de flujo, máquinas de estados y grafos de dependencias, con pocos cruces. TsgcDiagramTreeLayout dispone jerarquías como organigramas y árboles de categorías, con un estilo de hojas compactas. Ambas funcionan en cuatro direcciones y se ejecutan como un solo paso de deshacer.

No en la versión 1. Los diagramas se exportan a PNG y SVG, desde la vista o con TsgcDiagramRenderer sin ventana. El SVG escala sin pérdida, así que sirve para impresión y documentos, y un PNG guardado con escala 2 se mantiene nítido en las presentaciones. La impresión tampoco forma parte de la versión 1.

Cuatro funciones avanzadas: las disposiciones automáticas, el enrutado ortogonal que esquiva obstáculos (Community dibuja codos simples), el enlace con datos y las capas más allá de la primera. Todo lo demás está: todas las formas, los tres tipos de conector, puertos, contenedores, deshacer, el portapapeles, JSON, PNG y SVG, temas, ajuste y guías. Las ediciones registrada y de prueba lo tienen todo.

Sí. El formato JSON es el mismo en todas las plataformas y en todas las ediciones, así que un diagrama guardado por una aplicación Delphi o C++ Builder se abre en una aplicación WinForms, WPF o Avalonia y viceversa. Un archivo guardado por la edición registrada también se abre en una compilación Community, que conserva los nombres de sus capas.

Sí. La vista y la paleta de FireMonkey funcionan en Windows, macOS, iOS y Android desde Delphi XE6, y la demo FlowchartEditorFMX muestra la edición táctil en Android. En .NET la vista Avalonia funciona en Windows, Linux y macOS.

DOCUMENTACIÓN

Ayuda de sgcDiagram

Delphi

Introducción, Inicio rápido VCL, Inicio rápido FMX, Sin ventana, Disposición por capas, Exportación, Plataformas, Ediciones.

C++ Builder

Introducción, Inicio rápido C++ Builder, Disposición por capas.

.NET

Resumen de .NET, Inicio rápido WinForms, WPF, Avalonia.

Manuales en PDF

Delphi, C++ Builder y .NET, que cubren todos los productos sgcUI.

3,000+Desarrolladores
20+Años
761+Componentes
30+Integraciones de API
5Plataformas
Garantía de devolución de 30 días¿No estás satisfecho? Solicita un reembolso completo en los 30 días posteriores a la compra. Ver política de reembolso

Prueba sgcDiagram hoy

La prueba de sgcUI incluye sgcDiagram y todos los demás productos sgcUI.

Descargar prueba Comprar sgcDiagram