Skip to content
Get packs

Guide · Agent skill

How to use the JSON Canvas Editor agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The json-canvas skill teaches an AI agent the structure of JSON Canvas files, the format behind Obsidian's visual canvases. It is useful for Obsidian users who want an agent to produce mind maps, flowcharts or project boards as .canvas files, and for anyone editing an existing canvas without breaking its JSON. After this guide you will know what the skill does, how to install it, how to phrase requests so it triggers, and how to check the output.

JSON Canvas Editorkepano/obsidian-skills · MIT

Quick start

  1. 1Download the ZIP. Download the json-canvas skill ZIP from this page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
  3. 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
  4. 4Describe the canvas you want. Ask for a mind map, flowchart or canvas, and name the file or path if you are editing an existing one.
  5. 5Open the .canvas file. View the output in Obsidian or another app that reads JSON Canvas files.
  6. 6Review the layout. Check positions, overlaps and connections, since validation does not guarantee how the layout looks.

What an agent skill is and what json-canvas changes

An agent skill is a folder of instructions and reference files that an AI agent loads when a task matches the skill's description. The json-canvas skill is defined in a SKILL.md file and includes a references/EXAMPLES.md file with full canvas examples.

Without the skill, an agent may guess at the JSON Canvas format. With it, the agent follows the structure of the JSON Canvas 1.0 spec: top-level nodes and edges arrays, node types text, file, link and group, and edges that connect nodes through fromNode and toNode IDs.

  • Creates new .canvas files with correctly structured nodes and edges
  • Adds nodes to existing canvases without overlapping existing ones
  • Edits text, position or color of existing nodes and edges
  • Checks that IDs are unique and edge references point to real nodes

Install the json-canvas skill

Download the ZIP for the skill from this page and unzip it. For a personal setup, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/ (unzip the downloaded folder here)
  • Project only: .claude/skills/ inside your project folder
  • Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with natural requests

You do not need to name the skill. The skill's description covers requests involving .canvas files, visual canvases, mind maps, flowcharts, and Canvas files in Obsidian. Say what you want the canvas to show and where it should go.

Be specific about the content and the file. Mention the file name or path when you are editing an existing canvas so the agent reads the right file.

  • Create a mind map of my project ideas as a .canvas file in my vault.
  • Make a flowchart of the onboarding process in Notes/Onboarding.canvas.
  • Add a group called Research to the canvas Projects.canvas and move the three notes into it.
  • Connect the Budget node to the Forecast node with the label feeds into.

Check the output and what it needs

The skill asks the agent to validate its work: parse the JSON, confirm every ID is unique, and confirm every fromNode and toNode resolves to an existing node. The agent is also asked to check required fields for each node type and allowed values for sides, ends and colors.

To view the result you need Obsidian or another app that reads JSON Canvas files. The skill does not run scripts and does not use the network. Validation is a check on the file's structure, so still open the canvas and look at the layout, because overlaps or rendering issues can still occur.

  • Requires: Obsidian, or another app that reads JSON Canvas files, to view output
  • Runs scripts: no
  • Uses network: no

Safety notes and tips for better results

Because the skill runs no scripts and uses no network access, the risk is mainly to your files. Keep a backup or use version control before letting an agent edit an existing canvas, and review the diff afterwards.

For best results, give the agent a layout target such as left-to-right or top-down, and ask it to use groups for sections. Newlines in text nodes must be written as \n in the JSON, not the literal characters backslash and n, which Obsidian would display as text.

  • Back up existing .canvas files before large edits
  • Ask for a layout direction and grouping up front
  • Open the result in Obsidian to confirm it renders as intended
  • Use presets 1 to 6 for colors or a hex value such as #FF0000
{"nodes": [], "edges": []}

What people use it for

  • Turn meeting notes into a flowchart of decisions and owners as a .canvas file
  • Generate a mind map of a research topic with text nodes branching from a central idea
  • Maintain a project board by adding grouped sections and linked note nodes to an existing canvas
  • Build a link board that places external URLs as link nodes beside related notes

Frequently asked questions

How do I install the json-canvas skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.

What do I need to use the json-canvas skill?

You need Obsidian or another app that reads JSON Canvas files to view the output. The skill runs no scripts and uses no network.

Is the json-canvas skill free?

The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms.

Can the skill create mind maps and flowcharts in Obsidian?

Yes. When you ask for a mind map, flowchart or canvas, the agent writes a .canvas file with text, file, link or group nodes connected by edges.

Why does my canvas show a backslash and n instead of a line break?

The text was written with a literal \\n instead of \n. In a JSON string, \n is the line break, and the skill notes that Obsidian renders the literal form as characters.

Are there alternatives if I need a different diagram tool?

The output is specific to the JSON Canvas format, so other apps may not open it. If you need drawing or diagramming in other tools, this skill is not the right fit.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use json-canvas if you work in Obsidian and want an AI agent to generate or safely edit .canvas files, including mind maps and flowcharts. Pick a different tool if you need diagrams that must open in other applications, or if you need guaranteed layouts without reviewing the result.

Download the skill