# Build JSON Canvas Diagrams

JSON Canvas files are hard to edit by hand without breaking IDs or links. This skill guides creation, updates, and validation for Obsidian-compatible canvases.

## Install

```bash
npx skillstore add kepano/json-canvas
```

## Metadata

- Status: approved
- Slug: kepano-json-canvas
- Skillstore revision: r1
- Version status: missing
- Tree hash: 14855e57a340d24c91560e3179f57b9e2ad45b4b645a47b1b057a9de1c5d4a93
- Author: kepano
- GitHub username: kepano
- License: MIT
- Repository: https://github.com/kepano/obsidian-skills/tree/main/skills/json-canvas
- Ref: b8ca75d2c0a7e7102978993058777d82b8ab2610
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, external\_commands
- Quality score: 74
- Public page: https://skillstore.pages.dev/skills/kepano-json-canvas
- Manifest: https://skillstore.pages.dev/api/skills/kepano-json-canvas/manifest

## Capabilities

- Create new .canvas structures with nodes, edges, groups, and link nodes.
- Add or edit text, file, link, and group nodes with required fields.
- Connect nodes with edges, labels, sides, arrow ends, and colors.
- Generate 16-character hex IDs and avoid duplicate node or edge IDs.
- Validate edge references, node types, colors, and JSON parseability.
- Apply layout guidance for spacing, grouping, and grid alignment.

## Use Cases

- Plan a Knowledge Map: Create a connected canvas that organizes ideas, notes, and relationships for a new topic.
- Build a Project Board: Generate grouped sections for tasks, status lanes, and dependencies in an Obsidian canvas.
- Organize Research Sources: Map papers, meeting notes, diagrams, and web references into a connected research workspace.

## Prompt Templates

### Create a Simple Canvas

```
Create a JSON Canvas mind map for this topic: [topic]. Include one central idea, three supporting ideas, and clear connecting labels.
```

### Add Nodes to a Canvas

```
Open my existing .canvas file and add these items as new nodes: [items]. Place them without overlap and connect them to related nodes.
```

### Convert an Outline

```
Convert this outline into a JSON Canvas layout: [outline]. Use groups for major sections and edges for dependencies or sequence.
```

### Repair and Validate a Canvas

```
Review this .canvas file for duplicate IDs, dangling edges, invalid node fields, malformed text strings, and layout collisions. Fix issues and summarize changes.
```

## Limitations

- Does not render or preview Canvas visually by itself.
- Does not guarantee compatibility with tools beyond the JSON Canvas specification.
- Requires access to the target .canvas file before editing existing canvases.
- Does not fetch remote links or verify external URL content.

## Best Practices

- Describe the desired layout, node types, and relationships before generating a large canvas.
- Validate IDs and edge references after every edit to avoid broken connections.
- Use consistent spacing and group bounds so the canvas remains readable in Obsidian.

## Anti Patterns

- Do not paste multiline text without escaping line breaks for JSON strings.
- Do not create edges before confirming both node IDs exist.
- Do not reuse example IDs when adding multiple nodes or edges.

## Security Audit

- Audited at: 2026-07-06T18:20:11.412\+00:00
- Summary: All static findings are false positives caused by Markdown backticks, JSON examples, documentation URLs, and ordinary canvas validation terms. The skill is documentation-only and provides guidance for creating JSON Canvas files; no executable scripts, network requests, system reconnaissance, or prompt injection attempts were found.

## Stats

- Views: 245
- Downloads: 19
- Favorites: 1
- Popularity score: 0