json-canvas
作成者 MarsWang42json-canvas は、Obsidian やそのほかの JSON Canvas 対応アプリ向けに、有効な .canvas ファイルをエージェントが作成・編集するのを支援するスキルです。マインドマップ、フローチャート、軽量な図解ワークフローに必要なノード、エッジ、グループ、位置情報、レイヤー順を、構造的に正しい形で生成できます。
このスキルの評価は 68/100 です。ディレクトリ掲載は可能ですが、強く実務向けというより、参照中心のスキルとして案内するのが適切です。リポジトリには一定の実体があり、SKILL.md は長文で frontmatter も有効、複数セクションやコードフェンスも備え、JSON Canvas の構造やノード種別を具体的にカバーしています。一方で、導入判断に必要な明確さは中程度にとどまります。補助ファイルがなく、install command も示されておらず、ドキュメント自体を超える段階的な実行パターンの裏付けも限定的です。
- frontmatter の説明から用途を想起しやすく、.canvas ファイル、Obsidian Canvas、マインドマップ、フローチャートでこのスキルを使うべきことが明確です。
- 中核ドキュメントが充実しており、13k 文字超の SKILL.md に多数の見出しとコードフェンスがあり、有効な JSON Canvas ファイルを作るためのスキーマレベルの具体的な指針を得られます。
- 汎用的なプロンプトよりも領域特化の実用性があり、JSON Canvas の構造、ノード種別、エッジ、グループ、順序ルールまで説明しているため、.canvas データの生成や編集にそのまま活かせます.
- 運用面の明確さは限定的です。単一の SKILL.md 以外に、scripts、references、resources、rules、metadata、examples といった補助アーティファクトが確認できません。
- 導入判断の材料はやや薄く、SKILL.md に install command がなく、確認できるワークフローや制約のシグナルも控えめです。
json-canvasスキルの概要
json-canvasスキルでできること
json-canvasスキルは、Obsidianや同種のダイアグラムツールで使われる JSON Canvas 形式の有効な .canvas ファイルを、エージェントが作成・編集できるようにするためのスキルです。役割は単に「見栄えのよい図を描く」ことではなく、ノード、エッジ、グループ、座標、サイズ、レイヤー順を含む、Canvasアプリが実際に開ける構造的に正しい canvas JSON を出力することにあります。
json-canvasを導入すべき人
この json-canvas skill は、ボードに載せたい内容はすでに決まっている一方で、スキーマを手作業で書きたくないユーザーに最適です。ノート整理、マインドマップ、フローチャート、アーキテクチャのラフ図、リサーチボード、軽量な図解ワークフローなどに向いており、文章で説明するだけでなく、実際に使える .canvas ファイルを成果物として必要とするケースに適しています。
汎用プロンプトより優れている理由
通常のプロンプトでも形式はほぼ合っているように見えますが、必須フィールド、ノード種別、配列構造を取りこぼしがちです。json-canvas が有用なのは、JSON Canvas のオブジェクトモデルを中心に据えている点にあります。具体的には、トップレベルの nodes と edges、4種類のノード型（text、file、link、group）、さらにノード配列の順序によって z-order が決まるといった実務上の注意点まで含めて扱います。Obsidian で使う図を作りたいのであって、見せかけのJSONを生成したいわけではないなら、後処理の手間をかなり減らせます。
json-canvasスキルの使い方
json-canvasを導入する場面と呼び出しどころ
エージェント基盤が GitHub skills に対応しているなら、通常のスキル導入フローで MarsWang42/OrbitOS から json-canvas を追加します。リポジトリ上で確認できるのは SKILL.md のみなので、補助スクリプトやバリデータ付きというより、形式ガイドに絞ったコンパクトなスキルだと考えてください。タスク内で .canvas、JSON Canvas、Obsidian Canvas、あるいは編集可能な canvas JSON を最終成果物とするビジュアル図解が明示されているときに呼び出すのが適切です。
json-canvasをうまく使える入力とは
このスキルは、単なるテーマではなく、図の意図が与えられたときに力を発揮します。よい入力には通常、次のような情報が含まれます。
- 表現したいノード一覧やセクション構成
- ノード間の関係
- 希望するノード型:
text、file、link、group - おおまかなレイアウト方向: left-to-right、top-down、clustered
- 関連ノードをグループで視覚的に囲むべきか
fileノードやlinkノードを使う場合のファイル参照や URL
弱いプロンプト: 「プロジェクト用のcanvasを作って」
より強いプロンプト: 「プロジェクトのロードマップ用に .canvas を作成して。3つのグループは planning、build、launch。タスクは text ノード、ドキュメントURLは link ノードを使い、タスク依存関係は edges で接続。グループは左から右に並べて。」
曖昧な依頼を実用的なプロンプトに変える方法
信頼できる json-canvas の活用には、内容と構造の両方を指定することが重要です。実用的なプロンプトの型は次のとおりです。
- ボードの目的を定義する。
- ノードのカテゴリを列挙する。
- 重要なエッジを示す。
- レイアウトのルールを伝える。
- 有効な
.canvasJSON のみを返すよう依頼する。
例:
「Use the json-canvas skill to generate valid .canvas JSON for diagramming a hiring pipeline. Include groups for sourcing, screening, interview, and offer. Add text nodes for each stage, link nodes for ATS and policy docs, and edges showing candidate flow. Keep nodes spaced for readability and place groups in process order.」
最初に読むべきものと運用のコツ
まず EN/.agents/skills/json-canvas/SKILL.md を確認してください。特に注目すべきポイントは次の4点です。
- トップレベルのファイル構造
- ノード型と必須フィールド
- エッジの表現方法
- ノード配列順による z-index の制御
実務上の進め方としては、次の手順が有効です。
- まずノード一覧を下書きする。
- 最小構成の canvas を生成する。
- canvas アプリで実際に開く。
- 2回目のパスでレイアウト、グルーピング、不足リンクを調整する。
最初から完成度の高い最終ボードを一発で求めるより、この進め方のほうがうまくいきます。理由は、見た目の調整に入る前に、形式が正しいかどうかを先に検証しやすいからです。
json-canvasスキルのFAQ
json-canvasはObsidian専用の図解スキルですか？
いいえ。json-canvas for Diagramming は、対象アプリが JSON Canvas 仕様を読める環境であれば有効です。Obsidian は代表的な用途ですが、本質的な価値は Obsidian 固有の装飾ではなく、標準ベースの .canvas 生成にあります。
LLMに直接JSONを書かせるより良いですか？
最終成果物を確実に読み込ませたいなら、通常はこちらのほうが有利です。汎用プロンプトでも小さな例なら成立しますが、このスキルはモデルの出力を実際の canvas スキーマとノードの意味論に寄せてくれます。ノード型が複数ある場合、グループ化された領域がある場合、エッジ数が多い場合にはこの差が効いてきます。
json-canvasは初心者にも向いていますか？
はい、作りたいボードの内容を自分で理解していれば使えます。仕様を深く知っている必要はありませんが、何をノードにし、どう関係づけるかは明確に説明できる必要があります。まだノードやフローを列挙できない段階でも何かしら生成はされますが、結果は手作業で大きく修正する前提になりやすいです。
json-canvasスキルを使わないほうがよい場面は？
静的画像、Mermaid図、Excalidraw export、あるいはプレーンテキストのアウトラインだけで十分なら不要です。また、基本の JSON Canvas 形式では表現できない、アプリ固有の高度な挙動に依存する図にもあまり向いていません。
json-canvasスキルを改善して使う方法
テーマだけでなくボード設計を渡す
もっとも大きな品質向上は、ノードとエッジを明示的に指定することから生まれます。たとえば「システムアーキテクチャのcanvasを作って」ではなく、次の情報を渡してください。
- services
- dependencies
- external links
- grouping logic
- preferred reading order
これにより、妥当性だけでなくレイアウト判断も改善され、実運用で使える json-canvas guide になります。
よくあるjson-canvasの失敗を防ぐ
典型的な問題は、必須属性の欠落、曖昧なグルーピング、読みにくいレイアウトです。これを減らすには、次のように依頼すると効果的です。
- 有効な
.canvasJSON のみを返すよう求める - 一意な node ID を要求する
- おおよその canvas の流れ方向を指定する
- 「必ず接続する edge」と任意の視覚リンクを分けて伝える
- グループが空間的にノードを内包すべきかを明記する
ボード自体は開けるのに見た目がおかしい場合、構造は正しくても座標配置が悪いだけ、ということがよくあります。
より良い出力のために2段階で回す
よい json-canvas install かどうかは、効率よく反復できるかにも左右されます。このスキルは段階的に使うと真価を発揮します。
- pass 1: スキーマに沿った nodes と edges を作る
- pass 2: 座標、幅、高さ、groups を調整する
- pass 3: 視覚的な重なり順が重要なら nodes の並び順を入れ替える
ノード配列の順序が z-index に影響するため、グループを背面に置きたいのか、ラベルを前面に出したいのかは、明示して依頼するのが大切です。
初稿のあとに何を依頼すべきか
最初の生成後は、全体を作り直すより、狙いを絞った修正依頼のほうが結果がよくなります。たとえば次のような指示です。
- “Convert these URLs to
linknodes.” - “Wrap these five nodes in a
groupnode.” - “Reposition nodes to reduce edge crossings.”
- “Keep the same IDs but add missing dependency edges.”
- “Put groups on lower z-index than text nodes.”
このような制約付きのフォローアップは、ボード全体をゼロから再生成するより安定して改善しやすいです。