내 애플리케이션 안에서 사용자에게 제대로 된 다이어그램 편집기를 제공하세요. 사용자는 팔레트에서 도형을 끌어다 놓고, 연결하고, 텍스트를 그 자리에서 입력하고, 무엇이든 실행 취소할 수 있습니다. 다이어그램 전체는 호출 한 번으로 정렬하고, JSON으로 저장하고, 창이 없는 서버에서도 PNG나 SVG로 내보낼 수 있습니다.
애플리케이션에 제대로 된 다이어그램 편집기를 넣어 주는 13가지 기능입니다.
다이어그램 도구에서 사용자가 기대하는 모든 것을, 폼에 놓기만 하면 되는 두 컴포넌트로 제공합니다.
사용자가 바로 쓸 수 있는 편집기
업무용 애플리케이션에는 사용자가 직접 관리하는 다이어그램이 자주 필요합니다. 승인 흐름, 프로세스 맵, 생산 라인 계획 같은 것입니다. 사용자를 별도의 그리기 도구로 보내는 대신 편집기를 내 폼 안에 넣으세요. TsgcVCLDiagramPalette와 TsgcVCLDiagramView를 놓고 팔레트의 View 속성으로 연결하면, 사용자는 도형을 캔버스에 끌어다 놓고, 포트에서 커넥터를 그리고, 노드의 텍스트를 그 자리에서 입력합니다. FireMonkey, WinForms, WPF, Avalonia에도 같은 쌍이 있습니다.
TsgcVCLDiagramPalette는 끌어서 놓거나, 항목을 클릭한 뒤 뷰를 클릭해서 도형을 놓습니다Tool은 dgtSelect, dgtPan, dgtConnector, dgtShape 사이를 전환합니다dglRightToLeft 방향은 다이어그램을 오른쪽에서부터 배치합니다
사용자가 바로 쓸 수 있는 편집기
업무용 소프트웨어의 대부분의 다이어그램은 작고 익숙한 어휘를 사용하며, sgcDiagram은 이를 바로 쓸 수 있게 제공합니다. 순서도 기호인 프로세스, 판단, 단말, 데이터, 문서, 미리 정의된 프로세스, 연결 원과 함께 기본 사각형, 둥근 사각형, 타원, 자유 텍스트, 이미지, 다른 노드를 담는 컨테이너, SVG 경로 데이터로 만드는 사용자 지정 윤곽선을 제공합니다. 각 도형은 자신의 윤곽, 텍스트 영역, 기본 포트, 테마 색상을 알고 있으므로 판단 도형은 코드 없이도 모서리에 포트를 갖습니다. 노드는 Left, Top, Width, Height로 배치하고 Angle로 회전합니다.
Shape는 dgsDecision 같은 TsgcDiagramShape 값을 받습니다dgsPath는 SVG 경로 구문의 PathData로 임의의 윤곽을 그립니다dgsContainer는 ContainerId를 통해 자식 노드를 담고 함께 이동합니다TextAlign과 TextVAlign은 도형 안에서 줄바꿈된 텍스트의 위치를 정합니다
사용자가 바로 쓸 수 있는 편집기
다이어그램은 선이 읽기 쉬워야 읽기 쉽습니다. 각 커넥터는 종류를 선택합니다. 직선 또는 경유점을 지나는 폴리라인, 가로와 세로 구간으로 이루어진 직교 경로, 노드 그래프를 위한 부드러운 곡선입니다. AddConnector는 문서의 DefaultConnectorKind 종류로 커넥터를 만듭니다. 양쪽 끝의 화살촉, 파선 또는 점선, 선을 따라 배치되고 사용자가 끌 수 있는 여러 개의 레이블로 단순한 선을 분명한 예 또는 아니오 분기로 바꿀 수 있습니다. Registered 에디션에서는 직교 라우터가 노드를 피해 돌아가고 평행한 구간을 서로 벌려 놓습니다.
Kind는 dgcStraight, dgcOrthogonal, dgcCurved 중 하나입니다StartArrow와 EndArrow는 dgaTriangle이나 dgaDiamond 같은 TsgcDiagramArrow를 받습니다Labels는 여러 개의 레이블을 담으며 Position과 Offset으로 배치합니다Waypoints는 직선과 곡선 커넥터를 원하는 곳에서 꺾이게 합니다Community 에디션은 직교 커넥터를 노드를 피하지 않는 단순한 꺾임선으로 라우팅합니다.
도움말 항목 읽기사용자가 바로 쓸 수 있는 편집기
상자를 옮길 때 다이어그램이 무너지는 것만큼 사용자를 짜증나게 하는 것은 없습니다. 모든 커넥터 끝은 접착됩니다. 이름 있는 포트, 노드의 윤곽, 또는 한 점에 자유롭게 둘 수 있습니다. 노드를 이동, 크기 조절, 회전하면 커넥터가 따라가며 다시 라우팅됩니다. 도형에는 각 변의 중간에 포트가 있고, 위치, 변, 흐름 방향, 캡션을 지정해 직접 추가할 수도 있으며, 노드 에디터의 형식이 있는 입력과 출력이 이렇게 만들어집니다. ShowPorts는 포트를 항상, 마우스를 올렸을 때, 또는 전혀 표시하지 않을지를 정합니다.
TsgcDiagramPort에는 Id, X, Y, Side, Flow, Caption이 있습니다Flow는 dgfIn으로 입력 포트, dgfOut으로 출력 포트를 만듭니다SourcePortId와 TargetPortId는 커넥터 끝을 포트에 접착합니다ShowPorts의 기본값은 dgvHover이며, dgvAlways와 dgvNever도 있습니다정리는 코드에 맡기세요. 그래프를 정렬하고, 테이블에서 차트를 만들고, 규칙으로 블록을 연결합니다.
스스로 만들어지는 다이어그램 Registered 에디션 전용
코드로 만들거나 사용자가 빠르게 그린 다이어그램은 깔끔해 보이는 경우가 드뭅니다. TsgcDiagramLayeredLayout은 방향 그래프를 Sugiyama 방식으로 계층에 배치하므로, 순서도, 프로세스 맵, 상태 머신, 종속성 그래프가 커넥터 교차를 줄이고 긴 커넥터를 직선으로 유지한 채 왼쪽에서 오른쪽 또는 위에서 아래로 나옵니다. TsgcDiagramTreeLayout은 조직도와 카테고리 트리에서 부모를 자식 위 가운데에 놓습니다. 둘 다 실행 취소 한 단계로 실행되므로 사용자는 레이아웃을 시험해 보고 Ctrl+Z로 되돌릴 수 있습니다. SelectionOnly는 선택한 부분만 정렬합니다.
Direction은 dglTopToBottom, dglLeftToRight, dglBottomToTop, dglRightToLeft 중 하나입니다LayerSpacing과 NodeSpacing은 간격을 설정하며 기본값은 월드 단위로 60과 30입니다Crossings는 Execute 후의 커넥터 교차 수를 알려 줍니다TreeStyle을 dgoCompactLeaves로 설정하면 한 관리자의 직원을 한 열에 쌓습니다Community 에디션에서는 노드가 사용자나 코드가 둔 위치에 그대로 있습니다.
도움말 항목 읽기
스스로 만들어지는 다이어그램 Registered 에디션 전용
직원, 비용 센터, 제품 카테고리는 이미 키와 부모 열이 있는 테이블에 있습니다. TsgcDiagramDataBinding은 이 행들을 다이어그램으로 바꿉니다. 모든 행이 노드가 되고 모든 부모 키가 커넥터가 되며, 트리 또는 계층형 레이아웃이 결과를 정렬합니다. DataSource, KeyField, ParentField, LabelField를 설정하고 Target을 뷰로 지정한 다음 Active를 설정하세요. LiveUpdates를 켜면 게시된 편집, 삽입, 삭제가 메시지 루프의 다음 순서에 차트를 다시 만들고, 행 사이를 이동할 때는 선택이 그대로 유지됩니다.
DataSource, KeyField, ParentField, LabelField가 열을 매핑합니다OnCreateNode는 행의 임의 필드로 각 노드의 스타일을 정합니다dgbAuto는 트리에는 트리 레이아웃을, 부모가 여럿이면 계층형 레이아웃을 선택합니다ParentSeparator는 한 필드에 여러 부모를 나열합니다Community 에디션에는 데이터 바인딩이 없으므로 AddNode와 AddConnector로 코드에서 노드를 만드세요.
도움말 항목 읽기
스스로 만들어지는 다이어그램
자동화 규칙, 데이터 파이프라인, IoT 흐름은 서로 연결된 블록으로 볼 때 가장 이해하기 쉽습니다. 각 노드의 왼쪽에 형식이 있는 입력 포트를, 오른쪽에 출력 포트를 두고, DefaultConnectorKind를 곡선 커넥터로 바꾸고, OnDrawNode에서 제목 띠와 색상 포트 점으로 블록을 직접 그리세요. OnConnecting으로 링크가 만들어지기 전에 거부할 수 있으므로 숫자 출력이 텍스트 입력에 연결되는 일이 없습니다. NodeEditor 데모가 바로 이것을 구현하며, 블록은 실행 취소 한 단계로 추가되고 그래프는 포트와 캡션과 함께 JSON으로 저장됩니다.
OnConnecting은 서로 다른 형식의 포트 사이 같은 연결을 거부합니다OnDrawNode는 노드를 그리거나 기본 그리기에 추가합니다DefaultConnectorKind를 dgcCurved로 설정하면 전형적인 노드 그래프 모양이 됩니다Caption은 노드 안 포트 옆에 그려집니다사용자에게는 안전한 편집을, 애플리케이션에는 믿을 수 있는 문서 형식과 이미지 출력을 제공합니다.
실행 취소, 파일, 내보내기
사용자는 되돌릴 수 있다는 것을 알 때 이것저것 시도합니다. 문서는 실행 취소와 다시 실행 스택을 유지하며, 뷰에서의 모든 사용자 동작이 한 단계입니다. 코드에서는 BeginTransaction과 EndTransaction이 여러 변경을 이름 있는 하나의 단계로 묶고, Rollback이 이를 취소합니다. 복사와 붙여넣기는 애플리케이션 안에서 동작하며, 반복해서 붙여넣으면 겹치지 않도록 위치가 어긋납니다. 노드를 이동하거나 크기를 조절하는 동안 가장자리와 중심선이 그리드와 주변 노드에 맞춰지고, 안내선이 정렬을 보여 줍니다.
BeginTransaction, EndTransaction, Rollback은 코드에서 한 변경을 묶습니다UndoLimit은 기본값으로 100단계를 유지하고, UndoCaption은 다음 실행 취소의 이름을 알려 줍니다CopyToClipboard, CutToClipboard, PasteFromClipboardSnapToGrid, SnapToGuides, GridSize가 정렬 보조 기능을 제어합니다
실행 취소, 파일, 내보내기
다이어그램은 애플리케이션이 저장하고, 전송하고, 버전 관리하는 데이터입니다. 문서는 문자열, 파일, 스트림으로 JSON에 저장되며, 형식은 모든 플랫폼과 모든 에디션에서 동일합니다. Delphi 데스크톱 애플리케이션이 저장한 파일은 C++ Builder 도구, .NET 서비스, Community 빌드에서 열립니다. 출력은 키 순서가 고정되고 기본값이 생략된 정규 형식이므로 같은 다이어그램은 항상 같은 텍스트가 되어 소스 관리에서 깔끔하게 비교됩니다. 이미지는 PNG 데이터로 파일 안에 포함됩니다.
SaveToFile과 LoadFromFile, SaveToStream과 LoadFromStreamSaveToJSON과 LoadFromJSONDiagramJSON으로 다이어그램을 스트리밍합니다
실행 취소, 파일, 내보내기
다이어그램은 보고서, 이메일, 위키 페이지, 슬라이드에 들어갑니다. 뷰는 표시된 내용을 PNG나 SVG로 저장하며, 선명한 이미지를 위한 배율 계수를 지원하고 사용자 지정 그리기와 테마를 적용하므로 다크 다이어그램은 다크로 내보내집니다. TsgcDiagramRenderer는 뷰 없이 같은 일을 합니다. 콘솔 프로그램, Windows 서비스, Linux64 데몬이 다이어그램을 만들고, 레이아웃하고, 파일을 씁니다. Headless 데모가 지원 티켓 순서도로 바로 이것을 하며, Delphi 13으로 빌드하면 Win32, Win64, Linux64에서 같은 바이트를 씁니다.
SaveToPNG와 SaveToSVG, 월드 단위당 픽셀 배율 지원TsgcDiagramRenderer의 SaveToPNGFile과 SaveToSVGFile, 창이 필요 없습니다RenderTo는 문서의 일부를 모든 sgcUICore 캔버스에 그립니다편집하면 안 되는 사람에게 애플리케이션의 모양 그대로 다이어그램을 보여 줍니다.
보기와 스타일
모든 사용자가 프로세스 맵을 편집해야 하는 것은 아닙니다. ReadOnly를 설정하면 같은 뷰가 뷰어가 됩니다. 사용자는 선택하고, Ctrl과 휠로 확대/축소하고, 가운데 버튼이나 스페이스로 이동할 수 있지만 아무것도 옮기거나 연결하거나 삭제되지 않으며 팔레트도 도형을 놓을 수 없습니다. 항목 위에서 포인터가 손 모양으로 바뀌고 OnItemClick이 어느 항목인지 알려 주므로 노드를 클릭하면 해당 레코드를 열 수 있습니다. ZoomToFit은 코드에서 다이어그램 전체를 화면에 맞춥니다. 다이어그램의 일부만 보호하려면 개별 항목이나 레이어 전체를 잠그세요.
ReadOnly는 선택, 확대/축소, 이동을 유지하고 모든 편집을 차단합니다OnItemClick, OnItemDblClick, OnHover가 포인터 아래의 항목을 알려 줍니다ZoomToFit, ZoomToSelection, CenterOn이 코드에서 뷰를 이동합니다Locked는 개별 항목이나 레이어 전체를 보호합니다보기와 스타일
다이어그램은 붙여 넣은 그림이 아니라 애플리케이션의 일부처럼 보여야 합니다. 뷰, 팔레트, 내보내기는 sgcUICore 테마를 사용하므로 Theme 속성 하나로 라이트와 다크를 전환하며, 같은 폼의 sgcUI 그리드, 차트, 대시보드와 어울립니다. 각 노드와 커넥터에는 채우기, 선, 대시, 모서리 반경, 텍스트 설정이 있는 고유한 Style이 있고, NodeStyle과 ConnectorStyle은 새 항목의 템플릿입니다. 완전한 제어가 필요하면 OnDrawNode로 노드를 직접 그리고, FontFile로 원하는 TrueType 글꼴로 텍스트를 그릴 수 있습니다.
Theme은 utDefault(애플리케이션 테마를 따름), utLight, utDark, utCustom을 받습니다Style은 Fill, Stroke, StrokeWidth, Dash, CornerRadius를 설정합니다NodeStyle과 ConnectorStyle은 모든 새 항목의 스타일을 정합니다sgcUIARGB는 회사 고유의 청록색 같은 색상을 만듭니다미리 보기에는 프린터와 PDF가 받는 내용이 그대로 표시됩니다.
인쇄, 미리 보기, PDF
스크롤로 보이는 부분만이 아니라 다이어그램 전체가 인쇄되며, 영역은 PNG 및 SVG 내보내기와 같습니다. 보기의 확대/축소와 스크롤 위치는 페이지에 영향을 주지 않으며, 선택, 핸들, 가이드는 인쇄되지 않습니다.
Print는 인쇄 대화 상자를 표시하거나 기본 프린터로 바로 인쇄하고, ShowPrintPreview는 페이지 이동, 확대/축소, 페이지 설정, 인쇄, PDF 내보내기를 갖춘 미리 보기를 엽니다PrintSettings는 용지, 방향, 여백, 배율, 머리글과 바닥글 텍스트를 담고 있으며, 프린터, 미리 보기, PDF가 모두 이를 사용합니다ExportToPDF는 실제 텍스트가 있는 벡터 페이지를 기본적으로 태그가 지정된 PDF/UA로 기록하며, 도형과 커넥터의 수를 세고 처음 30개 도형의 텍스트를 나열하는 대체 텍스트를 붙입니다TsgcUIPDFOptions의 PDFALevel은 보관용으로 PDF/A-2a 또는 PDF/A-3a를 추가하며, 단독으로도 PDF/UA와 함께도 사용할 수 있습니다인쇄와 미리 보기는 무료 Community 에디션을 포함한 모든 에디션에서 VCL, FireMonkey, WinForms, WPF, Avalonia에서 사용할 수 있습니다. FireMonkey에서는 인쇄가 Windows와 macOS에서, 미리 보기와 PDF 내보내기는 모든 플랫폼에서 동작합니다. PDF 내보내기에는 sgcUIPDF 브리지와 라이선스가 있는 sgcPDF(.NET에서는 NuGet 패키지 esegece.sgcUICore.sgcPDF)가 필요하므로 Community 에디션에는 포함되지 않습니다.
UI Automation을 통한 화면 읽기 프로그램, 키보드, 고대비 지원, 별도 설정이 필요 없습니다.
접근성
sgcDiagram은 텍스트가 있는 노드, 노드 사이의 링크, 도형 팔레트를 Microsoft UI Automation에 노출하며, 다이어그램은 접근 가능한 PDF에 기록하는 것과 같은 대체 텍스트로 자신을 설명합니다.
접근성은 무료 Community 에디션을 포함한 모든 에디션에서 기본으로 켜져 있으며, Delphi 7부터 Delphi 13까지 모든 Delphi 및 C++Builder 버전의 VCL, Windows의 FireMonkey, 그리고 WinForms, WPF, Avalonia에서 지원됩니다. Delphi와 C++Builder에서는 AccessibleName과 AccessibleDescription이 UI Automation에 노출되는 이름과 설명을 설정하고, .NET에서는 각 프레임워크의 표준 접근성 이름과 도움말 텍스트가 같은 역할을 합니다. 접근성 적합성 보고서를 참조하세요. 커넥터 꺾임점은 마우스로만 편집할 수 있습니다.
sgcUI 제품군 데모 속의 sgcDiagram: 내장 시뮬레이션 데이터로 오프라인에서 실행되는 완전한 애플리케이션입니다.
탱크에서 충전기까지의 1호 라인 공정 다이어그램, 고장 난 펌프 P-201은 빨간색.
Altamira Plant →
볼륨별 선 굵기, 상태별 색상의 허브 네트워크 다이어그램.
Altamira Fleet →
프로젝트 간 마일스톤 종속성을 자동 배치하고 크리티컬 링크를 강조 표시.
Altamira PMO →
요청 그리드와 승인 상태 옆의 구매 승인 워크플로.
Altamira ERP →
구매 승인, 티켓 에스컬레이션, 온보딩 체크리스트는 자주 바뀌고, 이를 관리하는 사람은 프로그래머가 아닙니다. 편집기를 내장하면 프로세스 담당자가 판단과 예 또는 아니오 레이블이 있는 흐름을 직접 그리고, 데이터베이스에 JSON으로 저장하며, 애플리케이션은 같은 문서를 읽어 실제 프로세스를 구동합니다. ReadOnly는 저장된 흐름을 다른 모든 사람을 위한 맵으로 바꿉니다. FlowchartEditor에서 시작하세요.
HR 및 ERP 시스템은 이미 누가 누구에게 보고하는지 알고 있습니다. TsgcDiagramDataBinding으로 직원 테이블을 바인딩하고, 컴팩트 리프가 있는 트리 레이아웃이 관리자와 직원을 정렬하게 하며, OnCreateNode에서 부서별로 상자 색상을 지정하세요. HR이 그리드에서 변경을 게시하면 차트가 스스로 다시 만들어지고, 노드를 클릭하면 직원이 선택됩니다. OrgChart 데모는 이 방식으로 직원 60명을 바인딩합니다.
고객이 데이터 파이프라인, 자동화 규칙, IoT 흐름을 만들 수 있게 하는 제품에는 블록을 서로 연결하는 캔버스가 필요합니다. 형식이 있는 포트, 곡선 커넥터, OnConnecting이 규칙을 제공하고, OnDrawNode가 블록에 고유한 모양을 주며, 그래프는 엔진이 실행할 수 있는 JSON으로 저장됩니다. 문서가 사용자 인터페이스에 의존하지 않으므로 서버에서도 같은 그래프를 불러와 검사할 수 있습니다.
Delphi, C++ Builder, C#에서 같은 API를 사용합니다. 팔레트와 뷰를 추가하고, 실행 취소 한 단계로 도형과 커넥터를 만든 다음 정렬합니다. 레이아웃 호출에는 Registered 또는 체험판 에디션이 필요합니다.
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모든 데모는 Delphi와 C++ Builder에서 같은 이름으로 제공됩니다. .NET 에디션에는 FlowchartEditor(WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart, ConsoleRender가 있습니다.
코드로 만든 주문 흐름: 도형 끌기, 포트에서 커넥터 그리기, 커넥터 종류 전환, 실행 취소, 계층형 레이아웃 실행, JSON 열기와 저장, PNG와 SVG 내보내기, 테마와 읽기 전용 모드 전환.
TDBGrid의 직원 60명을 읽기 전용 다이어그램 뷰에 바인딩합니다. 편집을 게시하면 차트가 다시 만들어지며, 컴팩트 리프, 부서별 색상, 클릭하여 선택, PNG 및 SVG 내보내기를 지원합니다.
형식이 있는 입력 및 출력 포트, OnConnecting의 연결 규칙, 곡선 커넥터, OnDrawNode로 그린 블록을 포트와 캡션과 함께 JSON으로 저장합니다.
Windows와 Android용 FireMonkey 뷰와 팔레트의 순서도 편집기이며, 탭하면 도형이 놓이고 핀치로 확대/축소합니다.
VCL이나 FireMonkey 유닛이 없는 콘솔 프로그램이 순서도를 만들고, 계층형 레이아웃으로 정렬한 다음 PNG, SVG, JSON을 씁니다. Linux64에서도 동작합니다.
무료 Community 에디션(NuGet의 esegece.sgcDiagram.Community)에는 자동 레이아웃, 장애물 회피 라우팅, 데이터 바인딩, 다중 레이어가 없습니다. sgcDiagram에는 sgcWebSockets 브리지가 없습니다.
| 기능 | Community (무료) | Registered 에디션 |
|---|---|---|
| 팔레트, 뷰, 인플레이스 편집 | ✓ | ✓ |
| 도형 14종, 포트, 그룹, 컨테이너 | ✓ | ✓ |
| 직선, 직교, 곡선 커넥터 | ✓ | ✓ |
| 실행 취소, 클립보드, 스냅, 안내선 | ✓ | ✓ |
| JSON 파일, PNG 및 SVG 내보내기 | ✓ | ✓ |
| 라이트 및 다크 테마, 뷰어 모드 | ✓ | ✓ |
| 계층형 및 트리 레이아웃 | − | ✓ |
| 장애물 회피 직교 라우팅 | − | ✓ |
| 데이터 바인딩 | − | ✓ |
| 두 개 이상의 레이어 | − | ✓ |
VCL용 TsgcVCLDiagramView와 TsgcVCLDiagramPalette, FireMonkey용 TsgcFMXDiagramView와 TsgcFMXDiagramPalette.
TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector, TsgcDiagramController이며, 사용자 인터페이스에 의존하지 않습니다.
TsgcDiagramRenderer는 창 없이 PNG와 SVG를 씁니다. TsgcDiagramLayeredLayout과 TsgcDiagramTreeLayout은 다이어그램을 정렬합니다. Registered
TsgcWinFormsDiagramView, TsgcWpfDiagramView, TsgcAvaloniaDiagramView이며, 각각 팔레트가 있고 esegece.sgcDiagram 네임스페이스에 있습니다.
| 대상 | 컴포넌트 | 플랫폼 |
|---|---|---|
| Delphi 7부터 13, VCL | TsgcVCLDiagramView, TsgcVCLDiagramPalette | Win32 및 Win64 |
| Delphi XE6부터 13, FireMonkey | TsgcFMXDiagramView, TsgcFMXDiagramPalette | Windows, macOS, iOS, Android |
| C++ Builder 2007부터 13 | 동일한 컴포넌트 | 생성된 .hpp 헤더와 정적 라이브러리 |
| Delphi 10.2부터 13, 헤드리스 | 문서, JSON, 라우팅, 레이아웃, PNG 및 SVG 렌더러 | Linux64, 예를 들어 서버에서 다이어그램을 렌더링할 때 |
| .NET Framework 4.7.2, .NET 8, 9, 10 | WinForms, WPF, Avalonia 뷰 | Windows, Linux, macOS, 헤드리스 JSON, PNG 및 SVG |
예, 뷰와 팔레트가 바로 그 용도입니다. 사용자는 도형을 끌어다 놓고, 포트에서 커넥터를 그리고, 텍스트를 그 자리에서 편집하고, 그룹화, 복사, 붙여넣기를 하고, 모든 동작을 실행 취소하거나 다시 실행합니다. 사용자가 보기만 해야 하면 ReadOnly를 설정하고, 다이어그램의 일부만 보호하려면 개별 항목과 레이어를 잠그세요. 나머지는 계속 편집할 수 있습니다.
예, 두 가지 방법이 있습니다. 코드에서는 BeginTransaction과 EndTransaction 안의 AddNode와 AddConnector로 모든 다이어그램을 실행 취소 한 단계로 만듭니다. Registered 에디션에서는 TsgcDiagramDataBinding이 키와 부모 열이 있는 데이터셋으로 다이어그램을 만들고 데이터가 바뀌면 다시 만듭니다. .NET에서는 DataTable을 읽습니다.
Registered 및 체험판 에디션에 두 가지가 있습니다. TsgcDiagramLayeredLayout은 순서도, 상태 머신, 종속성 그래프 같은 방향 그래프를 교차를 줄여 계층에 배치합니다. TsgcDiagramTreeLayout은 조직도와 카테고리 트리 같은 계층 구조를 컴팩트 리프 스타일로 배치합니다. 둘 다 네 방향으로 동작하며 실행 취소 한 단계로 실행됩니다.
버전 1에서는 아닙니다. 다이어그램은 뷰에서, 또는 창 없이 TsgcDiagramRenderer로 PNG와 SVG로 내보냅니다. SVG는 손실 없이 확대되므로 인쇄와 문서에 적합하고, 배율 2로 저장한 PNG는 슬라이드에서도 선명합니다. 인쇄도 버전 1에 포함되지 않습니다.
고급 기능 네 가지입니다. 자동 레이아웃, 장애물 회피 직교 라우팅(Community는 단순한 꺾임선을 그립니다), 데이터 바인딩, 첫 번째를 넘는 레이어입니다. 나머지는 모두 있습니다. 모든 도형, 세 가지 커넥터 종류, 포트, 컨테이너, 실행 취소, 클립보드, JSON, PNG와 SVG, 테마, 스냅과 안내선입니다. Registered와 체험판에는 모두 포함되어 있습니다.
예. JSON 형식은 모든 플랫폼과 모든 에디션에서 같으므로 Delphi나 C++ Builder 애플리케이션이 저장한 다이어그램은 WinForms, WPF, Avalonia 애플리케이션에서 열리고 그 반대도 마찬가지입니다. Registered 에디션이 저장한 파일은 Community 빌드에서도 열리며, 레이어 이름이 유지됩니다.
예. FireMonkey 뷰와 팔레트는 Delphi XE6부터 Windows, macOS, iOS, Android에서 실행되며, FlowchartEditorFMX 데모가 Android에서의 터치 편집을 보여 줍니다. .NET에서는 Avalonia 뷰가 Windows, Linux, macOS에서 실행됩니다.
실행 취소, 확대/축소, 레이아웃, 내보내기 명령을 위한 테마 툴바를 다이어그램과 같은 라이트 및 다크 테마로 편집기에 제공하세요.
sgcToolbar 살펴보기 →