https://github.com/ackkerman/next-cytoscape-demo

https://github.com/ackkerman/next-cytoscape-demo

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ackkerman/next-cytoscape-demo
• Owner: ackkerman
• License: mit
• Created: 2025-05-13T18:46:50.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-13T18:55:41.000Z (about 1 year ago)
• Last Synced: 2025-05-13T19:53:33.144Z (about 1 year ago)
• Language: TypeScript
• Size: 913 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# next-cytoscape-demo

> **Cytoscape.js × Next.js** で “構造化ドキュメント → ネットワーク図” を即可視化できる  

> **Node-link形式のJSON** を貼り付けるだけのシンプルなデモアプリです。



  



## 🚀 クイックスタート

```bash

pnpm install

pnpm build

pnpm start

````

**必要環境**： Node.js 18+ / pnpm 8+（or npm, yarn）

---

## 📦 JSON フォーマット

1. **node リスト**と **links リスト** で構成

2. ノードは `id` 必須。オプションで `label` / `primary` / `content`

3. リンクは `source` / `target` の 2 key

```jsonc

{

  "nodes": [

    { "id": "A", "label": "Root", "primary": true, "content": [] },

    { "id": "B", "label": "Child" }

  ],

  "links": [

    { "source": "A", "target": "B" }

  ]

}

```

node-link形式はD3.jsやNetworkxで用いられる一般的なグラフ構造を保存するためのデータ形式です: [参考](https://gist.github.com/mbostock/4062045)。さらに詳しい仕様・サンプルは **[`./assets/format_instruction.txt`](./assets/format_instruction.txt)** を参照してください。

## 🖼️ サンプル

* `Sample`（デフォルトロード）

* `Sample2` → `./assets/sample2.json`



  



## 🛠️ 採用スタック

* **Next.js 13** (App Router) + **React 18**

* **TypeScript**

* **Cytoscape.js** + **react-cytoscapejs**

  * Layout Ext: cose-bilkent / cola / dagre / elk / klay

* **react-simple-code-editor** + **Prism.js**

## 🤝 ライセンス

MIT License

© 2025 Ackkerman