json-canvas
作成者 kepanojson-canvas は、Obsidianスタイルのボード向けに有効な `.canvas` ファイルを作成・編集するためのスキルです。nodes、edges、IDs、座標、groups、references などを正しい構造で扱えます。
このスキルの評価は 76/100 で、ディレクトリ掲載候補として十分に堅実です。エージェントが起動条件を把握しやすく、ファイル形式の具体的な指針と実例に基づく実行支援があるため、汎用的なプロンプトよりも手探りを減らせます。一方で、支援の中心はツールや強制的な検証ではなく、主にドキュメントベースのガイダンスです。
- frontmatter と説明文の段階で用途が明確で、呼び出し条件が強い点が特長です。Obsidian の `.canvas` ファイル作成・編集、ビジュアルキャンバス、マインドマップ、フローチャート、Canvas への言及を明示的に対象にしています。
- 実務に役立つ形式ガイドがあります。`SKILL.md` では最上位の `nodes` / `edges` 構造、必須フィールド、ID ルール、接続の妥当性確認、キャンバス作成・ノード追加・ノード接続といった一般的な編集フローを説明しています。
- 具体例による段階的な理解を促せる構成です。`references/EXAMPLES.md` には、接続されたテキストノードやグループ化されたボード風レイアウトの完全な JSON 例があり、エージェントが妥当な構造を素早く推測しやすくなっています。
- 実装面の支援はドキュメントに限られます。スクリプト、install コマンド、ルールファイル、検証ヘルパーは含まれていないため、エージェント自身が説明文を正確な編集内容へ落とし込む必要があります。
- ワークフローの深さにはややばらつきがあります。構造上のシグナルを見る限り、明示的なフローや制約の記述は限定的で、エッジケースや判断ルールの網羅性は、文書の分量ほど強固ではない可能性があります。
json-canvasスキルの概要
json-canvasスキルでできること
json-canvas スキルは、Obsidian系のビジュアルボードで使われる JSON Canvas 1.0 構造に準拠した .canvas ファイルを、AIエージェントが作成・編集できるようにするためのスキルです。価値の中心は「図をざっくり描くこと」ではなく、正しい ID・座標・参照関係を持つ有効な nodes と edges の JSON を生成し、微妙な破損を起こさずにきちんと開けるファイルに仕上げられる点にあります。
json-canvasを入れるべき人
この json-canvas skill は、作りたい結果像がすでに決まっているユーザーに向いています。たとえば、マインドマップ、フローチャート、プロジェクトボード、コンセプトマップ、ノートキャンバスなどを作りたいものの、スキーマを手で書きたくない場合に最適です。とくに Obsidian を使っている人、リポジトリで .canvas ファイルを管理している人、単発の見た目提案よりも既存キャンバスへの再現性ある AI 編集を求める人には相性が良いです。
汎用プロンプトより優れている理由
普通のプロンプトでも箱や矢印の説明はできますが、実際に重要なフォーマット要件を落としがちです。たとえば、一意な16文字の16進ID、正しい fromNode と toNode の参照、ノード同士が重ならない配置、text ノードと group ノードの違いなどです。json-canvas スキルは、エージェントに対して具体的な出力形式と実例を与えられるため、生成後の修正作業をかなり減らせます。
導入前に知っておきたいこと
このスキルは、意図的に用途を絞っています。得意なのは .canvas ファイルの構造と、そこでよくある編集ワークフローの支援です。フル機能のビジュアルレイアウトエンジン、意味論ベースの作図ツール、自動デザイン最適化ツールの代わりにはなりません。主な目的が洗練された見た目や多様な図表形式へのエクスポートなら、json-canvas for Diagramming は少し低レベルに感じるはずです。逆に、正しい canvas JSON を素早く作りたいなら、有力な選択肢です。
json-canvasスキルの使い方
インストール時の前提と最初に読むべき場所
スキル対応環境で json-canvas install を使う場合は、kepano/obsidian-skills リポジトリからこのスキルを追加し、その後 skills/json-canvas/SKILL.md を最初に、skills/json-canvas/references/EXAMPLES.md を次に読むのがおすすめです。この2ファイルが実務上の中核です。前者には必要な構造とワークフローがまとまっており、後者にはそのまま参照・模倣しやすい完全なサンプルがあります。
json-canvasがうまく機能するために必要な入力
json-canvas usage の出来は、依頼内容の具体性で大きく変わります。少なくとも次を伝えると精度が上がります。
- 対象のファイルパス、または既存の
.canvas内容 - 新規作成か、既存編集か
- 必要なノード種別（
textやgroupなど） - 左から右へのフロー、kanban列構成のような大まかなレイアウト意図
- ノード間の接続関係
- サイズや余白に関する希望
弱い依頼は「プロジェクト用のキャンバスを作って」です。より良い依頼は、次のようなものです。
「新しい .canvas を作成し、To Do・In Progress・Done というラベルの3つの group 列を追加してください。各列は 300x500、列間は 50px 空け、最初の2つの group 内に text のタスクノードを3つ追加してください。」
曖昧な目的を強いプロンプトに変える方法
json-canvas guide として質の高い結果を得るには、生成だけでなく検証まで依頼するのが有効です。強いプロンプトの型は次のとおりです。
- まず目的を平易に書く
- 新規作成か修正かを明示する
- 必要なノード構成と関係性を定義する
- 最終出力前に JSON と edge 参照を検証するよう求める
例:
「Use the json-canvas skill to create a new .canvas file for a product launch plan. Add one central text node, four supporting text nodes around it, connect each support node to the center, keep 100px spacing to avoid overlap, generate unique 16-character hex IDs, and return valid JSON only.」
json-canvas運用で時間を節約できる実践的なコツ
より良い json-canvas usage のためには、最初から盛り込みすぎず、シンプルに始めて段階的に詰めていくのが効率的です。
- まずは構造的に正しい最小構成のキャンバスを作らせる
- 開く、または内容を確認する
- その後、1回に1つずつ変更を依頼する。たとえばノード追加、グループ化、再接続、再配置など
既存ファイルを編集する場合は、何かを追加する前に現在の ID を解析するよう伝えてください。最もよくある破損は、ID の衝突と、存在しないノードを指す edge です。レイアウトが重要なら、余白や間隔のルールも明示した方が安全です。そうしないと JSON 自体は正しくても、見た目が散らかった状態になりがちです。
json-canvasスキルのFAQ
json-canvasは初心者にも向いていますか？
はい。キャンバスに何を入れたいかがある程度わかっているなら、初心者にも使いやすいです。このスキルはスキーマの手探りを大きく減らしてくれるので、仕様を暗記していなくても有効な .canvas ファイルを作れます。ただし、図の論理そのものをこれから考える段階なら、やや不向きです。得意なのは構造を正しく符号化することであり、情報設計全体をゼロから考えてくれるわけではありません。
どんなときに通常のAIプロンプトではなくjson-canvasを使うべきですか？
出力が実際に動く .canvas ファイルである必要があるとき、特に既存キャンバスを編集するときは json-canvas を使うべきです。汎用プロンプトは構成のアイデア出しには向きますが、正確さが重要な場面ではこのスキルの方が有利です。たとえば、一意な ID、妥当な配列、実在ノードへの参照、Obsidian互換のフォーマットといった点です。
json-canvasはあらゆる図表作成に対応できますか？
いいえ。json-canvas for Diagramming は、ノードとエッジ中心のキャンバス、シンプルなボード、ノート連携のビジュアル整理に向いています。一方で、BPMN ツール、見栄え重視のプレゼン用グラフィック、高度な自動レイアウトシステムの代替にはなりません。幅広い図表規格や細かなスタイリング制御が必要なら、別ツールで作成し、必要な場合だけ変換する方が現実的です。
主な制約やミスマッチなケースは何ですか？
対象が .canvas ファイルでない場合、強い自動レイアウト最適化が必要な場合、あるいは真のソースを Mermaid・Excalidraw・スプレッドシートなど別形式に置いておきたい場合は、このスキルは見送った方がよいです。また、「いい感じにして」のような曖昧な依頼も不向きです。このスキルは、構造と配置意図が明示されているほど本領を発揮します。
json-canvasスキルを改善するには
より強い構造情報を最初に渡す
出力品質を最も大きく引き上げるのは、最初に与える構造情報の質です。必要なノード名、ノード間の接続、空間配置のパターンを具体的に伝えてください。たとえば「hub-and-spoke」「3列ボード」「左から右へのタイムライン」のように言えば、エージェントは当て推量ではなく、意図に沿ってノードを配置しやすくなります。
よくある失敗パターンを防ぐ
json-canvas で起きやすい問題の多くは、構造というより機械的なミスです。
- ID の重複
- 存在しないノードを指す edge
- 座標の重なり
type、x、y、width、heightのような必須フィールドの欠落
ファイルを返す前に、すべての ID と参照を検証するようエージェントに指示してください。既存キャンバスを変更する場合は、新しいノードや edge が必要なケースを除き、既存 ID を維持するよう伝えるのが安全です。
初回出力のあとで段階的に詰める
最初の結果は完成品ではなく、土台と考えるのがコツです。そのうえで、次のように1レイヤーずつ改善していきます。
- 間隔と整列を調整する
- group を追加する
- ラベルやテキスト内容を磨く
- 接続を追加・削除する
この進め方は、最初から情報量の多い完成版キャンバスを一発で作らせるよりうまくいきます。大きく生成した後よりも、初期段階の方がビジュアル構造のミスを見つけやすいからです。
例とリポジトリ内パターンを意図的に使う
json-canvas skill の結果を改善したいなら、すべてを抽象的に説明するのではなく、references/EXAMPLES.md の形を積極的に借りるのが有効です。作りたいものがプロジェクトボードに近いなら、group ベースのパターンに沿うよう依頼してください。コンセプトマップに近いなら、シンプルな text ノード接続パターンを指定すると効果的です。リポジトリ内で使われている自然なパターンを再利用する方が、JSON は整いやすく、互換性の想定外トラブルも起きにくくなります。