sgcUI sgcDiagram を今すぐ利用できます

sgcDiagram。描いて、つなぐ。整えるのは 1 回の呼び出しで。

本格的なダイアグラムエディターを、あなたのアプリケーションの中に。ユーザーはパレットから図形をドラッグし、接続し、その場でテキストを入力し、どんな操作でも元に戻せます。ダイアグラム全体を 1 回の呼び出しで整列し、JSON として保存し、ウィンドウのないサーバーでも PNG や SVG にエクスポートできます。

体験版をダウンロード sgcDiagram を詳しく見る

VCL
FireMonkey
WinForms
WPF
Avalonia
Delphi 7～13

14種類の図形: フローチャート、組織図、スケッチ向け
3種類のコネクタ: 直線、直交、曲線
2種類の自動レイアウト: 階層とツリー
5UI フレームワーク: VCL、FireMonkey、WinForms、WPF、Avalonia

ダイアグラムエディターに必要なすべてを。

自分でフローを描くユーザー、あなたのデータから作るダイアグラム、アプリケーションが保存するファイル、そこから送り出す画像。sgcDiagram はそのすべてを、あらゆるフレームワークでカバーします。

アプリケーションの中のエディター
パレット、図形、グルーされたコネクタ、その場でのテキスト入力、元に戻す機能を、ユーザー向けにすぐ使える形で。
データから作るダイアグラム
階層レイアウトとツリーレイアウト、データセットバインドで、レコードを整ったチャートに変えます。
すべての UI フレームワーク
VCL、FireMonkey、WinForms、WPF、Avalonia で、同じクラス名と 1 つの JSON 形式を使えます。
ウィンドウなしの出力
コンソールプログラム、サービス、Linux64 から、ウィンドウなしで PNG と SVG を出力します。

動かして確かめる。

体験版に同梱されている sgcDiagram のデモから録画しました。

ユーザーが使いこなせるエディター

ユーザーが自分でダイアグラムを描けるようにします。

フォームに TsgcVCLDiagramPalette と TsgcVCLDiagramView を置き、 View プロパティでリンクします。
ダブルクリック、F2、または入力を始めるだけで、ノードのテキストをその場で編集できます。
Shift、Ctrl、ラバーバンドで選択し、移動、サイズ変更、回転、グループ化、コピー、貼り付けができます。

同じ分岐を直線、直交、曲線のコネクタで描き、Yes と No のラベルを付けた図

位置がずれないコネクタ

直線、直交、曲線で、ノードにグルーされます。

Kind is dgcStraight, dgcOrthogonal or dgcCurvedのいずれかで、矢印の先端と任意の数のラベルに対応します。
コネクタの両端は、名前付きポート、ノードの輪郭、または任意の点に固定できます。
ノードを移動、サイズ変更、回転すると、コネクタが追従して経路が再計算されます。

自分で組み上がるダイアグラム

組織図とフローチャートを、あなたのデータから直接作ります。

TsgcDiagramDataBinding は行をノードに、親キーをコネクタに変換します。
TsgcDiagramLayeredLayout は有向グラフを、コネクタの交差が少ない階層に整列します。
TreeStyle を dgoCompactLeaves に設定すると、1 人のマネージャーの部下を 1 列にまとめます。

SVG にエクスポートしたサポートチケットのフローチャートと、保存先の JSON ファイル

ファイルとエクスポート

JSON で保存し、サーバー上でも PNG と SVG にエクスポートします。

JSON 形式は、Delphi、C++ Builder、.NET のあらゆるプラットフォームとエディションで同一です。
SaveToPNG と SaveToSVG をビューで呼び出します。鮮明な画像にはスケール係数を指定できます。
TsgcDiagramRenderer は、コンソールプログラム、サービス、Linux64 から、ウィンドウなしで PNG と SVG を書き出します。

sgcDiagram のその他の機能。

図形、ノードエディター、読み取り専用ビューア、整列ガイドを、デモからそのままお見せします。

フローチャート図形と基本図形のパレットと、注文フローチャート — プロセス、判断からコンテナーまで 14 種類の図形と、 `dgsPath` で任意の輪郭を SVG パス構文で描けます。

型付きの入力ポートと出力ポートを曲線コネクタで結んだノードエディターのブロック — ノードエディター: 型付きポート、曲線コネクタ、 `OnConnecting` でのルール、 `OnDrawNode`.

読み取り専用モードの注文フローチャート。編集ボタンは無効になっています — `ReadOnly` はエディターをビューアに変えます。ユーザーは選択、ズーム、パンはできますが、何も動かせません。

移動中に整列ガイドへスナップするノード — すべての操作を元に戻せます。変更は `BeginTransaction`でまとめ、グリッドとガイドにスナップします。

数行で作る注文フロー。

図形とコネクタを 1 回の元に戻す操作で作成し、続いて整列します。Delphi、C++ Builder、C# で同じ API です。レイアウトの呼び出しには Registered エディションまたは体験版が必要です。

dotnet add package esegece.sgcDiagram.WinForms

C++ Builder 版と C# 版

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

procedure BuildOrderFlow(aForm: TForm);
var
  oView: TsgcVCLDiagramView;
  oDoc: TsgcDiagramDocument;
  oStart, oStock, oPay: TsgcDiagramNode;
  oLayout: TsgcDiagramLayeredLayout;
begin
  oView := TsgcVCLDiagramView.Create(aForm);
  oView.Parent := aForm;
  oView.Align := alClient;
  oView.Theme := utDark;
  oDoc := oView.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');
    oDoc.AddConnector(oStart, oStock);
    oDoc.AddConnector(oStock, oPay).Labels.Add.Text := 'Yes';
  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;
  oView.ZoomToFit;
end;