canvas

JSON Canvas ビジュアライザー

クイックスタート： id、type、x、y、width、height を指定してノードを定義します → 100px のグリッド上でレイアウトを計画します → fromNode/toNode でエッジを接続します → 色（1～6）を適用します → ```canvas フェンスで囲みます。原点（0,0）は左上で、X 軸は右向き、Y 軸は下向きです。Obsidian Canvas と互換性があります。

---

重要な構文ルール

1. 構造の形式

{
  "nodes": [
    {"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
  ],
  "edges": []
}

2. ノードの種類

種類	必須フィールド	用途
text	text	任意のテキストコンテンツを表示します
file	file	外部ファイルを参照します
link	url	外部 URL を参照します
group	label	グループ化するための視覚的なコンテナーです

3. 必須のノード属性

すべてのノードには、id、type、x、y、width、height が必要です。

4. 色のプリセット

値	色
"1"	赤
"2"	オレンジ
"3"	黄色
"4"	緑
"5"	シアン
"6"	紫

5. エッジの接続

{
  "id": "e1",
  "fromNode": "n1",
  "fromSide": "right",
  "toNode": "n2", 
  "toSide": "left",
  "toEnd": "arrow"
}

6. 座標系

• 原点（0,0）は左上です
• X は右に向かって増加します
• Y は下に向かって増加します

7. ノードのサイズ設定

• ノードの寸法を設定するときは、テキストの内容を考慮してください
• 複数行のテキストをすべて表示するには、より高い高さが必要です
• 長い単語がはみ出さないようにするには、より広い幅が必要です

---

よくある問題

問題	解決策
ノードが重なっている	間隔を広げます（100px 以上）
エッジが表示されない	fromNode/toNode がノード ID と一致することを確認します
無効な JSON	引用符とカンマを確認します
無効な ID	a-z、A-Z、0-9、-、_ のみを使用します

---

出力形式

```canvas
{
  "nodes": [...],
  "edges": [...]
}
```

---

関連ファイル

構文の詳細や高度な機能については、以下のリファレンスを参照してください。

• syntax.md — 属性の完全なリファレンス：ノードの種類、エッジのプロパティ、グループのスタイル設定、高度な例

リソース

• JSON Canvas 仕様