obsidian-canvas-creator

Obsidian Canvas クリエイター

テキストコンテンツを、マインドマップや自由形式のレイアウトに対応した構造化 Obsidian Canvas ファイルに変換します。

このスキルを使う場面

• ユーザーがテキストからキャンバス、マインドマップ、または視覚的な図表を作成するよう求めている
• ユーザーが情報を空間的に整理したいと考えている
• ユーザーが「Obsidian Canvas」や類似の可視化ツールに言及している
• 構造化されたコンテンツ（記事、メモ、アウトライン）を視覚形式に変換する

基本的なワークフロー

1. コンテンツを分析する

入力されたコンテンツを読み、理解します。

• 主なトピックと階層的な関係を特定する
• 重要なポイント、事実、補足情報を抽出する
• 既存の構造（見出し、リスト、セクション）を確認する

2. レイアウトの種類を決める

ユーザーに選択してもらうか、文脈から判断します。

マインドマップレイアウト：

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

自由形式レイアウト：

• 自由な配置
• 柔軟な関係性
• 複数の接続タイプ
• 適している用途：複雑なネットワーク、非階層的なコンテンツ、自由な配置

3. 構造を計画する

マインドマップの場合：

• 中心となる概念（ルートノード）を特定する
• 主な枝（主要トピック）をマッピングする
• 二次的な枝（サブトピック）を整理する
• リーフノード（詳細情報）を配置する

自由形式の場合：

• 関連する概念をグループ化する
• 接続パターンを特定する
• 空間的なゾーンを計画する
• 視覚的な流れを考慮する

4. キャンバスを生成する

Canvas 仕様に従って JSON を作成します。

ノードの作成：

• 一意な 8〜12 文字の 16 進数 ID を割り当てる
• コンテンツの長さに応じて適切な寸法を設定する
• 一貫性のある配色を適用する
• 座標が重ならないようにする

エッジの作成：

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

グループ化（任意）：

• 関連するノードを囲む視覚的なコンテナーを作成する
• 控えめな背景色を使用する
• 内容を説明するラベルを追加する

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

マインドマップのレイアウト計算：

詳しいアルゴリズムについては、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. 絵文字の禁止：

   • ノードのテキストに絵文字を使用しない
   • 視覚的な区別には、代わりに色分けまたはテキストラベルを使用する

例

シンプルなマインドマップのリクエスト

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

手順：

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 が重複している（すべて一意である必要があります）
• ノードが接続されていない（意図的に孤立させる場合を除く）