JavaScript Diagram Library - 強力で機能豊富なコントロール
- 対話型ダイアグラムの視覚化、作成、編集。
- フローチャート、BPMN シェイプ、マインドマップの構築。
- 最適なパフォーマンスで広範囲のノードをロード。
- 複雑なレイアウトでもノードを自動配置。
- シームレスな操作と編集機能。
Quick Overview Video
Trusted by the world’s leading companies
概要
JavaScript Diagram は、対話型ダイアグラムの視覚化、作成、編集を行うための機能豊富なアーキテクチャ図ライブラリです。コードまたはビジュアルインターフェースを通じて、フローチャート、組織図、マインドマップ、BPMN チャートの作成をサポートしています。
なぜSyncfusion JavaScript Diagramを選ぶのか？
自動レイアウト
定義済みのレイアウトアルゴリズムに基づいてノードを自動的に配置します。
シームレスなデータバインディング
データソースからのデータに基づいて作成および配置されたノードとコネクタで図を生成します。コードを記述することなく、いくつかのプロパティを設定するだけで、あらゆる形式のデータをダイアグラムで簡単に変換、マッピング、利用できます。
対話型編集
JavaScript Diagramでは、インタラクティブにパンとズーム、スナップ、元に戻す・やり直し、ステンシル、サイズ変更、回転が可能です。
あらゆる解像度に対応
Diagramは、デスクトップ、タッチスクリーン、電話向けに高度にレスポンシブなレイアウトと最適化されたデザインを備えています。iOS、Android、またはWindows OSを使用するすべての携帯電話でうまく機能します。
再利用可能なシンボルギャラリー
SymbolPalette は、さまざまなパレットを表示します。パレットには、図にドラッグアンドドロップできるノードとコネクタのセットが表示されます。
独自のテンプレートシェイプを作成
ノードを使用して任意のグラフィカルオブジェクトを視覚化します。ノードは、同時に図ページ上で配置および操作できます。Diagramでは、さまざまな種類のノードを追加できます。
魅力的でカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabricなど、いくつかの組み込みテーマを備えた最先端のデザインです。オンラインのTheme Studioツールを利用して、図のテーマを簡単にカスタマイズできます。
グローバル化とローカリゼーション
日付、通貨、数値のフォーマットを好みに合わせて調整することで、異なるロケールのユーザーがコンポーネントを使用できるようにします。
AI Diagram で楽々デザイン
AI対応のDiagramコンポーネントを使用して、プレーンテキストから視覚要素を生成します。複雑な図を素早く作成、編集、理解できます。
-
テキストからスマートダイアグラムを作成: コンセプトを記述するだけで、AIがダイアグラムを作成します。
- テキストからスマートダイアグラムを作成する方法を学ぶ
JavaScript Diagramコード例
以下に示す数行のHTMLとTSコード例で、JavaScript Diagramを簡単に使い始めることができます。また、JavaScriptでDiagramをレンダリングおよび構成する方法を示す弊社のJavaScript Diagramの例もご覧ください。
<div class="control-section">
<div class="content-wrapper">
<div id="element">
</div>
</div>
</div>import { Diagram } from '@syncfusion/ej2-diagrams';
let diagram: Diagram = new Diagram({
width: '100%', height: '600px'
});
diagram.appendTo('#element');フローチャート
JavaScript Diagram ライブラリは、標準的なフローチャートのすべての形状を既製のオブジェクトとして提供しており、フローチャートを構築するために、これらを一度の呼び出しで図面に追加するのが容易です。
ノード
ノードを使用して任意のグラフィカルオブジェクトを視覚化します。ノードは、図のページ上で同時に配置および操作できます。次の機能があります。
- 多くの定義済み標準シェイプを使用
- カスタムシェイプの作成と追加が容易
- ノードの外観を完全にカスタマイズ
- ノードのUIテンプレートを設計し、複数のノードで再利用
コネクタ
コネクタは2つのノード間の関係を表します。
タイプ
豊富なUIを備えたJavaScript Diagramは、直線、直交、ポリライン、カーブのコネクタタイプを提供します。図の種類や接続されたノード間の関係に基づいて、これらいずれかを選択できます。
ブリッジングまたはラインジャンプ
ブリッジング（ラインジャンプ）を使用してコネクタの経路を示すことで、密度の高いダイアグラムでコネクタが重なり合う場所を簡単に読み取れるようにします。
外観
ノードと同様に、コネクタの見た目も自由にカスタマイズできます。JavaScript Diagramコントロールは、コネクタの色、太さ、ダッシュとドットの表示、コーナー、さらにはデコレータなど、豊富なプロパティのセットを提供しており、これを通じてコネクタをカスタマイズできます。
ラベル
ノードやコネクタにテキストやラベルを追加することで、追加情報を表示できます。
複数ラベル
任意の数のラベルを追加し、個別に配置します。
配置
ラベルには高度な配置オプションがあります。ノードの内側または外側、またはコネクタのソースまたはターゲット端に配置します。ノードまたはコネクタが移動したときに自動的に位置合わせします。
対話型機能
実行時に図の編集体験を向上させるために、対話型機能を使用します。さらに、マウス、タッチスクリーン、またはキーボードインターフェースで図を簡単に編集できます。
グループ化
複数のノードをグループに結合し、単一のオブジェクトとして操作できます。JavaScript Diagramコントロールでは、入れ子になったグループも可能です。
クイックコマンド
削除、接続、複製などのよく使うコマンドをセレクタの近くにボタンとして表示できます。これにより、ユーザーはツールボックスで正しいボタンを探すことなく、それらの操作を素早く実行できます。
配置
Syncfusion JavaScript Diagramライブラリには、選択境界線に対して選択されたオブジェクト（ノードとコネクタ）を整列させるための定義済み配置コマンドが備わっています。
シンボルパレット
JavaScript Diagramコントロールには、ステンシル、再利用可能なシンボル、およびノードのギャラリーが含まれており、これらをダイアグラムの表面にドラッグして配置できます。
ズームとパンツール
ズームイン・ズームアウトして、大きな図を詳細に見たり、広範囲にわたる景色を見たりします。また、図全体をパンして、図のある領域から別の領域へ移動します。
その他
これまでに挙げたすべての機能に加えて、図形描画のエクスペリエンスを向上させるための多くの機能があります。
その他の機能
キーボードナビゲーション
JavaScript Diagramコントロールは、すべてのセルがキーボードでアクセスできることを保証します。ソート、選択、編集などの主要な機能は、キーボードコマンドだけで実行でき、マウス操作は不要です。これにより、このコントロールを使用して高度にアクセス可能なアプリケーションを構築できます。
開発者に優しい API
開発者は、組み込みの、開発者に優しいAPIを介して、イベントカレンダーのUIと動作を完全に制御できます。これにより、複雑なDiagram機能も簡単にカスタマイズできます。
その他のサポート対象フレームワーク
Diagramは、Blazor、React、Angular、およびVueフレームワークで利用可能です。以下のリンクから、プラットフォーム固有のオプションをご覧ください。
対応ブラウザ
JavaScript Diagramは、Chrome、Firefox、Edge、Safari、Operaを含むすべての最新のウェブブラウザでうまく機能します。
当社のコンポーネントがどのように美しく効率的なアプリに変わるかをご覧ください
初めてのJavaScript Diagramの作成方法が分かりませんか？弊社のドキュメントがお手伝いします。
今すぐ読む145+ 以上のJavaScript UIコントロール
すべてのコントロール
スマートコンポーネント
グリッド
ドロップダウン
インプット
データビジュアライゼーション
ナビゲーション
ボタン
インタラクティブチャット
よくある質問
なぜSyncfusion JavaScript Diagramを選ぶべきですか？
充実した機能を備えたJavaScript Diagramは、以下の機能を提供します。
- 対話型ダイアグラムの視覚化、作成、編集。
最適なパフォーマンスで幅広いノードをロード。
フローチャートダイアグラムのサポート、多くの組み込みシェイプ、および柔軟なデータバインディング。
シームレスなエクスポートおよび印刷機能。
- 市場で最高のJavaScript Diagramの1つで、ソフトウェアとの対話のための機能豊富なUIを提供します。
- シンプルな設定とAPI。
- すべての最新ブラウザをサポート。
- モバイルタッチ対応でレスポンシブ。
Syncfusion JavaScript Diagramの価格はいくらですか？
JavaScript Diagramは単体では販売しておりません。Syncfusionチームライセンスの一部としてのみご購入いただけます。これには、JavaScript Diagramを含む1,600以上のコンポーネントとフレームワークが含まれます。チームライセンスの価格は、開発者5人で月額395ドルから始まり、サブスクリプションの有効期限が切れるまでのサポートとアップデートが含まれます。さらに、現在のプロモーションに基づいて割引を提供できる場合があります。詳細については、今すぐ製品スペシャリストにお問い合わせください。
Syncfusion JavaScript Diagramのデモはどこで見つけられますか？
弊社のJavaScript Diagramデモで、Diagramのレンダリングと設定方法をご覧いただけます。
Syncfusion JavaScript Diagramコントロールとは何ですか？
JavaScript Diagramを画像としてエクスポートするにはどうすればよいですか？
JavaScript Diagramは、exportDiagramメソッドを使用して、PNG、JPEG、SVGなどのさまざまな画像形式にエクスポートできます。詳細については、このドキュメントをご参照ください。
Syncfusion JavaScript Diagramコンポーネントを個別に購入できますか？
いいえ、SyncfusionのWeb、モバイル、デスクトップ用の1,600+のコンポーネントとフレームワーク（JavaScript Diagramを含む）は個別に販売されていません。これらはチームライセンスの一部としてのみ利用可能です。ただし、他のベンダーがそのDiagramコンポーネントだけで請求するよりも少しだけ高くなるように競争力のある価格設定をしています。また、私たちの経験では、お客様は通常、当社の製品の1つを使用し始め、その後すぐにいくつかの製品に拡大するため、すべての1,600+コンポーネントとフレームワークを、開発者5人のチームで月額395ドルから始まるサブスクリプション料金で提供するのが最善であると判断しました。さらに、現在のプロモーションに基づいて割引を提供できる場合があります。詳細については、今すぐ製品スペシャリストにお問い合わせください。
Syncfusion JavaScript Diagramを無料でダウンロードして利用できますか？
いいえ、こちらは商用製品であり、有償ライセンスが必要です。ただし、年間売上高が100万米ドル未満で開発者が5人以下の企業や個人向けには、無料のコミュニティライセンスもご利用いただけます。
Syncfusion JavaScript Diagramを始めるにはどうすればよいですか？
弊社の包括的な入門ドキュメントから始めるのが良いでしょう。
JavaScript Diagramを使用してフローチャートを作成するにはどうすればよいですか？
JavaScript Diagramコントロールには、フローチャート用のシェイプがデフォルトで含まれています。詳細については、このドキュメントをご参照ください。
JavaScript Diagramコントロールを使用して対話型図を作成できますか？
はい、Syncfusion JavaScript Diagramを使用して対話型ダイアグラムを作成できます。複数の選択、ドラッグ、サイズ変更、回転、ズームなどをサポートしています。詳細については、このドキュメントをご参照ください。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
It has more tools and support than its competitors
Syncfusion essential studio samples are really helpfull. Docking Manager, Diagram, Undo-Redo, Mapping, Themes
HALİT A,
Software Developer
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion JavaScript Diagramリソース
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
JavaScript Diagramブログの最近の活動
JavaScript Diagramのブログ記事は、JavaScriptコントロールで最初のアプリを構築するのに役立ちます。問題解決戦略、機能と特性の説明、新機能のリリース発表、ベストプラクティスの説明、シナリオ例の紹介などを行います。JavaScript Diagramの最新情報については、当社のブログチャネルの最新投稿をご覧ください。
