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

sgcDiagram, o editor de fluxogramas e diagramas para Delphi, C++ Builder & .NET

Ofereça aos seus usuários um editor de diagramas de verdade dentro do seu próprio aplicativo. Eles arrastam formas de uma paleta, as conectam, digitam o texto no próprio local e desfazem qualquer coisa. Você organiza o diagrama inteiro com uma chamada, salva como JSON e exporta para PNG ou SVG, até em um servidor sem janela.

VCL, FireMonkey, WinForms, WPF, Avalonia14 formas e 3 tipos de conectorPNG e SVG headless, inclusive no Linux64Incluído no sgcUI Enterprise
Demo FlowchartEditor: a paleta de formas com símbolos de fluxograma e formas básicas ao lado de um fluxograma de pedidos

Tudo o que um editor de diagramas precisa

Treze recursos que colocam um editor de diagramas de verdade no seu aplicativo.

Um editor que os seus usuários sabem usar

Tudo o que um usuário espera de uma ferramenta de diagramas, em dois componentes que você coloca em um formulário.

Um editor que os seus usuários sabem usar

Deixe os usuários desenharem os próprios diagramas

Aplicativos empresariais costumam precisar de um diagrama que pertence ao usuário: um fluxo de aprovação, um mapa de processos, a planta de uma linha de produção. Em vez de enviar os usuários a uma ferramenta de desenho separada, coloque o editor dentro do seu próprio formulário. Coloque um TsgcVCLDiagramPalette e um TsgcVCLDiagramView, ligue-os pela propriedade View da paleta, e os seus usuários arrastam formas para a tela, desenham conectores a partir das portas e digitam o texto de um nó no próprio local. O mesmo par existe para FireMonkey, WinForms, WPF e Avalonia.

  • O TsgcVCLDiagramPalette solta formas com um arraste, ou com um clique no item e um clique na visão
  • Um clique duplo, F2 ou simplesmente digitar edita o texto de um nó no próprio local
  • Tool alterna entre dgtSelect, dgtPan, dgtConnector e dgtShape
  • Selecione com Shift, Ctrl ou um retângulo de seleção, depois mova, redimensione, gire, agrupe, copie e cole
  • Da direita para a esquerda para árabe e hebraico: a paleta, as réguas, o minimapa e as barras de ferramentas ficam espelhados enquanto a tela mantém a sua geometria, e a direção dglRightToLeft dos layouts automáticos organiza um diagrama a partir da direita
Ler o tópico da ajuda
14 formas para fluxogramas, organogramas e esboços

Um editor que os seus usuários sabem usar

14 formas para fluxogramas, organogramas e esboços

A maioria dos diagramas em software empresarial usa um vocabulário pequeno e familiar, e o sgcDiagram o traz pronto. Você recebe os símbolos de fluxograma processo, decisão, terminador, dados, documento, processo predefinido e círculo conector, o retângulo básico, o retângulo arredondado e a elipse, texto livre, imagens, contêineres que guardam outros nós e contornos personalizados a partir de dados de caminho SVG. Cada forma conhece o seu contorno, a sua área de texto, as suas portas padrão e as cores do tema, então uma decisão recebe as portas nos cantos sem nenhum código. Posicione um nó com Left, Top, Width e Height, e gire-o com Angle.

  • Shape recebe um valor TsgcDiagramShape como dgsDecision
  • dgsPath desenha qualquer contorno a partir de PathData na sintaxe de caminho SVG
  • dgsContainer guarda nós filhos por meio de ContainerId e os move junto
  • TextAlign e TextVAlign posicionam o texto com quebra de linha dentro da forma
Ler o tópico da ajuda
Conectores retos, ortogonais e curvos

Um editor que os seus usuários sabem usar

Conectores retos, ortogonais e curvos

Um diagrama é tão legível quanto as suas linhas. Cada conector escolhe o seu tipo: linhas retas ou polilinhas por pontos de passagem, rotas ortogonais de segmentos horizontais e verticais, ou curvas suaves para grafos de nós. AddConnector cria um conector do DefaultConnectorKind do documento. Pontas de seta nas duas extremidades, traços tracejados ou pontilhados e qualquer número de rótulos, posicionados ao longo da linha e arrastáveis pelo usuário, transformam uma linha simples em um ramo Sim ou Não bem claro. Na edição Registrada, o roteador ortogonal contorna os nós e afasta os segmentos paralelos.

  • Kind é dgcStraight, dgcOrthogonal ou dgcCurved
  • StartArrow e EndArrow recebem um TsgcDiagramArrow como dgaTriangle ou dgaDiamond
  • Labels guarda qualquer número de rótulos, posicionados com Position e Offset
  • Waypoints dobram os conectores retos e curvos onde você quiser

A Community roteia os conectores ortogonais como cotovelos simples que não evitam os nós.

Ler o tópico da ajuda

Um editor que os seus usuários sabem usar

Portas e fixação mantêm os vínculos presos

Nada frustra mais um usuário do que um diagrama que se desmonta quando uma caixa se move. Cada extremidade de conector é fixada: a uma porta nomeada, ao contorno do nó, ou deixada livre em um ponto. Mova, redimensione ou gire um nó e os seus conectores o acompanham e são roteados de novo. As formas vêm com portas nos pontos médios dos lados, e você pode adicionar as suas com uma posição, um lado, um sentido de fluxo e uma legenda, que é como se criam as entradas e saídas tipadas de um editor de nós. ShowPorts decide se as portas aparecem sempre, ao passar o mouse ou nunca.

  • TsgcDiagramPort tem Id, X, Y, Side, Flow e Caption
  • Flow faz de uma porta uma entrada com dgfIn ou uma saída com dgfOut
  • SourcePortId e TargetPortId fixam uma extremidade do conector a uma porta
  • ShowPorts é dgvHover por padrão, ou dgvAlways e dgvNever
Ler o tópico da ajuda

Diagramas que se montam sozinhos

Deixe o código fazer o trabalho de organização: arrume um grafo, monte um gráfico a partir de uma tabela ou ligue blocos com regras.

Diagramas que se montam sozinhos Somente Registrada

Organize o diagrama inteiro com uma chamada

Diagramas montados por código, ou desenhados rapidamente por um usuário, raramente ficam organizados. O TsgcDiagramLayeredLayout organiza um grafo dirigido em camadas, pelo método de Sugiyama, de modo que fluxogramas, mapas de processos, máquinas de estados e grafos de dependências saem da esquerda para a direita ou de cima para baixo, com poucos cruzamentos de conectores e os conectores longos mantidos retos. O TsgcDiagramTreeLayout centraliza os pais sobre os filhos para organogramas e árvores de categorias. Os dois rodam como uma única etapa de desfazer, então o usuário pode testar um layout e desfazê-lo com Ctrl+Z. SelectionOnly organiza apenas a parte selecionada.

  • Direction é dglTopToBottom, dglLeftToRight, dglBottomToTop ou dglRightToLeft
  • LayerSpacing e NodeSpacing definem os espaçamentos, 60 e 30 unidades de mundo por padrão
  • Crossings informa os cruzamentos de conectores após Execute
  • TreeStyle definido como dgoCompactLeaves empilha a equipe de um gerente em uma única coluna

Na Community, os nós ficam onde o usuário ou o código os colocar.

Ler o tópico da ajuda
Organogramas direto de uma tabela

Diagramas que se montam sozinhos Somente Registrada

Organogramas direto de uma tabela

Os seus funcionários, centros de custo ou categorias de produtos já estão em uma tabela com uma chave e uma coluna de pai. O TsgcDiagramDataBinding transforma essas linhas em um diagrama: cada linha vira um nó, cada chave de pai vira um conector, e o layout em árvore ou em camadas organiza o resultado. Defina DataSource, KeyField, ParentField e LabelField, aponte Target para a visão e defina Active. Com LiveUpdates ativado, uma edição confirmada, uma inserção ou uma exclusão reconstrói o gráfico na próxima volta do laço de mensagens, enquanto percorrer as linhas não mexe na seleção.

  • DataSource, KeyField, ParentField e LabelField mapeiam as colunas
  • OnCreateNode estiliza cada nó a partir de qualquer campo da sua linha
  • dgbAuto escolhe o layout em árvore para uma árvore e o layout em camadas para vários pais
  • ParentSeparator lista vários pais em um único campo

A Community não tem vínculo com dados: crie os nós no código com AddNode e AddConnector.

Ler o tópico da ajuda
Editores de nós para fluxos de trabalho e pipelines

Diagramas que se montam sozinhos

Editores de nós para fluxos de trabalho e pipelines

Regras de automação, pipelines de dados e fluxos de IoT são mais fáceis de entender como blocos ligados entre si. Dê a cada nó portas de entrada tipadas à esquerda e portas de saída à direita, mude DefaultConnectorKind para conectores curvos e pinte os blocos você mesmo em OnDrawNode, com uma faixa de título e pontos coloridos nas portas. OnConnecting permite recusar um vínculo antes de ele ser feito, de modo que uma saída numérica nunca alimente uma entrada de texto. O demo NodeEditor cria exatamente isso, com blocos adicionados em uma única etapa de desfazer e grafos salvos em JSON junto com as suas portas e legendas.

  • OnConnecting veta uma conexão, por exemplo entre portas de tipos diferentes
  • OnDrawNode pinta um nó, ou complementa o desenho padrão
  • DefaultConnectorKind definido como dgcCurved dá o visual clássico de grafo de nós
  • O Caption de uma porta é desenhado ao lado dela, dentro do nó
Ler o tópico da ajuda

Desfazer, arquivos e exportação

Edição segura para o usuário, e um formato de documento e uma saída de imagem em que o seu aplicativo pode confiar.

Desfaça tudo, ajuste às guias

Desfazer, arquivos e exportação

Desfaça tudo, ajuste às guias

Os usuários experimentam quando sabem que podem voltar atrás. O documento mantém uma pilha de desfazer e uma de refazer, e cada ação do usuário na visão é uma etapa. No código, BeginTransaction e EndTransaction agrupam qualquer número de alterações em uma única etapa nomeada, e Rollback as descarta. Copiar e colar funcionam dentro do aplicativo, e as colagens repetidas são deslocadas para não se empilharem. Enquanto um nó se move ou se redimensiona, as suas bordas e linhas centrais se ajustam à grade e aos nós ao redor, e uma linha-guia mostra o alinhamento.

  • BeginTransaction, EndTransaction e Rollback agrupam as alterações feitas no código
  • UndoLimit mantém 100 etapas por padrão, e UndoCaption dá nome ao próximo desfazer
  • CopyToClipboard, CutToClipboard e PasteFromClipboard na visão
  • SnapToGrid, SnapToGuides e GridSize controlam os auxílios de alinhamento
Ler o tópico da ajuda
Salve como JSON, abra em qualquer lugar

Desfazer, arquivos e exportação

Salve como JSON, abra em qualquer lugar

Um diagrama é um dado que o seu aplicativo armazena, envia e versiona. O documento é salvo em JSON como texto, arquivo ou stream, e o formato é idêntico em todas as plataformas e em todas as edições: um arquivo salvo por um aplicativo desktop Delphi abre em uma ferramenta C++ Builder, em um serviço .NET ou em uma compilação Community. A saída é canônica, com ordem fixa de chaves e valores padrão omitidos, de modo que o mesmo diagrama sempre gera o mesmo texto e se compara bem no controle de versão. As imagens viajam dentro do arquivo como dados PNG.

  • SaveToFile e LoadFromFile, SaveToStream e LoadFromStream
  • SaveToJSON e LoadFromJSON para um campo de banco de dados ou uma requisição web
  • Uma visão grava o seu diagrama no arquivo de formulário como DiagramJSON
  • As rotas de conectores guardadas no arquivo são mantidas ao carregar
Ler o tópico da ajuda
Exporte PNG e SVG, até em um servidor

Desfazer, arquivos e exportação

Exporte PNG e SVG, até em um servidor

Os diagramas acabam em relatórios, e-mails, páginas wiki e apresentações. A visão salva o que mostra como PNG ou SVG, com um fator de escala para imagens nítidas e com o desenho personalizado e o tema aplicados, de modo que um diagrama escuro é exportado escuro. O TsgcDiagramRenderer faz o mesmo sem nenhuma visão: um programa de console, um serviço do Windows ou um daemon Linux64 monta um diagrama, organiza e grava os arquivos. O demo Headless faz exatamente isso com um fluxograma de chamados de suporte e, compilado com o Delphi 13, grava os mesmos bytes no Win32, no Win64 e no Linux64.

  • SaveToPNG e SaveToSVG na visão, com uma escala de pixels por unidade de mundo
  • SaveToPNGFile e SaveToSVGFile no TsgcDiagramRenderer, sem precisar de janela
  • RenderTo pinta parte de um documento em qualquer canvas do sgcUICore
  • A exportação para PDF e a impressão não fazem parte da versão 1
Ler o tópico da ajuda

Visualização e estilo

Mostre diagramas a quem não deve editá-los, com a aparência do seu aplicativo.

Um visualizador somente leitura para painéis e portais

Visualização e estilo

Um visualizador somente leitura para painéis e portais

Nem todo usuário deve editar o mapa de processos. Defina ReadOnly e a mesma visão vira um visualizador: os usuários selecionam, dão zoom com Ctrl e a roda do mouse e deslocam com o botão do meio ou a barra de espaço, mas nada se move, conecta ou é excluído, e a paleta não solta formas. O ponteiro vira uma mão sobre um item e OnItemClick informa qual é, de modo que um clique em um nó possa abrir o registro correspondente. ZoomToFit enquadra o diagrama inteiro a partir do código. Para proteger apenas parte de um diagrama, bloqueie itens individuais ou camadas inteiras.

  • ReadOnly mantém seleção, zoom e deslocamento, e bloqueia toda edição
  • OnItemClick, OnItemDblClick e OnHover informam o item sob o ponteiro
  • ZoomToFit, ZoomToSelection e CenterOn movem a visão a partir do código
  • Locked protege itens individuais ou uma camada inteira
Ler o tópico da ajuda

Visualização e estilo

Claro, escuro e o seu próprio desenho

Um diagrama deve parecer parte do seu aplicativo, e não uma imagem colada. As visões, as paletas e a exportação usam os temas do sgcUICore, então uma única propriedade Theme alterna entre claro e escuro e combina com as grades, os gráficos e os painéis sgcUI no mesmo formulário. Cada nó e cada conector tem o seu próprio Style com preenchimento, traço, tracejado, raio de canto e configurações de texto, e NodeStyle e ConnectorStyle são os modelos para novos itens. Para ter controle total, OnDrawNode permite pintar um nó você mesmo, e FontFile desenha o texto com uma fonte TrueType à sua escolha.

  • Theme recebe utDefault (segue o tema da aplicação), utLight, utDark ou utCustom
  • Style define Fill, Stroke, StrokeWidth, Dash e CornerRadius
  • NodeStyle e ConnectorStyle estilizam cada novo item
  • sgcUIARGB cria cores como um azul-petróleo corporativo
Ler o tópico da ajuda

Acessibilidade

UI Automation para leitores de tela, o teclado e o alto contraste, sem nenhuma configuração.

Acessibilidade

Desenhe diagramas com o teclado e exponha-os ao UI Automation

O sgcDiagram expõe os nós com seu texto, os vínculos entre eles e a paleta de formas ao Microsoft UI Automation, e o diagrama se descreve com a mesma alternativa em texto que grava em um PDF acessível.

  • As setas movem a seleção, Alt+Setas a ajustam em um pixel e Alt+Shift+Setas redimensionam o nó selecionado
  • Ctrl+K inicia um vínculo a partir do nó selecionado: Tab e Shift+Tab escolhem o destino, Enter conecta e Esc cancela
  • Na paleta, as setas, Home e End movem entre as formas, e Enter ou Space adiciona a forma com foco
  • Ctrl+Tab e Ctrl+Shift+Tab movem o foco para o controle seguinte ou anterior, e sob um tema de alto contraste do Windows o diagrama é pintado com as cores do sistema

A acessibilidade vem ativada por padrão em todas as edições, inclusive a edição Community gratuita, no VCL em todas as versões do Delphi e do C++Builder do Delphi 7 ao Delphi 13, no FireMonkey no Windows e no WinForms, WPF e Avalonia. No Delphi e no C++Builder, AccessibleName e AccessibleDescription definem o nome e a descrição expostos ao UI Automation, e no .NET o nome acessível e o texto de ajuda padrão de cada framework fazem o mesmo. Veja os relatórios de conformidade de acessibilidade. Os pontos de dobra dos conectores são editados somente com o mouse.

Leia o tópico da ajuda

Veja o sgcDiagram em ação

sgcDiagram dentro das demos da suíte sgcUI: aplicações completas que rodam offline com dados simulados integrados.

Quem cria com o sgcDiagram

Designers de fluxos de trabalho e aprovações

Aprovações de compra, escalonamentos de chamados e listas de integração mudam com frequência, e as pessoas responsáveis por elas não são programadoras. Incorpore o editor para que o responsável pelo processo desenhe o fluxo com decisões e rótulos Sim ou Não, salve-o como JSON no seu banco de dados, e o seu aplicativo leia o mesmo documento para conduzir o processo real. ReadOnly transforma o fluxo armazenado em um mapa para todos os demais. Comece pelo FlowchartEditor.

  • Paleta e edição no próprio local
  • Rótulos de conectores
  • Arquivos JSON
Execute o demo FlowchartEditor

Organogramas a partir de dados de RH

Os sistemas de RH e ERP já sabem quem se reporta a quem. Vincule a tabela de funcionários com o TsgcDiagramDataBinding, deixe o layout em árvore com folhas compactas organizar gerentes e equipe, e colora cada caixa por departamento em OnCreateNode. Quando o RH confirma uma alteração na grade, o gráfico se reconstrói sozinho, e um clique em um nó seleciona o funcionário. O demo OrgChart vincula 60 funcionários dessa forma.

  • Vínculo com dados
  • Layout em árvore
  • Modo de visualização
Execute o demo OrgChart

Editores de nós para pipelines e automação

Produtos que permitem aos clientes montar pipelines de dados, regras de automação ou fluxos de IoT precisam de uma tela onde os blocos são ligados entre si. Portas tipadas, conectores curvos e OnConnecting dão as regras, OnDrawNode dá aos blocos o seu próprio visual, e o grafo é salvo como JSON que o seu motor pode executar. Como o documento não depende de interface de usuário, um servidor pode carregar e verificar o mesmo grafo.

  • Portas tipadas
  • Regras de conexão
  • Desenho personalizado
Execute o demo 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

Execute os demos do sgcDiagram

Todos os demos acompanham o Delphi e o C++ Builder com o mesmo nome. A edição .NET tem FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart e ConsoleRender.

FlowchartEditor

Somente Registrada FlowchartEditor

Um fluxo de pedidos criado no código: arraste formas, desenhe conectores a partir das portas, mude o tipo de conector, desfaça, execute o layout em camadas, abra e salve JSON, exporte PNG e SVG, alterne o tema e o modo somente leitura.

OrgChart

Somente Registrada OrgChart

60 funcionários em um TDBGrid, vinculados a uma visão de diagrama somente leitura. Confirme uma edição e o gráfico se reconstrói, com folhas compactas, cores por departamento, clique para selecionar e exportação para PNG e SVG.

NodeEditor

NodeEditor

Portas de entrada e saída tipadas, uma regra de conexão em OnConnecting, conectores curvos e blocos pintados em OnDrawNode, salvos como JSON com as suas portas e legendas.

Somente Registrada FlowchartEditorFMX

O editor de fluxogramas na visão e na paleta FireMonkey, para Windows e Android, onde um toque posiciona uma forma e um gesto de pinça dá zoom.

Headless

Somente Registrada Headless

Um programa de console sem nenhuma unit VCL ou FireMonkey que monta um fluxograma, organiza com o layout em camadas e grava PNG, SVG e JSON, também no Linux64.

Demos compilados

Executáveis prontos para rodar de todos os produtos sgcUI, sem nada para instalar.

Baixar sgcUI_bin.zip →

Onde o sgcDiagram está incluído

O sgcDiagram faz parte do sgcUI Enterprise e também é vendido separadamente. O sgcDiagram também está incluído no pacote All-Access.

sgcDiagram pacote individual

€249 / desenvolvedor, código-fonte completo, 1 ano de atualizações.

Comprar o sgcDiagram → Ver preços →

sgcUI Enterprise

Todos os 14 produtos sgcUI, a partir de €699.

Ver Enterprise →

A edição Community gratuita (esegece.sgcDiagram.Community no NuGet) não inclui layouts automáticos, roteamento que evita obstáculos, vínculo com dados e várias camadas. Não existe ponte sgcWebSockets para o sgcDiagram.

RecursoCommunity (gratuita)Registrada
Paleta, visão e edição no próprio local✓✓
14 formas, portas, grupos e contêineres✓✓
Conectores retos, ortogonais e curvos✓✓
Desfazer, área de transferência, ajuste e guias✓✓
Arquivos JSON, exportação para PNG e SVG✓✓
Temas claro e escuro, modo de visualização✓✓
Layouts em camadas e em árvore−✓
Roteamento ortogonal que evita obstáculos−✓
Vínculo com dados−✓
Mais de uma camada−✓

Frameworks e plataformas suportados

Componentes do sgcDiagram

Visões e paletas

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

Modelo e controlador

TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector e TsgcDiagramController, sem dependência de interface de usuário.

Renderizador e layouts

O TsgcDiagramRenderer grava PNG e SVG sem uma janela. O TsgcDiagramLayeredLayout e o TsgcDiagramTreeLayout organizam o diagrama. Registrada

Visões .NET

TsgcWinFormsDiagramView, TsgcWpfDiagramView e TsgcAvaloniaDiagramView, cada uma com a sua paleta, no namespace esegece.sgcDiagram.

DestinoComponentePlataformas
Delphi 7 a 13, VCLTsgcVCLDiagramView, TsgcVCLDiagramPaletteWin32 e Win64
Delphi XE6 a 13, FireMonkeyTsgcFMXDiagramView, TsgcFMXDiagramPaletteWindows, macOS, iOS e Android
C++ Builder 2007 a 13Os mesmos componentesCabeçalhos .hpp gerados e bibliotecas estáticas
Delphi 10.2 a 13, headlessDocumento, JSON, roteamento, layouts, renderizador de PNG e SVGLinux64, por exemplo para renderizar diagramas em um servidor
.NET Framework 4.7.2, .NET 8, 9 e 10Visões WinForms, WPF e AvaloniaWindows, Linux e macOS, JSON, PNG e SVG headless

Perguntas frequentes

Sim, é para isso que servem a visão e a paleta. Os usuários arrastam formas, desenham conectores a partir das portas, editam o texto no próprio local, agrupam, copiam e colam, e desfazem ou refazem toda ação. Defina ReadOnly quando um usuário só deve olhar, ou bloqueie itens e camadas individuais para proteger parte de um diagrama enquanto o resto continua editável.

Sim, de duas formas. No código, AddNode e AddConnector dentro de BeginTransaction e EndTransaction criam qualquer diagrama como uma única etapa de desfazer. Na edição Registrada, o TsgcDiagramDataBinding o monta a partir de um dataset com uma chave e uma coluna de pai e o reconstrói quando os dados mudam. No .NET ele lê um DataTable.

Dois, nas edições Registrada e de Avaliação. O TsgcDiagramLayeredLayout organiza grafos dirigidos, como fluxogramas, máquinas de estados e grafos de dependências, em camadas com poucos cruzamentos. O TsgcDiagramTreeLayout organiza hierarquias, como organogramas e árvores de categorias, com um estilo de folhas compactas. Os dois funcionam em quatro direções e rodam como uma única etapa de desfazer.

Não na versão 1. Os diagramas são exportados para PNG e SVG, a partir da visão ou com o TsgcDiagramRenderer sem janela. O SVG escala sem perdas, então serve para impressão e documentos, e um PNG salvo com escala 2 continua nítido em apresentações. A impressão também não faz parte da versão 1.

Quatro recursos avançados: os layouts automáticos, o roteamento ortogonal que evita obstáculos (a Community desenha cotovelos simples), o vínculo com dados e as camadas além da primeira. Todo o resto está lá: todas as formas, os três tipos de conector, portas, contêineres, desfazer, a área de transferência, JSON, PNG e SVG, temas, ajuste e guias. A Registrada e a Avaliação têm tudo.

Sim. O formato JSON é o mesmo em todas as plataformas e em todas as edições, então um diagrama salvo por um aplicativo Delphi ou C++ Builder abre em um aplicativo WinForms, WPF ou Avalonia e vice-versa. Um arquivo salvo pela edição Registrada também abre em uma compilação Community, que mantém os nomes das camadas.

Sim. A visão e a paleta FireMonkey funcionam em Windows, macOS, iOS e Android a partir do Delphi XE6, e o demo FlowchartEditorFMX mostra a edição por toque no Android. No .NET, a visão Avalonia funciona em Windows, Linux e macOS.

Ajuda do sgcDiagram

3,000+Desenvolvedores
20+Anos
761+Componentes
30+Integrações de API
5Plataformas
Garantia de reembolso de 30 diasNão ficou satisfeito? Solicite o reembolso total em até 30 dias após a compra. Ver política de reembolso

Experimente o sgcDiagram hoje

A avaliação do sgcUI inclui o sgcDiagram e todos os outros produtos sgcUI.