オープン、展開が容易、簡単に統合ライン（図マイクロサービスアーキテクチャ、ネットワークトポロジ、フローチャート）描画ツール

オンラインエンジントポロジベースを達成するためにキャンバスを描くtypescriptです+オープンソース。エンジン+グラフィックにプロジェクトのフロントエンドに統合され、簡単かつ高速に拡張するためのライブラリミドルウェアのアイデアを、使用します。基本的なグラフィックスを実現するために当面は、満たすために、チャートグラフィックスライブラリを流れ、およびネットワークトポロジマイクロサービスアーキテクチャ図のフローチャートを描きます。アクティビティ図/タイミングチャート/図UMLクラス図を達成するために、別の後にバック計画。

オンライン体験（問題を操作しやすいよう、終わりモバイル適応はありません）製品

なぜホイールを繰り返し作成

遭遇したより多くのマイクロサービスアーキテクチャ、クラウドリソース、運用、保守、著者の可視化の展開と運用・保守作業を必要とします
オープンソースは、ずっと自分たちのニーズを満たすために
typescriptです+ずっと純粋なキャンバスのアーキテクチャ
ミドルウェアは、ファッションシーンに合わせてカスタマイズすることができますあまり違いはありません
最も重要なことは、関心が+に難しいことではありません

機能

オープンソース
カスタマイズ
統合するために、簡単で使いやすいです
非常に滑らかで良好なパフォーマンス、
便利なデータのインポートおよびエクスポート
画像の保存/プレビュー
typescriptです+キャンバス

利用シナリオ

マイクロサービスアーキテクチャ図
場合は、保守作業の展開トポロジ図
フローチャート

フォローアップが起動します。

アクティビティ図
タイミング図
図他のクラス

アーキテクチャの設計

主によって：層、ノード、および他のコンポーネントを接続する矢印。

レイヤー：

主として論理層の性能を向上させるために、ここで層と内部層と同様、ユーザにPS無関係。

層のオフスクリーン：全ての図面データ、最も安定した層です。

選択された層：ユーザーがノード/ハイライト接続層の一部又は全部を選択し、関連するプロパティ、スケール、回転を設定します。

アニメーションレイヤは：主にアニメーションを使用します。

活動レベル：主にアンカーと接続処理として、矢印マウス操作イベント、のために使用しました。

ノード：

キャンバスの主要成分である、内部ノードはまた、アイコンやテキストが含まれていてもよいです。

接続と矢：

そして、接続矢印が一緒に関連付けられています。接続の両端には、設定の矢印を設定するか選択することはできません。

ノードは、回転、全体制御点によってスケーリングすることができます。

接続ポイントを説明ノード間の接続のみを示し、スケーリング、回転は存在しません。スケーリング又は回転するノードの重み計算制御点を引き起こします。形状がラインの制御接続点によって変化させることができます。

絵画とプロパティ

様々なノードとリンクは独自の描画プロパティを持っているだけでなく、追加のカスタムデータを提供することができます

迅速な統合を使用してください

ES6の例を使用します。

github.com/le5le-com/t...

typescriptですの使用例：

github.com/le5le-com/t...

インストール

NPM（または糸）を使用し、使用するマウント。

＃インストールの描画エンジン 
NPMトポロジ-インストールコア

＃のフローチャート-ライブラリのインストール 
NPMインストール-flow-トポロジダイアグラム
 ＃...他のグラフィックスライブラリを

ベース・キャンバスを作成します。

// 1.インポート塗料エンジン 
トポロジ「トポロジコア」からのインポートを{} ; 

// 2.キャンバスを作成する
// 最初のパラメータ「TOPO-キャンバス」はDOM要素IDキャンバスを表し; 
// 第二パラメータ{}デフォルトを使用するすべてここに示したキャンバスのオプションは、意味します。特定のオプションは、後ろのAPIドキュメントを参照してください。
VARキャンバス= 新しい新しいトポロジ（「TOPO-キャンバス」、{}）; 

// 3.グラフィックレンダリング
// 最初のパラメータは、パターンデータ{}表す
// 真の二番目のパラメータを、新しいファイルを開き、そうでない場合、現在のファイルにオーバーレイグラフィックデータは、既存の、開かれ 
（{}、canvas.renderをtrueに）。

方法は、一般的にキャンバスを使用します

// データキャンバス取得 
データ=定数をこの; .canvas.data（）

//がBLOBとして画像を保存
// 種類、品質、コールバック：toImage関数パラメータ
この .canvas.toImage（ヌル、ヌル、BLOB => {
   // ドゥを。STH 
}）; 

// 画像をダウンロード
// saveAsImage関数パラメータ：ファイル名、タイプ、品質
この .canvas.saveAsImage（ 'canvas.png' ）; 

// 関連する操作を編集
この.canvas.cutを（）;
 この.canvas .copy（）;
 この.canvas.parse（）;
 この.canvas.undo（）;
 この .canvas.redo（）。

参考資料サードパーティ製のグラフィックスライブラリ

// サードパーティのグラフィックライブラリ使用

// インポートする1サイン関数を 
「トポロジコア/ -中学」からインポートregisterNodeを{} ; 

// 2.インポートグラフィックライブラリのグラフィカル要素とその関連
インポート{ 
  flowData、
  flowDataAnchors、
  flowDataIconRect、
  flowDataTextRect、
  flowSubprocess、
  flowSubprocessIconRect、
  flowSubprocessTextRect、
  flowDb、
  flowDbIconRect、
  flowDbTextRect、
  FlowDocument、
  flowDocumentAnchors、
  flowDocumentIconRect、
  flowDocumentTextRect、
  flowInternalStorage、
  flowInternalStorageIconRect、
  flowInternalStorageTextRect、
  flowExternStorage、
  flowExternStorageAnchors、
  flowExternStorageIconRect、
  flowExternStorageTextRect、
  flowQueue、
  flowQueueIconRect、
  flowQueueTextRect、
  flowManually、
  flowManuallyAnchors、
  flowManuallyIconRect、
  flowManuallyTextRect、
  flowDisplay、
  flowDisplayAnchors、
  flowDisplayIconRect、
  flowDisplayTextRect、
  flowParallel、
  flowParallelAnchors、
  flowComment、
  flowCommentAnchors 
から}、flowData、flowDataAnchors、flowDataIconRect、flowDataTextRect）。 'トポロジフロー図' 。

// 3.向引擎注册图形库图形及其相关元素
registerNode（ 'flowData' 
registerNode（ 'flowSubprocess'、flowSubprocess、ヌル、FlowSubprocessIconRect、flowSubprocessTextRect）; 
registerNode（ 'flowDb'、flowDb、ヌル、flowDbIconRect、flowDbTextRect）; 
registerNode（ 'FlowDocument' 、FlowDocument、flowDocumentAnchors、flowDocumentIconRect、flowDocumentTextRect）;
 // ... 

// 以下は、登録機能の簡単な説明であります詳細については、APIドキュメントを参照してください
// registerNode：カスタムグラフィックはノードをノードに登録します。
// 名前-ノードの名前。
// drawFn -描画機能をノードを。着信キャンバスCTXとノードデータは、描画する方法を決定するノード
// anchorsFn -ノードアンカーのコンピューティング、デフォルトのアンカーの計算方法という意味ヌル、もし
// iconRectFn - 、それがnullの場合、意味がノードを計算するのアイコン領域デフォルトのアイコン領域の計算方法使用
//textRectFn -コンピューティングノードの文字領域、ヌル、文字領域を計算するデフォルトの方法を使用している場合
//力-それは、すでにカバーされたか否か、同じ名前のノードに存在するかどうか。 
エクスポート関数registerNode（
  名：文字列、
  drawFn：（CTX：CanvasRenderingContext2D、ノード：ノード） => 空、
  anchorsFn：（ノード：ノード）=>？ 、ボイド、
  iconRectFn：（？ノード：ノード）=> 空、
  textRectFn：（ノード：ノード）=>？ 、ボイド、
  フォース：？ブール
）;

独自のグラフィックライブラリの開発

リファレンス開発者ドキュメント： www.yuque.com/alsmile/top ...

プロジェクトアドレス

エピローグ

個人的な開発の週末には、まだ改善の余地があり、コメントや交流を歓迎しています。

マイクロ手紙：alsmile123

パーソナル・サーバのリソースは非常に非常に非常に小さい、ゆっくりと開いて我慢してくださいされています。資金調達へようこそ:)。