Obsidian Canvas Creator

テキストコンテンツをMindMapおよびフリーフォームレイアウトに対応した構造化されたObsidian Canvasファイルに変換します。

このスキルを使用するタイミング

• ユーザーがテキストからキャンバス、マインドマップ、または視覚的なダイアグラムの作成をリクエストする
• ユーザーが情報を空間的に整理したい
• ユーザーが「Obsidian Canvas」または同様の可視化ツールについて言及する
• 構造化コンテンツ（記事、ノート、アウトラインなど）を視覚的形式に変換する

基本ワークフロー

1. コンテンツを分析

入力コンテンツを読み込んで理解します：

• メインのトピックと階層的な関係を特定
• 重要なポイント、事実、および支持する詳細を抽出
• 既存の構造（見出し、リスト、セクションなど）を記録

2. レイアウトタイプを決定

ユーザーに選択するか、コンテキストから推測するよう依頼します：

MindMapレイアウト：

• 中心からの放射状の構造
• 親子関係
• 明確な階層構造
• 最適な用途：ブレインストーミング、トピック探索、階層的コンテンツ

フリーフォームレイアウト：

• カスタムポジショニング
• 柔軟な関係性
• 複数の接続タイプ
• 最適な用途：複雑なネットワーク、非階層的コンテンツ、カスタムアレンジメント

3. 構造を計画

MindMapの場合：

• 中心的なコンセプト（ルートノード）を特定
• プライマリブランチ（メイントピック）をマッピング
• セカンダリブランチ（サブトピック）を整理
• リーフノード（詳細情報）を配置

フリーフォームの場合：

• 関連するコンセプトをグループ化
• 接続パターンを特定
• 空間ゾーンを計画
• 視覚的フローを検討

4. キャンバスを生成

Canvas仕様に従うJSONを作成します：

ノードの作成：

• 8～12文字のユニークな16進数IDを割り当てる
• コンテンツの長さに応じて適切な寸法を設定
• 一貫したカラースキームを適用
• 座標の重複がないことを確保

エッジの作成：

• 親子関係を接続
• 適切な矢印スタイルを使用
• 複雑な関係にはラベルを追加
• ラインスタイルを選択（階層には直線、相互参照には曲線）

グループ化（オプション）：

• 関連ノード用の視覚的コンテナを作成
• 微妙な背景色を使用
• 説明的なラベルを追加

5. レイアウトアルゴリズムを適用

MindMapレイアウト計算：

詳細なアルゴリズムについては references/layout-algorithms.md を参照してください。主な原則：

• ルートを(0, 0)の中心に配置
• プライマリノードを放射状に分散
• セカンダリノードをシブリング数に基づいてスペース
• 最小スペース維持：320px水平、200px垂直

フリーフォームレイアウトの原則：

• 論理的グループ分けから開始
• グループを明確に分離して配置
• グループ間を曲線エッジで接続
• キャンバス全体の視覚的バランスを調整

6. 検証と出力

出力前に：

検証チェックリスト：

• すべてのノードがユニークなIDを持つ
• 座標の重複がない（距離がノード寸法+スペース以上であることを確認）
• すべてのエッジが有効なノードIDを参照
• グループ（ある場合）がラベル付きである
• 色が一貫した形式（16進数またはプリセット番号）を使用
• JSONが適切にエスケープされている（中国語引用符：「」シングル、『』ダブル）

出力形式：

• 完全で有効なJSON Canvasファイル
• 追加の説明テキストなし
• Obsidianに直接インポート可能

ノードサイジングガイドライン

テキスト長ベースのサイジング：

• 短いテキスト（30文字未満）：220 × 100 px
• 中程度のテキスト（30～60文字）：260 × 120 px
• 長いテキスト（60～100文字）：320 × 140 px
• 非常に長いテキスト（100文字以上）：320 × 180 px

カラースキーム

プリセット色（推奨）：

• "1" - 赤（警告、重要）
• "2" - オレンジ（アクションアイテム）
• "3" - 黄色（質問、ノート）
• "4" - 緑（ポジティブ、完了）
• "5" - シアン（情報、詳細）
• "6" - 紫（コンセプト、抽象的）

カスタム16進数色： ブランド統一性または特定のテーマに使用。常に大文字形式を使用："#4A90E2"

重要なルール

1. 引用符の処理：

   • 中国語ダブルクォート → 『』
   • 中国語シングルクォート → 「」
   • 英語ダブルクォート → \"

2. ID生成：

   • 8～12文字のランダムな16進数文字列
   • すべてのノードとエッジ全体でユニークである必要がある

3. Z-インデックスの順序：

   • グループを最初に出力（下層）
   • その次にサブグループ
   • 最後にテキスト/リンクノード（上層）

4. スペース要件：

   • ノード中心間の最小水平間隔：320px
   • ノード中心間の最小垂直間隔：200px
   • 計算時にノード寸法を考慮

5. JSON構造：

   • トップレベルは nodes と edges 配列のみを含む
   • 追加のラッピングオブジェクトなし
   • 出力にコメントなし

6. 絵文字なし：

   • ノードテキストで絵文字記号を使用しない
   • 視覚的区別にはカラーコーディングまたはテキストラベルを代わりに使用

例

シンプルなMindMapリクエスト

ユーザー：「太陽系の惑星についてのマインドマップを作成して」

プロセス：

1. 中心を特定：「太陽系」
2. プライマリブランチ：内惑星、外惑星、矮惑星
3. セカンダリノード：重要な事実を持つ個々の惑星
4. 放射状レイアウトを適用
5. 適切なスペースでJSONを生成

フリーフォームコンテンツリクエスト

ユーザー：「この記事をキャンバスに変換して」+【記事テキスト】

プロセス：

1. 記事の構造を抽出（序論、本文セクション、結論）
2. 重要なコンセプトと関係性を特定
3. 関連セクションを空間的にグループ化
4. ラベル付きエッジで接続
5. 明確なゾーンを持つフリーフォームレイアウトを適用

リファレンスドキュメント

• Canvas仕様：references/canvas-spec.md - 完全なJSON Canvas形式仕様
• レイアウトアルゴリズム：references/layout-algorithms.md - 両方のレイアウトタイプの詳細なポジショニングアルゴリズム

以下の場合にこれらのリファレンスを読み込みます：

• エッジケースの仕様詳細が必要
• 複雑なレイアウト計算を実装する
• 検証エラーのトラブルシューティング

高品質キャンバスのためのヒント

1. テキストを簡潔に保つ：各ノードはスキャン可能であるべき（2行以下が推奨）
2. 階層を使用：重要性と関係性でグループ化
3. キャンバスをバランス：クラスタリングを避けるためにノードを分散
4. 戦略的な色の使用：単なる装飾ではなく、意味をエンコードするために色を使用
5. 意味のある接続：関係を明確にする接続のみを追加
6. Obsidianでテスト：出力が正しく開くことを確認

避けるべき一般的な落とし穴

• ノードの重複（常に距離をチェック）
• 一貫性のない引用符エスケープ（JSONパースを破壊）
• グループラベルなし（サイドバーナビゲーションの問題を引き起こす）
• ノード内のテキストが多すぎる（長いコンテンツはファイルノードを使用）
• 重複するID（各IDはユニークである必要がある）
• 接続されていないノード（意図的な島でない限り）