markdown-viewer/canvas

canvas は何をしますか？

JSON形式を使用して、自由配置ノードによる空間図を作成します。コンセプトマップ、ナレッジグラフ、x/y座標の精密制御が必要な計画ボードに最適です。

使用方法

キャンバスは、```canvas コードブロック内にJSON形式で定義します。

基本構造

{
  "nodes": [
    {
      "id": "node1",
      "x": 100,
      "y": 200,
      "width": 150,
      "height": 80,
      "text": "ノード1",
      "color": "#4A90D9",
      "shape": "rectangle"
    },
    {
      "id": "node2",
      "x": 400,
      "y": 200,
      "width": 150,
      "height": 80,
      "text": "ノード2",
      "color": "#50C878",
      "shape": "rounded-rectangle"
    }
  ],
  "edges": [
    {
      "from": "node1",
      "to": "node2",
      "label": "接続",
      "style": "solid"
    }
  ]
}

ノードプロパティ

プロパティ	型	必須	説明
id	文字列	はい	ノードの一意識別子
x	数値	はい	キャンバス上のX座標（ピクセル）
y	数値	はい	キャンバス上のY座標（ピクセル）
width	数値	いいえ	ノードの幅（デフォルト: 150）
height	数値	いいえ	ノードの高さ（デフォルト: 80）
text	文字列	はい	ノードに表示するテキスト
color	文字列	いいえ	ノードの背景色（CSSカラー値）
shape	文字列	いいえ	ノードの形状（rectangle、rounded-rectangle、circle、diamond）

エッジプロパティ

プロパティ	型	必須	説明
from	文字列	はい	ソースノードのID
to	文字列	はい	ターゲットノードのID
label	文字列	いいえ	エッジに表示するラベル
style	文字列	いいえ	エッジのスタイル（solid、dashed、dotted）
color	文字列	いいえ	エッジの色（CSSカラー値）

例

コンセプトマップ

{
  "nodes": [
    { "id": "ai", "x": 250, "y": 50, "text": "人工知能", "color": "#FF6B6B" },
    { "id": "ml", "x": 100, "y": 200, "text": "機械学習", "color": "#4ECDC4" },
    { "id": "dl", "x": 400, "y": 200, "text": "深層学習", "color": "#45B7D1" },
    { "id": "nlp", "x": 50, "y": 350, "text": "自然言語処理", "color": "#96CEB4" },
    { "id": "cv", "x": 250, "y": 350, "text": "コンピュータビジョン", "color": "#FFEAA7" },
    { "id": "rl", "x": 450, "y": 350, "text": "強化学習", "color": "#DDA0DD" }
  ],
  "edges": [
    { "from": "ai", "to": "ml", "label": "サブセット" },
    { "from": "ai", "to": "dl", "label": "サブセット" },
    { "from": "ml", "to": "nlp", "label": "応用" },
    { "from": "dl", "to": "cv", "label": "応用" },
    { "from": "ml", "to": "rl", "label": "関連" }
  ]
}

計画ボード

{
  "nodes": [
    { "id": "idea", "x": 50, "y": 100, "text": "アイデア発想", "color": "#FFD93D", "shape": "diamond" },
    { "id": "proto", "x": 300, "y": 100, "text": "プロトタイピング", "color": "#6BCB77" },
    { "id": "test", "x": 550, "y": 100, "text": "テスト", "color": "#4D96FF" },
    { "id": "launch", "x": 800, "y": 100, "text": "ローンチ", "color": "#FF6B6B", "shape": "rounded-rectangle" }
  ],
  "edges": [
    { "from": "idea", "to": "proto", "label": "設計" },
    { "from": "proto", "to": "test", "label": "検証" },
    { "from": "test", "to": "launch", "label": "デプロイ" }
  ]
}

対応プラットフォーム

• Claude Code
• Cursor
• Codex
• その他、マークダウンレンダリングをサポートするAIエージェント