---
title: JSON Canvas
description: Loob ja muudab JSON Canvase faile sõlmede, servade ja gruppidega.
category: Productivity
sublabel: Obsidian
author: kepano (Steph Ango)
tags: 
license: MIT
source: https://github.com/kepano/obsidian-skills
---

# JSON Canvas oskus

## Failistruktuur

Canvas fail (`.canvas`) sisaldab kahte tipptaseme massiivi vastavalt [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/):

```json
{
  "nodes": [],
  "edges": []
}
```

- `nodes` (valikuline): Sõlmeobjektide massiiv
- `edges` (valikuline): Servade massiiv, mis ühendab sõlmi

## Levinud töövood

### 1. Loo uus canvas

1. Loo `.canvas` fail baasstruktuuriga `{"nodes": [], "edges": []}`
2. Genereeri iga sõlme jaoks unikaalne 16-tähemärgiline hex ID (nt `"6f0ad84f44ce9c17"`)
3. Lisa sõlmed kohustuslike väljadega: `id`, `type`, `x`, `y`, `width`, `height`
4. Lisa servad, mis viitavad kehtivatele sõlme ID-dele `fromNode` ja `toNode` kaudu
5. **Valideeri**: Parseeri JSON, et kinnitada kehtivust. Kontrolli, et kõik `fromNode`/`toNode` väärtused eksisteerivad sõlmede massiivis

### 2. Lisa sõlm olemasolevale canvasele

1. Loe ja parseeri olemasolev `.canvas` fail
2. Genereeri unikaalne ID, mis ei põrku olemasolevate sõlme ega serva ID-dega
3. Vali positsioon (`x`, `y`), mis väldib olemasolevate sõlmede kattumist (jäta 50–100px vahet)
4. Lisa uus sõlmeobjekt `nodes` massiivi lõppu
5. Valikuliselt lisa servi, mis ühendavad uue sõlme olemasolevatega
6. **Valideeri**: Kinnita, et kõik ID-d on unikaalsed ja kõik servaviited lahenevad olemasolevatele sõlmedele

### 3. Ühenda kaks sõlme

1. Tuvasta lähte- ja sihtsõlme ID-d
2. Genereeri unikaalne serva ID
3. Sea `fromNode` ja `toNode` lähte- ja siht-ID-dele
4. Valikuliselt sea `fromSide`/`toSide` (top, right, bottom, left) ankurpunktide jaoks
5. Valikuliselt sea `label` kirjeldava teksti jaoks serval
6. Lisa serv `edges` massiivi lõppu
7. **Valideeri**: Kinnita, et nii `fromNode` kui `toNode` viitavad olemasolevatele sõlme ID-dele

### 4. Muuda olemasolevat canvas’t

1. Loe ja parseeri `.canvas` fail JSON-ina
2. Leia sihtsõlm või serv `id` järgi
3. Muuda soovitud atribuute (tekst, positsioon, värv jne)
4. Kirjuta uuendatud JSON faili tagasi
5. **Valideeri**: Kontrolli pärast muutmist uuesti kõigi ID-de unikaalsust ja servaviidete terviklikkust

## Sõlmed

Sõlmed on objektid, mis on paigutatud canvasele. Massiivi järjekord määrab z-indeksi: esimene sõlm = alumine kiht, viimane sõlm = ülemine kiht.

### Üldised sõlme atribuudid

| Atribuut | Kohustuslik | Tüüp | Kirjeldus |
|-----------|----------|------|-------------|
| `id` | Jah | string | Unikaalne 16-tähemärgiline hex identifikaator |
| `type` | Jah | string | `text`, `file`, `link` või `group` |
| `x` | Jah | integer | X positsioon pikslites |
| `y` | Jah | integer | Y positsioon pikslites |
| `width` | Jah | integer | Laius pikslites |
| `height` | Jah | integer | Kõrgus pikslites |
| `color` | Ei | canvasColor | Eelseadistus `"1"`–`"6"` või hex (nt `"#FF0000"`) |

### Tekstisõlmed

| Atribuut | Kohustuslik | Tüüp | Kirjeldus |
|-----------|----------|------|-------------|
| `text` | Jah | string | Tavaline tekst Markdown süntaksiga |

```json
{
  "id": "6f0ad84f44ce9c17",
  "type": "text",
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 200,
  "text": "# Hello World\n\nThis is **Markdown** content."
}
```

**Reavahetuse lõks**: Kasuta JSON stringides `\n` reavahetuste jaoks. Ära **mitte** kasuta sõnasõnalist `\\n` — Obsidian renderdab selle märkidena `\` ja `n`.

### Failisõlmed

| Atribuut | Kohustuslik | Tüüp | Kirjeldus |
|-----------|----------|------|-------------|
| `file` | Jah | string | Tee failini süsteemis |
| `subpath` | Ei | string | Link pealkirjale või plokile (algab `#`-ga) |

```json
{
  "id": "a1b2c3d4e5f67890",
  "type": "file",
  "x": 500,
  "y": 0,
  "width": 400,
  "height": 300,
  "file": "Attachments/diagram.png"
}
```

### Lingisõlmed

| Atribuut | Kohustuslik | Tüüp | Kirjeldus |
|-----------|----------|------|-------------|
| `url` | Jah | string | Väline URL |

```json
{
  "id": "c3d4e5f678901234",
  "type": "link",
  "x": 1000,
  "y": 0,
  "width": 400,
  "height": 200,
  "url": "https://obsidian.md"
}
```

### Grupisõlmed

Grupid on visuaalsed konteinerid teiste sõlmede organiseerimiseks. Paiguta alamad sõlmed grupi piiridesse.

| Atribuut | Kohustuslik | Tüüp | Kirjeldus |
|-----------|----------|------|-------------|
| `label` | Ei | string | Tekstisilt grupile |
| `background` | Ei | string | Tee taustapildini |
| `backgroundStyle` | Ei | string | `cover`, `ratio` või `repeat` |

```json
{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50,
  "y": -50,
  "width": 1000,
  "height": 600,
  "label": "Project Overview",
  "color": "4"
}
```

## Servad

Servad ühendavad sõlmi `fromNode` ja `toNode` ID-de kaudu.

| Atribuut | Kohustuslik | Tüüp | Vaikimisi | Kirjeldus |
|-----------|----------|------|---------|-------------|
| `id` | Jah | string | - | Unikaalne identifikaator |
| `fromNode` | Jah | string | - | Lähte sõlme ID |
| `fromSide` | Ei | string | - | `top`, `right`, `bottom` või `left` |
| `fromEnd` | Ei | string | `none` | `none` või `arrow` |
| `toNode` | Jah | string | - | Sihtsõlme ID |
| `toSide` | Ei | string | - | `top`, `right`, `bottom` või `left` |
| `toEnd` | Ei | string | `arrow` | `none` või `arrow` |
| `color` | Ei | canvasColor | - | Joone värv |
| `label` | Ei | string | - | Tekstisilt |

```json
{
  "id": "0123456789abcdef",
  "fromNode": "6f0ad84f44ce9c17",
  "fromSide": "right",
  "toNode": "a1b2c3d4e5f67890",
  "toSide": "left",
  "toEnd": "arrow",
  "label": "leads to"
}
```

## Värvid

`canvasColor` tüüp aktsepteerib kas hex stringi või eelseadistatud numbrit:

| Eelseadistus | Värv |
|--------|-------|
| `"1"` | Punane |
| `"2"` | Oranž |
| `"3"` | Kollane |
| `"4"` | Roheline |
| `"5"` | Tsüaan |
| `"6"` | Lilla |

Eelseadistatud värviväärtused on teadlikult määratlemata — rakendused kasutavad oma brändivärve.

## ID genereerimine

Genereeri 16-tähemärgilisi väiketähelisi heksadesimaalseid stringe (64-bitine juhuslik väärtus):

```
"6f0ad84f44ce9c17"
"a3b2c1d0e9f8a7b6"
```

## Paigutuse juhised

- Koordinaadid võivad olla negatiivsed (canvas ulatub lõpmatusse)
- `x` kasvab paremale, `y` kasvab alla; positsioon on ülemine-vasak nurk
- Jäta sõlmede vahele 50–100px; jäta gruppidesse 20–50px polsterdust
- Joonda võrgule (10 või 20 kordseid) puhtamate paigutuste jaoks

| Sõlme tüüp | Soovitatud laius | Soovitatud kõrgus |
|-----------|-----------------|------------------|
| Väike tekst | 200–300 | 80–150 |
| Keskmine tekst | 300–450 | 150–300 |
| Suur tekst | 400–600 | 300–500 |
| Faili eelvaade | 300–500 | 200–400 |
| Lingi eelvaade | 250–400 | 100–200 |

## Valideerimise kontrollnimekiri

Pärast canvas faili loomist või muutmist kontrolli:

1. Kõik `id` väärtused on unikaalsed nii sõlmede kui servade peal
2. Iga `fromNode` ja `toNode` viitab olemasolevale sõlme ID-le
3. Kohustuslikud väljad on olemas iga sõlmetüübi jaoks (`text` tekstisõlmedele, `file` failisõlmedele, `url` lingisõlmedele)
4. `type` on üks: `text`, `file`, `link`, `group`
5. `fromSide`/`toSide` väärtused on üks: `top`, `right`, `bottom`, `left`
6. `fromEnd`/`toEnd` väärtused on üks: `none`, `arrow`
7. Värvieelseadistused on `"1"` kuni `"6"` või kehtiv hex (nt `"#FF0000"`)
8. JSON on kehtiv ja parseeritav

Kui valideerimine ebaõnnestub, kontrolli duplikaat-ID-sid, rippuvaid servaviiteid või vigaseid JSON stringe (eriti escape’imata reavahetusi tekstisisus).

## Täielikud näited

Vt [references/EXAMPLES.md](references/EXAMPLES.md) täielike canvas näidete jaoks, sh mind map’id, projektitahvlid, uurimiscanvas’ed ja vooskeemid.

## Viited

- [JSON Canvas Spec 1.0](https://jsoncanvas.org/spec/1.0/)
- [JSON Canvas GitHub](https://github.com/obsidianmd/jsoncanvas)