Skip to content
/ cy-experiment-graph-editor Public

Cytoscape.jsを利用したグラフの実験的エディタ。cy-minimum-graph-viewerの強化版。「右クリックによるノード/エッジの新規作成」「各要素のプロパティ(ラベル・色・形状など)の編集」「エッジの曲がりの設定」などが可能。Vite(Vanilla＋JavaScript)。MITライセンス。

tweeteafox223.github.io/cy-experiment-graph-editor/

License

MIT license
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

TweeTeaFOX223/cy-experiment-graph-editor

BranchesTags

Repository files navigation

目次


概要と機能

Cytoscape.jsを利用したグラフ(ネットワーク図)の、試験的エディタアプリ。
別リポジトリの「cy-minimum-graph-viewer」に編集機能を追加したもの。
ビューワに機能追加しようと思ったけど、コードが複雑になったので別にした。

diagrams.netのような編集を、Cytoscape.jsのグラフでやりたいと思って作った。
グループの構造があるネットワーク図をGUIで簡単に作成することができます。

技術 使用しているもの
言語 html・JavaScript・css
開発とビルド viteとvite-plugin-singlefile(MITライセンス)

JavaScriptの機能 使用しているライブラリ
グラフの表示全般 cytoscape.js(MITライセンス)
グラフのundoとredo cytoscape.js-undo-redo(MITライセンス)
グラフのパンズーム cytoscape.js-panzoom(MITライセンス)
グラフの階層表示 cytoscape.js-dagre(MITライセンス)
グラフのコンテキストメニュー cytoscape-context-menus(MITライセンス)
グラフのエッジの編集 cytoscape-edge-editing(MITライセンス)
グラフのエッジの作成 cytoscape-edgehandles(MITライセンス)
ファイルの保存とDL FileSaver.js(MITライセンス)
モーダルウィンドウ Micromodal.js(MITライセンス)


別リポジトリにあるビューワと共通の機能

  • Cytoscape.jsのグラフデータのjsonファイルを読み込み、グラフを表示
  • インスペクタ上で各要素のデータ(ID、ラベル、色、形状)を確認
  • グラフの「エッジの形式(Edge line)」、「ノードの配置形式(layout)」の選択
  • マウスでノードの座標を編集＋編集後のグラフデータをjsonで保存
  • マウスによる座標の編集の、取り消し「Ctrl+z」と、やり直し「Ctrl+y」
  • グラフをPNG画像で出力(画質、背景色、透過有無、対象範囲を設定可)

このエディタで追加した機能(拡張機能利用で作成)

  • コンテキストメニューからノード・エッジを新規作成
  • コンテキストメニューからノード・エッジを削除・復元
  • ノードやエッジのプロパティ(ラベル・色・形状など)の編集
  • エッジのカーブ(曲がり具合)や屈折するポイントの設定

★このアプリを今すぐ使用する方法

オンライン：GitHub Pagesで使用

npmとViteを使ってビルドしたものがGitHub Pagesにあります！
https://tweeteafox223.github.io/cy-experiment-graph-editor/

ローカル・オフライン：ビルド済みの単一htmlを開いて使用

dist-offline/index.htmlをダウンロードし、
ブラウザでindex.htmlを開くことで使用可能です。
ローカルかつオフライン環境でも動作可能です。

下記のリンクに入り、右上の「・・・」→「Download」を押す、
又は、中央付近にある「↓」のボタンを押すとダウンロードできます。
https://github.com/TweeTeaFOX223/cy-experiment-graph-editor/blob/main/dist-offline/index.html

グラフデータ(json)のサンプル

「sample-json-data」のディレクトリにjson形式で入っています。
アプリ内の「データを読み込む(json)」ボタンに入力すると、グラフ表示が可能。
Cytoscape.jsは、グラフのノードを入れ子構造のグループにできます
おそらく、グラフ系ライブラリの中では唯一の機能です。

  • 「00_simple.json」：三角関係みたいなグラフ
  • 「01_group.json」：何かのチームの関係性を表すグラフ
  • 「02_group2.json」：何かのチームと所属者の関係性を表すグラフ
  • 「03_group3.json」：マトリョーシカのような入れ子構造のグループ
  • 「04_group4.json」：入れ子構造のグループ同士の関係性のグラフ

このアプリをビルド/実行する方法

必要となる環境

「vite」と「vite-plugin-singlefile」でビルドする仕様です。
node.js v22.2.0とnpm v10.7.0のインストールが必要です。

npmのパッケージのインストール

このリポジトリをCloneし、ターミナルを開きます。
npmのコマンドを実行し必要パッケージをローカルにインストールします。

npm install

httpプロトコルで動くやつをビルド(デフォルト)

npm run dev

：Viteの機能でDEVサーバを起動してアプリを動作させます。
：コンソールに出てくるローカルホストにアクセスすると動きます。

npm run build

：./distにhtmlとjsとcssが生成されます。
：それをサーバーに設置してhttpプロトコルでアクセスすると動く。


httpプロトコル＋fileプロトコルでも動くやつをビルド

npm run build-offline

：./dist-offlineに単一のindex.htmlが生成されます。
：そのindex.htmlをブラウザで開くと動かすことができます。
：このhtmlはローカルかつオフライン環境でも動作が可能です。

参考にしたアプリと記事(先駆者様)

参考にした記事(Cytoscape.js関係)

参考にしたアプリ(エディタの機能)

使用しているパッケージ(ライブラリ)とフォントのライセンス

package.jsonも参照してください。

パッケージ(ライブラリ)のライセンス

フォントのライセンス

このリポジトリのライセンス

MITライセンスです
https://opensource.org/license/mit/　

About

Cytoscape.jsを利用したグラフの実験的エディタ。cy-minimum-graph-viewerの強化版。「右クリックによるノード/エッジの新規作成」「各要素のプロパティ(ラベル・色・形状など)の編集」「エッジの曲がりの設定」などが可能。Vite(Vanilla＋JavaScript)。MITライセンス。

tweeteafox223.github.io/cy-experiment-graph-editor/

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Languages