自社のアプリケーションの中に、本格的なダイアグラムエディタを用意できます。ユーザーはパレットから図形をドラッグし、接続し、その場でテキストを入力し、どんな操作も元に戻せます。ダイアグラム全体は 1 回の呼び出しで整列でき、JSON として保存し、ウィンドウのないサーバー上でも PNG や SVG にエクスポートできます。
本格的なダイアグラムエディタをアプリケーションに組み込む 13 の機能です。
ダイアグラムツールに期待されるすべての機能を、フォームに配置する 2 つのコンポーネントで提供します。
ユーザーがそのまま使えるエディタ
業務アプリケーションでは、承認フロー、業務プロセスマップ、生産ラインの配置図など、ユーザー自身が持つダイアグラムが必要になることがよくあります。別の作図ツールに誘導する代わりに、自社のフォームの中にエディタを置けます。TsgcVCLDiagramPalette と TsgcVCLDiagramView を配置し、パレットの View プロパティでリンクすると、ユーザーはキャンバスに図形をドラッグし、ポートからコネクタを引き、ノードのテキストをその場で入力できます。同じ組み合わせが、FireMonkey、WinForms、WPF、Avalonia にもあります。
TsgcVCLDiagramPalette は、ドラッグ、または項目とビューへの 2 回のクリックで図形を配置します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 の種類でコネクタを作成します。両端の矢印、破線や点線、線に沿って配置されユーザーがドラッグできる任意の数のラベルで、ただの線が「はい」「いいえ」の分岐として明確になります。登録版では、直交ルーターがノードを避けて経路を作り、平行な線分を離して配置します。
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 も選べます整える作業はコードに任せられます。グラフの整列、表からのチャートの作成、ルールによるブロックの接続ができます。
自動で組み上がるダイアグラム 登録版のみ
コードで作ったダイアグラムや、ユーザーが手早く描いたダイアグラムは、整って見えることはまれです。TsgcDiagramLayeredLayout は、有向グラフを階層に整列します（Sugiyama 法）。フローチャート、業務プロセスマップ、状態機械、依存関係グラフが、コネクタの交差を少なく、長いコネクタを直線に保ったまま、左から右、または上から下に並びます。TsgcDiagramTreeLayout は、組織図やカテゴリツリー向けに、親を子の中央に配置します。どちらも 1 回の取り消しステップとして実行されるため、ユーザーはレイアウトを試し、Ctrl+Z で元に戻せます。SelectionOnly を使うと、選択した部分だけを整列します。
Direction は dglTopToBottom、dglLeftToRight、dglBottomToTop、dglRightToLeft のいずれかですLayerSpacing と NodeSpacing で間隔を設定します。既定はワールド単位で 60 と 30 ですCrossings は、Execute の後のコネクタの交差数を返しますTreeStyle を dgoCompactLeaves にすると、マネージャーの部下を 1 列に積み重ねますCommunity 版では、ノードはユーザーまたはコードが置いた位置のままです。
ヘルプのトピックを読む
自動で組み上がるダイアグラム 登録版のみ
従業員、コストセンター、商品カテゴリは、すでにキーと親の列を持つ表に入っています。TsgcDiagramDataBinding は、その行をダイアグラムに変えます。すべての行がノードになり、すべての親キーがコネクタになり、ツリーまたは階層レイアウトが結果を整列します。DataSource、KeyField、ParentField、LabelField を設定し、Target をビューに向けて、Active を設定します。LiveUpdates を有効にすると、確定した編集、挿入、削除は、メッセージループの次のターンでチャートを再構築し、行間の移動では選択状態は変わりません。
DataSource、KeyField、ParentField、LabelField で列をマッピングしますOnCreateNode で、その行の任意のフィールドからノードのスタイルを設定しますdgbAuto は、ツリーにはツリーレイアウト、複数の親には階層レイアウトを選びますParentSeparator で、1 つのフィールドに複数の親を並べられますCommunity 版にはデータバインドがありません。AddNode と AddConnector を使って、コードでノードを作成します。
ヘルプのトピックを読む
自動で組み上がるダイアグラム
自動化ルール、データパイプライン、IoT フローは、ブロックをつないだ形にすると最も理解しやすくなります。各ノードの左に型付きの入力ポート、右に出力ポートを持たせ、DefaultConnectorKind を曲線のコネクタに切り替え、OnDrawNode でタイトル帯と色付きのポートの点を付けてブロックを自分で描画します。OnConnecting では、リンクが作られる前に拒否できるので、数値の出力がテキストの入力につながることはありません。NodeEditor デモはまさにこの構成で、ブロックは 1 回の取り消しステップで追加され、グラフはポートとキャプションごと JSON として保存されます。
OnConnecting で、たとえば型の異なるポート間の接続を拒否しますOnDrawNode は、ノードを描画するか、既定の描画に追加しますDefaultConnectorKind を dgcCurved にすると、定番のノードグラフの見た目になりますCaption は、ノードの内側のポートの隣に描画されますユーザーが安心して編集でき、アプリケーションが信頼できるドキュメント形式と画像出力を使えます。
元に戻す、ファイル、エクスポート
ユーザーは、元に戻せるとわかっているときに試行錯誤します。ドキュメントは元に戻すスタックとやり直しスタックを保持し、ビューでのユーザー操作はそれぞれ 1 ステップです。コードでは、BeginTransaction と EndTransaction で、任意の数の変更を名前付きの 1 ステップにまとめ、Rollback で破棄できます。コピーと貼り付けはアプリケーション内で動作し、繰り返しの貼り付けは位置をずらすので重なりません。ノードの移動やサイズ変更の際は、端と中心線がグリッドと周囲のノードにスナップし、ガイド線で配置の揃いが示されます。
BeginTransaction、EndTransaction、Rollback で、コードによる変更をグループ化しますUndoLimit の既定は 100 ステップで、UndoCaption は次の取り消しの名前ですCopyToClipboard、CutToClipboard、PasteFromClipboardSnapToGrid、SnapToGuides、GridSize で配置の補助を制御します
元に戻す、ファイル、エクスポート
ダイアグラムは、アプリケーションが保存、送信、バージョン管理するデータです。ドキュメントは JSON として、文字列、ファイル、ストリームに保存でき、形式はすべてのプラットフォーム、すべてのエディションで同一です。Delphi のデスクトップアプリケーションで保存したファイルは、C++ Builder のツール、.NET サービス、Community ビルドで開けます。出力は正規化され、キーの順序は固定で、既定値は省かれるので、同じダイアグラムは常に同じテキストになり、ソース管理で整然と比較できます。画像は PNG データとしてファイルに含まれます。
SaveToFile と LoadFromFile、SaveToStream と LoadFromStreamSaveToJSON と LoadFromJSONDiagramJSON としてストリーム化します
元に戻す、ファイル、エクスポート
ダイアグラムは、レポート、メール、Wiki ページ、スライドに使われます。ビューは、表示している内容を PNG または SVG として保存でき、鮮明な画像のための倍率指定に対応し、カスタム描画とテーマが適用されるので、ダークのダイアグラムはダークのままエクスポートされます。TsgcDiagramRenderer は、ビューなしで同じことを行います。コンソールプログラム、Windows サービス、Linux64 のデーモンが、ダイアグラムを作成し、レイアウトして、ファイルを書き出します。Headless デモはサポートチケットのフローチャートでまさにこれを行い、Delphi 13 でビルドすると、Win32、Win64、Linux64 で同じバイト列を書き出します。
SaveToPNG と SaveToSVG。ワールド単位あたりのピクセル数で倍率を指定しますTsgcDiagramRenderer の SaveToPNGFile と SaveToSVGFile。ウィンドウは不要ですRenderTo は、ドキュメントの一部を任意の sgcUICore キャンバスに描画します編集させたくない相手にも、アプリケーションの見た目に合わせてダイアグラムを見せられます。
表示とスタイル設定
すべてのユーザーに業務プロセスマップを編集させる必要はありません。ReadOnly を設定すると、同じビューがビューアになります。ユーザーは選択、Ctrl とホイールによるズーム、中ボタンまたは Space によるパンができますが、移動、接続、削除は一切できず、パレットから図形をドロップすることもできません。項目の上ではポインターが手の形になり、OnItemClick がどの項目かを通知するので、ノードのクリックで対応するレコードを開けます。ZoomToFit は、コードからダイアグラム全体を画面に収めます。ダイアグラムの一部だけを保護したい場合は、代わりに個別の項目やレイヤー全体をロックします。
ReadOnly は選択、ズーム、パンを残し、すべての編集をブロックしますOnItemClick、OnItemDblClick、OnHover は、ポインター下の項目を通知しますZoomToFit、ZoomToSelection、CenterOn で、コードからビューを動かしますLocked は、個別の項目またはレイヤー全体を保護します表示とスタイル設定
ダイアグラムは、貼り付けた画像ではなく、アプリケーションの一部に見えるべきです。ビュー、パレット、エクスポートは sgcUICore のテーマを使うので、Theme プロパティ 1 つでライトとダークを切り替えられ、同じフォームの 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 版を含むすべてのエディションで既定で有効です。VCL では Delphi 7 から Delphi 13 までのすべての Delphi と C++Builder のバージョンで、FireMonkey では Windows で、そして 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 から始めてください。
人事システムや ERP は、誰が誰に報告するかをすでに把握しています。従業員テーブルを TsgcDiagramDataBinding でバインドし、コンパクトリーフ付きのツリーレイアウトでマネージャーとスタッフを整列し、OnCreateNode で各ボックスを部署ごとに色分けします。人事担当者がグリッドで変更を確定すると、チャートは自動的に再構築され、ノードのクリックで従業員が選択されます。OrgChart デモは、この方法で 60 人の従業員をバインドしています。
お客様がデータパイプライン、自動化ルール、IoT フローを構築できる製品には、ブロックをつなげるキャンバスが必要です。型付きポート、曲線のコネクタ、OnConnecting がルールを与え、OnDrawNode がブロックに独自の見た目を与え、グラフはエンジンが実行できる JSON として保存されます。ドキュメントはユーザーインターフェイスに依存しないため、サーバーでも同じグラフを読み込んで検証できます。
Delphi、C++ Builder、C# で同じ API を使えます。パレットとビューを追加し、1 回の取り消しステップで図形とコネクタを作成してから整列します。レイアウトの呼び出しには、登録版またはトライアル版が必要です。
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 として保存します。
FireMonkey のビューとパレットを使ったフローチャートエディタです。Windows と Android で、タップで図形を配置し、ピンチでズームします。
VCL や FireMonkey のユニットを使わないコンソールプログラムが、フローチャートを作成し、階層レイアウトで整列して、PNG、SVG、JSON を書き出します。Linux64 でも動作します。
sgcDiagram は sgcUI Enterprise に含まれ、単体でも販売しています。All-Access バンドルにも含まれます。
無料の Community 版（NuGet の esegece.sgcDiagram.Community）には、自動レイアウト、障害物を避けるルーティング、データバインド、複数のレイヤーは含まれません。sgcDiagram には sgcWebSockets ブリッジはありません。
| 機能 | Community（無料） | 登録版 |
|---|---|---|
| パレット、ビュー、その場での編集 | ✓ | ✓ |
| 14 種類の図形、ポート、グループ、コンテナ | ✓ | ✓ |
| 直線、直交、曲線のコネクタ | ✓ | ✓ |
| 元に戻す、クリップボード、スナップ、ガイド | ✓ | ✓ |
| JSON ファイル、PNG と SVG のエクスポート | ✓ | ✓ |
| ライトとダークのテーマ、ビューアモード | ✓ | ✓ |
| 階層レイアウトとツリーレイアウト | − | ✓ |
| 障害物を避ける直交ルーティング | − | ✓ |
| データバインド | − | ✓ |
| 複数のレイヤー | − | ✓ |
VCL 向けの TsgcVCLDiagramView と TsgcVCLDiagramPalette、FireMonkey 向けの TsgcFMXDiagramView と TsgcFMXDiagramPalette。
TsgcDiagramDocument、TsgcDiagramNode、TsgcDiagramConnector、TsgcDiagramController。ユーザーインターフェイスには依存しません。
TsgcDiagramRenderer は、ウィンドウなしで PNG と SVG を書き出します。TsgcDiagramLayeredLayout と TsgcDiagramTreeLayout は、ダイアグラムを整列します。登録版
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 を設定し、ダイアグラムの一部を保護しつつ残りを編集可能にしたい場合は、個別の項目やレイヤーをロックします。
はい、2 つの方法があります。コードでは、BeginTransaction と EndTransaction の中で AddNode と AddConnector を使えば、任意のダイアグラムを 1 回の取り消しステップで作成できます。登録版では、TsgcDiagramDataBinding が、キーと親の列を持つデータセットからダイアグラムを作成し、データが変わると再構築します。.NET では DataTable を読み込みます。
登録版とトライアル版に 2 つ含まれます。TsgcDiagramLayeredLayout は、フローチャート、状態機械、依存関係グラフなどの有向グラフを、交差の少ない階層に整列します。TsgcDiagramTreeLayout は、組織図やカテゴリツリーなどの階層を整列し、コンパクトリーフのスタイルもあります。どちらも 4 方向に対応し、1 回の取り消しステップとして実行されます。
バージョン 1 ではできません。ダイアグラムは、ビューから、またはウィンドウなしで TsgcDiagramRenderer を使って、PNG と SVG にエクスポートできます。SVG は劣化なく拡大縮小できるため印刷や文書に向き、倍率 2 で保存した PNG はスライドでも鮮明です。印刷もバージョン 1 には含まれません。
4 つの高度な機能です。自動レイアウト、障害物を避ける直交ルーティング（Community 版は単純な折れ線を描画します）、データバインド、最初の 1 つを超えるレイヤーです。それ以外はすべて揃っています。すべての図形、3 種類のコネクタ、ポート、コンテナ、元に戻す機能、クリップボード、JSON、PNG と SVG、テーマ、スナップとガイドです。登録版とトライアル版には、すべてが含まれます。
はい。JSON 形式はすべてのプラットフォーム、すべてのエディションで同じなので、Delphi や C++ Builder のアプリケーションで保存したダイアグラムは、WinForms、WPF、Avalonia のアプリケーションで開け、その逆も可能です。登録版で保存したファイルは Community ビルドでも開け、レイヤー名は保持されます。
はい。FireMonkey のビューとパレットは、Delphi XE6 以降の Windows、macOS、iOS、Android で動作し、FlowchartEditorFMX デモは Android でのタッチ編集を紹介しています。.NET では、Avalonia のビューが Windows、Linux、macOS で動作します。
はじめに, VCL クイックスタート, FMX クイックスタート, ヘッドレス, 階層レイアウト, エクスポート, プラットフォーム, エディション.
Delphi、C++ Builder、.NET。いずれも sgcUI の全製品を網羅しています。
sgcDiagram には、バージョン 1 では PDF エクスポートがありません。sgcPDF で PDF レポートを作成し、エクスポートした PNG 画像をそこに配置してください。
sgcPDF を見る →
