Skip to content
/ cy-minimum-graph-viewer Public

Cytoscape.jsを利用したグラフのビューワー。グラフのjsonデータを読み込み、グラフを表示する。「GUI上での内部データ確認・ノードの座標編集・グラフのPNG画像出力」が可能。npm(Vite)版とCDN読み込み版がある。MITライセンス。

tweeteafox223.github.io/cy-minimum-graph-viewer/

License

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

TweeTeaFOX223/cy-minimum-graph-viewer

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
.github/workflows
.github/workflows
 
 
CDN@archived
CDN@archived
 
 
npm(Vite)
npm(Vite)
 
 
★sample-json-data
★sample-json-data
 
 
.gitattributes
.gitattributes
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

目次


概要と機能

Cytoscape.jsを利用したグラフ(ネットワーク図)の、ビューワーアプリです。
何個かの拡張機能を導入しているので、操作しやすい感じになっています。
Cytoscape.jsのグラフをサクッと閲覧したい・PNG画像に出力したい時に使えます。
グラフのスタイルはデフォルトからかなり変更しています(ソース参照)

Cytoscape.jsのグラフデータのjsonファイルを読み込み、グラフを表示します。

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

技術 使用しているもの
言語 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ライセンス)
ファイルの保存とDL FileSaver.js(MITライセンス)
モーダルウィンドウ Micromodal.js(MITライセンス)

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

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

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

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

オンライン：GitHub Pagesで使用

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

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

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

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

このアプリをビルドなどする方法

npmとViteを使ってビルドする版

説明

npm(Vite)のディレクトリに入っているやつです。
「vite」と「vite-plugin-singlefile」でビルドする仕様です。
node.js v22.2.0とnpm v10.7.0のインストールが必要です。

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

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

cd npm(Vite)  
npm install

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

npm run dev

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

npm run build

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

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

npm run build-offline

：npm(Vite)/dist-offlineにindex.htmlが生成されます。
：そのindex.htmlをブラウザで開くと動かすことができます。

CDNから読み込む版(更新停止)

  • CDN@archivedのディレクトリに入っているやつです。
    html内部で、JavaScriptのライブラリをCDNから読み込んでいます。
    CDNだと使用ライブラリの依存関係の管理が困難なので更新停止しました。

  • html＋生のJavaScript+cssだけで作成しており、
    JavaScriptのES Modules機能を使用していないウェブページなので、
    ファイルをDLしCDN@archived/index.htmlをブラウザで開くと動きます。
    htmlとJavaScriptとcssのファイルを直接編集して改変することが可能です。

※ 同一オリジンポリシー に違反する機能を利用してないってことです。
※ CDNからライブラリを読み込んでいるのでインターネット接続が必要です。

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

大きく参考にしたアプリと記事(先駆者様)です。これらを見て、cytoscape.jsのグラフに関して「グラフ要素の内部データをサクッと確認できるものがほしい」「画質・背景色・透過有無・出力範囲をサクッと設定して、PNG画像に出力できるものがほしい」「CDN利用でシンプルに動くやつがほしい」と思ったので、作って見ました。

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

npm(Vite)/package.jsonと
CDN@archived/index.htmlの下部の内容も参照してください。

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

フォントのライセンス

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

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

About

Cytoscape.jsを利用したグラフのビューワー。グラフのjsonデータを読み込み、グラフを表示する。「GUI上での内部データ確認・ノードの座標編集・グラフのPNG画像出力」が可能。npm(Vite)版とCDN読み込み版がある。MITライセンス。

tweeteafox223.github.io/cy-minimum-graph-viewer/

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Languages