メニュー
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | json-canvas |
| description | Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian. |
A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:
{
"nodes": [],
"edges": []
}
nodes (optional): Array of node objectsedges (optional): Array of edge objects connecting nodes.canvas file with the base structure {"nodes": [], "edges": []}"6f0ad84f44ce9c17")id, type, x, y, width, heightfromNode and toNodefromNode/toNode values exist in the nodes array.canvas filex, y) that avoids overlapping existing nodes (leave 50-100px spacing)nodes arrayfromNode and toNode to the source and target IDsfromSide/toSide (top, right, bottom, left) for anchor pointslabel for descriptive text on the edgefromNode and toNode reference existing node IDsNodes are objects placed on the canvas. Array order determines z-index: first node = bottom layer, last node = top layer.
| Attribute | Required | Type | Description |
|---|---|---|---|
id | Yes | string | Unique 16-char hex identifier |
type | Yes | string | text, file, link, or group |
x | Yes | integer | X position in pixels |
y | Yes | integer | Y position in pixels |
width | Yes | integer | Width in pixels |
height | Yes | integer | Height in pixels |
color | No | canvasColor | Preset "1"-"6" or hex (e.g., "#FF0000") |
{
"id": "6f0ad84f44ce9c17",
"type": "text",
"x": 0,
"y": 0,
"width": 400,
"height": 200,
"text": "# Hello World\n\nThis is **Markdown** content."
}
Newline pitfall: Use \n for line breaks. Do not use the literal \\n.
{
"id": "a1b2c3d4e5f67890",
"type": "file",
"x": 500,
"y": 0,
"width": 400,
"height": 300,
"file": "Attachments/diagram.png"
}
Optional subpath field: link to a heading or block (starts with #).
{
"id": "c3d4e5f678901234",
"type": "link",
"x": 1000,
"y": 0,
"width": 400,
"height": 200,
"url": "https://obsidian.md"
}
Groups are visual containers for organizing other nodes. Position child nodes inside the group's bounds.
{
"id": "d4e5f6789012345a",
"type": "group",
"x": -50,
"y": -50,
"width": 1000,
"height": 600,
"label": "Project Overview",
"color": "4"
}
Edges connect nodes via fromNode and toNode IDs.
| Attribute | Required | Default | Description |
|---|---|---|---|
id | Yes | - | Unique identifier |
fromNode | Yes | - | Source node ID |
fromSide | No | - | top, right, bottom, or left |
fromEnd | No | none | none or arrow |
toNode | Yes | - | Target node ID |
toSide | No | - | top, right, bottom, or left |
toEnd | No | arrow | none or arrow |
color | No | - | Line color |
label | No | - | Text label |
{
"id": "0123456789abcdef",
"fromNode": "6f0ad84f44ce9c17",
"fromSide": "right",
"toNode": "a1b2c3d4e5f67890",
"toSide": "left",
"toEnd": "arrow",
"label": "leads to"
}
| Preset | Color |
|---|---|
"1" | Red |
"2" | Orange |
"3" | Yellow |
"4" | Green |
"5" | Cyan |
"6" | Purple |
Or use hex: "#FF0000"
Generate 16-character lowercase hexadecimal strings (64-bit random value):
"6f0ad84f44ce9c17"
"a3b2c1d0e9f8a7b6"
x increases right, y increases down; position is the top-left corner| Node Type | Suggested Width | Suggested Height |
|---|---|---|
| Small text | 200-300 | 80-150 |
| Medium text | 300-450 | 150-300 |
| Large text | 400-600 | 300-500 |
| File preview | 300-500 | 200-400 |
| Link preview | 250-400 | 100-200 |
After creating or editing a canvas file, verify:
id values are unique across both nodes and edgesfromNode and toNode references an existing node IDtext, file, url)type is one of: text, file, link, groupfromSide/toSide values are one of: top, right, bottom, leftfromEnd/toEnd values are one of: none, arrowUse Firecrawl for markdown-first web scraping, crawling, and site mapping. Use when: "firecrawl", "crawl docs", "scrape website to markdown", "map website", "rag crawl".
ThoughtMap pipeline, output interpretation, and MCP vector search tools. Use when: "thoughtmap", "thought clusters", "search thoughts", "what am I thinking about", "semantic search notes", "knowledge base", "vector search", "find context in notes", "cluster distances", "topic map", "thinking patterns".
Create and edit Obsidian Bases (.base files) with views, filters, formulas, and summaries. Use when working with .base files, creating database-like views of notes, or when the user mentions Bases, table views, card views, filters, or formulas in Obsidian.
Interact with Obsidian vaults using the Obsidian CLI to read, create, search, and manage notes, tasks, and properties. Also supports plugin and theme development. Use when the user asks to interact with their Obsidian vault from the command line, manage notes, search vault content, or develop and debug Obsidian plugins and themes.
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
Daily log conventions for agent memory between sessions. Use when: "daily log", "today's note", "what happened today", "session start", "check context".