生成AIで作成しました。d3.jsのフォース機能を使って依存関係マップを作成します。
作成物
考えや目的の整理・対象物の構成分解が目的ですが、モデルをjsonファイルで保存します（ダウンロード）。
このjsonファイルを生成AIに入力して、プロンプトとして用いることを考えます。
プロンプトコントローラとして検討します。
仕様
# D3.js フォースシミュレーション (CSVデータ入力)
## 概要
このツールは、D3.js v7を用いたインタラクティブなノード・リンク図（依存関係マップ）作成・編集ツールです。ノード・リンク情報をCSV形式で入力・編集し、SVG上でノードのドラッグやグループ分け、リンクの追加・編集・削除、ノードの固定/可動切り替え、メモ管理などが可能です。
## 主な仕様・機能
- **ノード・リンクのCSV編集**
- ノード・リンク情報はテキストエリアでCSV形式で編集可能
- ノード: id, name, shape, state, group, hidden, memo など
- リンク: source, target, value, color, type など
- **SVG上でのインタラクション**
- ノードのドラッグ移動（複数選択・グループドラッグ対応）
- ノードの固定/可動切り替え（右クリックメニュー）
- ノード・リンクの追加・編集・削除（右クリックメニュー/ツールバー）
- ノードのメモ表示（ツールチップ）
- ノードのグループ分け・グループ名/メモ編集
- ノードの複製・非表示
- マルチ選択（Shift+クリック、ドラッグ選択）
- **スタイル・表示**
- ノード形状（circle, rect, diamond, triangle）
- グループごとの色分け
- ラベル文字サイズ・ノード半径・リンク線幅など調整可能
- キャンバス背景色変更
- 凡例（グループ名・色・メモ）表示
- **データ管理**
- Undo/Redo（履歴管理）
- JSON形式での保存・読み込み（ノード位置・メモ・設定も含む）
- HTMLエクスポート（現状のモデルを静的HTMLとして出力）
- **その他**
- IndexedDBによる自動保存・復元
- レスポンシブなUI配置（ツールバー・データパネルのドラッグ移動）
## 使い方
1. ノード・リンク情報をCSVで入力または編集
2. SVG上でノードやリンクを操作
3. 右クリックでノード/リンクの編集・削除・複製など
4. ツールバーから保存・読み込み・エクスポート等を実行
5. Undo/Redoで編集履歴を管理
## 生成AI向け補足
- ノード・リンクのCSV仕様や、ノードのメモ・グループ名・色分けなどのカスタマイズが可能です。
- エクスポートしたHTMLはD3.jsのみで動作し、外部サーバ不要で閲覧できます。
- ノード位置・状態・メモ・グループ情報などもJSON/HTMLに含まれます。
---
この説明は生成AIによるデータ作成・変換のための参考仕様としてご利用ください。
ノード・リンクのCSV
ノードCSV
id,name,shape,state,group,hidden
1,構想,circle,0,1,false
1_1,map検討（コレ）,circle,0,1,false
2,プロンプト生成,circle,0,4,false
3,NotebookLM,circle,1,5,false
4,資料,circle,1,3,false
5,生成AI,circle,0,5,false
6,生成物,circle,0,7,false
4_2,model,rect,0,2,false
4_1,サイト,rect,0,2,false
12,資料2,rect,0,2,false
0,マップについて,circle,0,0,false
8,別工程へ,circle,0,8,false
リンクCSV
source,target,value,color,type
1,1_1,1,#999999,1
3,4,1
1_1,3,1,#999999,2
3,2,1
2,5,1,#999999,1
6,3,1,#57a0ff,2
5,6,1,#999999
12,4,1,#ff0000
6,8,1,#999999,1
4_1,4,1,#999999,1
4_2,4,1,#999999,1
1_1,4,1,#999999,2
グループCSV
group,name,memo
0,メタ情報,このマップ自体に関する情報や、凡例など。
1,基本構想フェーズ,プロジェクト全体の基本的なアイデアや目的を検討するフェーズです。
2,参考資料タイプ,NotebookLMなどに取り込む資料の種類を表します。CADモデルやウェブサイトなど。
3,資料そのもの,具体的な資料アイテム。
4,中間生成プロセス,プロンプトの生成など、最終成果物に至るまでの中間的なプロセス。
5,AIツール群,NotebookLMや他の生成AIなど、利用するAIツール。
7,成果物カテゴリ,最終的に作成されるものの種類。
8,外部連携,他の工程やシステムへの出力・連携を示す。
# ノードCSV・リンクCSV フォーマット仕様
このプロジェクトでは、D3.jsグラフのノード・リンク情報をCSV形式で管理します。
## ノードCSVフォーマット
1行目はヘッダー行です。
| 列名 | 必須 | 説明 |
|--------|------|----------------------------------------|
| id | ○ | ノードの一意なID（英数字推奨） |
| name | | ノードの表示名 |
| shape | | ノード形状（circle, rect, diamond, triangle）|
| state | | ノードの状態（1:動く, 0:固定） |
| group | | グループ番号（整数） |
| hidden | | 非表示フラグ（true/false, 1/0） |
### 例
```
id,name,shape,state,group,hidden
A,ページA,circle,1,1,false
B,ページB,rect,0,1,false
C,ページC,diamond,1,2,true
```
- `id`は必須です。
- `shape`は省略時`circle`になります。
- `state`は省略時`1`（動く）です。
- `group`は省略時`0`です。
- `hidden`は省略時`false`です。
## リンクCSVフォーマット
1行目はヘッダー行です。
| 列名 | 必須 | 説明 |
|--------|------|----------------------------------------|
| source | ○ | リンク元ノードのID |
| target | ○ | リンク先ノードのID |
| value | | リンクの重み（数値, 省略時1） |
| color | | 線の色（#RRGGBB形式など, 省略時#999999）|
| type | | 矢印タイプ（0:なし, 1:終点, 2:両端） |
### 例
```
source,target,value,color,type
A,B,1,#999999,2
C,D,2,#ff0000,1
A,C,0.5,,0
```
- `source`と`target`は必須です。
- `value`は省略時`1`です。
- `color`は省略時`#999999`です。
- `type`は省略時`0`（矢印なし）です。
## グループCSVフォーマット
1行目はヘッダー行です。
| 列名 | 必須 | 説明 |
|--------|------|----------------------------------------|
| group | ○ | グループ番号（整数、ノードのgroupと対応） |
| name | | グループ名 |
| memo | | グループの説明・メモ |
### 例
```
group,name,memo
1,基本構想フェーズ,プロジェクト全体の基本的なアイデアや目的
2,参考資料タイプ,NotebookLMなどに取り込む資料の種類
3,資料そのもの,具体的な資料アイテム
```
- `group`は必須です（ノードCSVのgroup列と対応）。
- `name`や`memo`は省略可能です。
## 注意事項
- 1行目は必ずヘッダー行にしてください。
- 空行は無視されます。
- ノードIDはリンクのsource/targetと一致させてください。
AIへの情報
メタ情報として記載
操作
保存
「環境を保存」でブラウザにデータが保存されます。
indexedDBに保存(d3js_force_env)されているので、削除で初期化されます。
「ダウンロード」と「読み込み」でローカルデータとやり取りが行えます。
(json形式のファイルでやり取りします。)
保存ファイル
{
"settings": {
"forceXStrength": "0.02",
"forceYStrength": "0.02",
"linkDistanceScale": "1.0",
"nodeRadius": "14",
"nodeFontSize": "15",
"linkWidthScale": "1.0"
},
"nodes": [
{
"id": "1",
"name": "構想",
"group": "1",
"shape": "circle",
"state": 0,
"x": 166.13672623129935,
"y": 61.26583118897188,
"vx": 0,
"vy": 0,
"fx": 166.13672623129935,
"fy": 61.26583118897188,
"memo": "取り組む対象について",
"hidden": false
},
{
"id": "1_1",
"name": "map検討（コレ）",
"group": "1",
"shape": "circle",
"state": 0,
"x": 165.66887554834904,
"y": 145.24143286597348,
"vx": 0,
"vy": 0,
"fx": 165.66887554834904,
"fy": 145.24143286597348,
"memo": "B102(本ページ)で依存関係を定義して、JSONファイルを作成",
"hidden": false
},
{
"id": "2",
"name": "プロンプト生成",
"group": "4",
"shape": "circle",
"state": 0,
"x": 296.834968719006,
"y": 293.1946516327094,
"vx": 0,
"vy": 0,
"fx": 296.834968719006,
"fy": 293.1946516327094,
"memo": "プロンプトを生成AIに入力。",
"hidden": false
},
{
"id": "3",
"name": "NotebookLM",
"group": "5",
"shape": "circle",
"state": 1,
"x": 300.878971478859,
"y": 206.46452407159612,
"vx": -0.000051426130065576614,
"vy": 0.000023060265570176787,
"fx": null,
"fy": null,
"memo": "目的のものを作成するためのプロンプトを作成する指示を行う。",
"hidden": false
},
{
"id": "4",
"name": "資料",
"group": "3",
"shape": "circle",
"state": 1,
"x": 315.682042472174,
"y": 134.92063777777997,
"vx": 0.00003240270695432802,
"vy": 0.00002246556203559756,
"fx": null,
"fy": null,
"memo": "必要な資料を集める。サイトだと便利。",
"hidden": false
},
{
"id": "5",
"name": "生成AI",
"group": "5",
"shape": "circle",
"state": 0,
"x": 397.0263526272893,
"y": 272.6139198366094,
"vx": 0,
"vy": 0,
"fx": 397.0263526272893,
"fy": 272.6139198366094,
"memo": "生成AIでコードなどを作成してもらいます。画や音楽もありえます。",
"hidden": false
},
{
"id": "6",
"name": "生成物",
"group": "7",
"shape": "circle",
"state": 0,
"x": 403.15812705138467,
"y": 189.1496093520963,
"vx": 0,
"vy": 0,
"fx": 403.15812705138467,
"fy": 189.1496093520963,
"memo": "対象物を作成します。\n現状だと、コードで作成する場合がほとんど。",
"hidden": false
},
{
"id": "4_2",
"name": "model",
"group": "2",
"shape": "rect",
"state": 0,
"x": 372.11910754274305,
"y": 51.273579195675346,
"vx": 0,
"vy": 0,
"fx": 372.11910754274305,
"fy": 51.273579195675346,
"memo": "CADなど",
"hidden": false
},
{
"id": "4_1",
"name": "サイト",
"group": "2",
"shape": "rect",
"state": 0,
"x": 260.5148271083527,
"y": 44.68438974668152,
"vx": 0,
"vy": 0,
"fx": 260.5148271083527,
"fy": 44.68438974668152,
"memo": "参照するウェブサイト",
"hidden": false
},
{
"id": "12",
"name": "資料2",
"group": "2",
"shape": "rect",
"state": 0,
"x": 328.547507318306,
"y": 26.627360893188165,
"vx": 0,
"vy": 0,
"fx": 328.547507318306,
"fy": 26.627360893188165,
"memo": "ローカルの資料など",
"hidden": false
},
{
"id": "0",
"name": "マップについて",
"group": "0",
"shape": "circle",
"state": 0,
"x": 50,
"y": 50,
"vx": 0,
"vy": 0,
"fx": 50,
"fy": 50,
"memo": "この依存関係マップ自体や操作方法など",
"hidden": false
},
{
"id": "8",
"name": "別工程へ",
"group": "8",
"shape": "circle",
"state": 0,
"x": 478.547507318306,
"y": 189.1496093520963,
"vx": 0,
"vy": 0,
"fx": 478.547507318306,
"fy": 189.1496093520963,
"memo": "",
"hidden": false
}
],
"links": [
{
"source": "1",
"target": "1_1",
"value": 1,
"color": "#999999",
"type": 1
},
{
"source": "3",
"target": "4",
"value": 1,
"color": "#999999",
"type": 0
},
{
"source": "1_1",
"target": "3",
"value": 1,
"color": "#999999",
"type": 2
},
{
"source": "3",
"target": "2",
"value": 1,
"color": "#999999",
"type": 0
},
{
"source": "2",
"target": "5",
"value": 1,
"color": "#999999",
"type": 1
},
{
"source": "6",
"target": "3",
"value": 1,
"color": "#57a0ff",
"type": 2
},
{
"source": "5",
"target": "6",
"value": 1,
"color": "#999999",
"type": 0
},
{
"source": "12",
"target": "4",
"value": 1,
"color": "#ff0000",
"type": 0
},
{
"source": "6",
"target": "8",
"value": 1,
"color": "#999999",
"type": 1
},
{
"source": "4_1",
"target": "4",
"value": 1,
"color": "#999999",
"type": 1
},
{
"source": "4_2",
"target": "4",
"value": 1,
"color": "#999999",
"type": 1
},
{
"source": "1_1",
"target": "4",
"value": 1,
"color": "#999999",
"type": 2
}
],
"nodesCsv": "id,name,shape,state,group,hidden\n1,構想,circle,0,1,false\n1_1,map検討（コレ）,circle,0,1,false\n2,プロンプト生成,circle,0,4,false\n3,NotebookLM,circle,1,5,false\n4,資料,circle,1,3,false\n5,生成AI,circle,0,5,false\n6,生成物,circle,0,7,false\n4_2,model,rect,0,2,false\n4_1,サイト,rect,0,2,false\n12,資料2,rect,0,2,false\n0,マップについて,circle,0,0,false\n8,別工程へ,circle,0,8,false",
"linksCsv": "source,target,value,color,type\n1,1_1,1,#999999,1\n3,4,1\n1_1,3,1,#999999,2\n3,2,1\n2,5,1,#999999,1\n6,3,1,#57a0ff,2\n5,6,1,#999999\n12,4,1,#ff0000\n6,8,1,#999999,1\n4_1,4,1,#999999,1\n4_2,4,1,#999999,1\n1_1,4,1,#999999,2",
"dataPanelSize": {
"width": 664,
"height": 273,
"left": "346px",
"top": "9px",
"nodesTextareaWidth": "376px",
"nodesTextareaHeight": "213px",
"linksTextareaWidth": "210px",
"linksTextareaHeight": "203px",
"toolbarLeft": "-158px",
"toolbarTop": "440px"
},
"canvasBgColor": "#ffffff",
"modelTitle": "依存関係マップ",
"version": 1,
"groupNames": {
"0": {
"name": "メタ情報",
"memo": "このマップ自体に関する情報や、凡例など。"
},
"1": {
"name": "基本構想フェーズ",
"memo": "プロジェクト全体の基本的なアイデアや目的を検討するフェーズです。"
},
"2": {
"name": "参考資料タイプ",
"memo": "NotebookLMなどに取り込む資料の種類を表します。CADモデルやウェブサイトなど。"
},
"3": {
"name": "資料そのもの",
"memo": "具体的な資料アイテム。"
},
"4": {
"name": "中間生成プロセス",
"memo": "プロンプトの生成など、最終成果物に至るまでの中間的なプロセス。"
},
"5": {
"name": "AIツール群",
"memo": "NotebookLMや他の生成AIなど、利用するAIツール。"
},
"7": {
"name": "成果物カテゴリ",
"memo": "最終的に作成されるものの種類。"
},
"8": {
"name": "外部連携",
"memo": "他の工程やシステムへの出力・連携を示す。"
}
}
}
生成時の仕様
NotebookLMで作成する場合、足りない情報があります。
他の設定情報やUI情報
"settings": {
"forceXStrength": "0.02",
"forceYStrength": "0.02",
"linkDistanceScale": "1.0",
"nodeRadius": "14",
"nodeFontSize": "15",
"linkWidthScale": "1.0"
},
// "x", "y", "vx", "vy", "fx", "fy" などの位置情報
"nodes": [
{
"id": "hoop_stress",
"name": "フープ応力",
"group": "1",
"shape": "circle",
"state": 0,
"x": 193.79911041259766,
"y": 64.2232117652893,
"vx": 0,
"vy": 0,
"fx": 193.79911041259766,
"fy": 64.2232117652893,
"memo": "\"円筒にかかる周方向の引張応力 [1",
"hidden": false
},
htmlファイル（保留）
B102_force_r1.zip
サンプル
NotebookLMでサイトを検証を行ってもらい、サンプルを作成してもらいました。
ノード入力欄
id,name,shape,state,group,memo,hidden
InvoluteGear_m1_z15_b5,"インボリュート歯車 (m=1, z=15,0,rect,0,false,"提示された仕様を持つインボリュート歯車モデル（高さ5mm, m=1mm, z=15, α=20deg）。",false
Module_1mm,"モジュール (m=1 mm)",circle,0,2,"歯車の大きさを決める基本的な単位 [34,false, 72]。ソースにはモジュールの標準値リストがある [34, 71]。",false
NumTeeth_15,"歯数 (z=15)",circle,0,2,"歯車の歯の数 [38]。ピッチ円直径d=m*zの計算に用いられる [33,false,false
Height_5mm,"歯幅 (b=5 mm)",circle,0,2,"歯車の軸方向の幅。図面に寸法として記載される項目 [90,false,false
PressureAngle_20deg,"圧力角 (α=20度)",circle,0,2,"インボリュート歯形を定義する角度 [33,false, 31, 53-56, 65, 66, 74]。",false
PitchDiameter_15mm,"ピッチ円直径 (d=15 mm)",circle,0,2,"歯車の基準となる円の直径 [38,false, 72]。仕様値15mmはm=1, z=15から計算される値と一致 (1*15=15)。",false
RootDiameter_12_5mm,"歯底円直径 (df=12.5 mm)",circle,0,2,"歯底円の直径 [38,false, 歯底円直径df, ピッチ円直径d, 歯末たけha, 歯底たけhfには関係式がある [73]。図面に寸法として記載される項目 [90, 91]。",false
TransversePitch_3_142mm,"円周ピッチ (P=3.142 mm)",circle,0,2,"ピッチ円上の歯と歯のピッチ [38,false, 34, 72]。仕様値3.142mmはm=1から計算される値π*1≒3.14159...に近い。",false
InvoluteProfile,"インボリュート歯形",circle,0,3,"インボリュート曲線に基づいて形成される歯の形状 [34,false,false
InvoluteGearConcept,"インボリュート歯車 (概念)",circle,0,3,"インボリュート歯形を持つ歯車で、動力伝達に広く用いられる代表的な歯車 [34,false,false
GearMaterial,"歯車材料",circle,0,6,"歯車の製造に用いられる材料 [84,false,false
ManufacturingMethod_Cutting,"製造方法 (切削)",circle,0,6,"歯車の一般的な製造方法の一つ。ホブ盤や歯車形削り盤などが使用される [78]。今回の仕様の歯車にも適用可能と考えられる。",false
Standard_JIS_ISO,"歯車規格 (JIS/ISO)",circle,0,4,"歯車の定義、用語、記号、寸法、計算式などがJISやISOによって標準化されている [38,false,false
TechnicalData_GearCalc,"歯車技術資料 (計算式)",circle,0,4,"歯車の設計や計算に必要な情報や計算式。ソースには様々な歯車の計算方法が記載されている [例: 30,false, 73]。パラメータ間の関係式を含む。",false
0,map概要,circle,0,0,,false
リンクデータ
source,target,value,color,type
InvoluteGear_m1_z15_b5,Module_1mm,1,#999999,1
InvoluteGear_m1_z15_b5,NumTeeth_15,1,#999999
InvoluteGear_m1_z15_b5,Height_5mm,1,#999999,1
InvoluteGear_m1_z15_b5,PressureAngle_20deg,1,#999999,1
InvoluteGear_m1_z15_b5,PitchDiameter_15mm,1,#999999,1
InvoluteGear_m1_z15_b5,RootDiameter_12_5mm,1,#999999,1
InvoluteGear_m1_z15_b5,TransversePitch_3_142mm,1,#999999,1
InvoluteGear_m1_z15_b5,InvoluteGearConcept,1,#000000,1
InvoluteGear_m1_z15_b5,GearMaterial,1,#000000,1
InvoluteGear_m1_z15_b5,ManufacturingMethod_Cutting,1,#000000,1
Module_1mm,TechnicalData_GearCalc,1,#000000,1
NumTeeth_15,TechnicalData_GearCalc,1,#000000,1
PressureAngle_20deg,TechnicalData_GearCalc,1,#000000,1
PitchDiameter_15mm,Module_1mm,1,#000000,1
PitchDiameter_15mm,NumTeeth_15,1,#000000,1
TransversePitch_3_142mm,Module_1mm,1,#000000,1, 72],1
InvoluteGearConcept,InvoluteProfile,1,#000000,1
InvoluteProfile,PressureAngle_20deg,1,#000000,1
TechnicalData_GearCalc,Standard_JIS_ISO,1,#000000,1
InvoluteGearConcept,Standard_JIS_ISO,1,#000000,1
InvoluteProfile,Standard_JIS_ISO,1,#000000,1
ManufacturingMethod_Cutting,TechnicalData_GearCalc,1,#000000,1
このサイトをnotebookLMに読ませて、サイトの依存関係マップデータを作成しました。
利用シーン検討
情報整理以外の使い方の検討です。
CADモデル作成
途中
予定
生成AIがデータ作成しやすい方式の探索
ノード位置の復元
レイヤーの導入
範囲選択
リンク線種の追加
レシポンシブ対応
コメント