Skill JSON Canvas

Structure de fichier

Un fichier canvas (.canvas) contient deux tableaux de haut niveau suivant la spécification JSON Canvas 1.0 :

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

• nodes (optionnel) : Tableau d'objets nœud
• edges (optionnel) : Tableau d'objets arête reliant les nœuds

Flux de travail courants

1. Créer un nouveau canvas

1. Créer un fichier .canvas avec la structure de base {"nodes": [], "edges": []}
2. Générer des identifiants uniques en hexadécimal 16 caractères pour chaque nœud (par exemple, "6f0ad84f44ce9c17")
3. Ajouter des nœuds avec les champs requis : id, type, x, y, width, height
4. Ajouter des arêtes qui référencent les ID de nœud valides via fromNode et toNode
5. Valider : Parser le JSON pour confirmer sa validité. Vérifier que toutes les valeurs fromNode/toNode existent dans le tableau nodes

2. Ajouter un nœud à un canvas existant

1. Lire et parser le fichier .canvas existant
2. Générer un ID unique qui ne crée pas de collision avec les ID de nœud ou d'arête existants
3. Choisir une position (x, y) qui évite le chevauchement des nœuds existants (laisser 50-100px d'espacement)
4. Ajouter le nouvel objet nœud au tableau nodes
5. Optionnellement ajouter des arêtes reliant le nouveau nœud aux nœuds existants
6. Valider : Confirmer que tous les ID sont uniques et que toutes les références d'arête se résolvent en nœuds existants

3. Connecter deux nœuds

1. Identifier les ID du nœud source et cible
2. Générer un ID d'arête unique
3. Définir fromNode et toNode sur les ID source et cible
4. Optionnellement définir fromSide/toSide (top, right, bottom, left) pour les points d'ancrage
5. Optionnellement définir label pour un texte descriptif sur l'arête
6. Ajouter l'arête au tableau edges
7. Valider : Confirmer que fromNode et toNode référencent des ID de nœud existants

4. Éditer un canvas existant

1. Lire et parser le fichier .canvas en JSON
2. Localiser le nœud ou l'arête cible par id
3. Modifier les attributs souhaités (texte, position, couleur, etc.)
4. Écrire le JSON mis à jour dans le fichier
5. Valider : Re-vérifier l'unicité de tous les ID et l'intégrité des références d'arête après édition

Nœuds

Les nœuds sont des objets placés sur le canvas. L'ordre du tableau détermine le z-index : premier nœud = couche inférieure, dernier nœud = couche supérieure.

Attributs génériques des nœuds

Nœuds de texte

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

Pièges des retours à la ligne : Utiliser \n pour les sauts de ligne dans les chaînes JSON. Ne pas utiliser le littéral \\n -- Obsidian le rend comme les caractères \ et n.

Nœuds de fichier

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

Nœuds de lien

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

Nœuds de groupe

Les groupes sont des conteneurs visuels pour organiser d'autres nœuds. Positionner les nœuds enfants à l'intérieur des limites du groupe.

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

Arêtes

Les arêtes relient les nœuds via les ID fromNode et toNode.

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

Couleurs

Le type canvasColor accepte soit une chaîne hexadécimale, soit un numéro préset :

Les valeurs de couleur préset sont volontairement indéfinies -- les applications utilisent leurs propres couleurs de marque.

Génération d'ID

Générer des chaînes hexadécimales minuscules 16 caractères (valeur aléatoire 64-bit) :

"6f0ad84f44ce9c17"
"a3b2c1d0e9f8a7b6"

Directives de mise en page

• Les coordonnées peuvent être négatives (le canvas s'étend infiniment)
• x augmente vers la droite, y augmente vers le bas ; la position est le coin supérieur gauche
• Espacer les nœuds de 50-100px ; laisser 20-50px de remplissage à l'intérieur des groupes
• Aligner à la grille (multiples de 10 ou 20) pour des mises en page plus propres

Liste de contrôle de validation

Après création ou édition d'un fichier canvas, vérifier :

1. Toutes les valeurs id sont uniques dans les nœuds et les arêtes
2. Chaque fromNode et toNode référence un ID de nœud existant
3. Les champs requis sont présents pour chaque type de nœud (text pour les nœuds de texte, file pour les nœuds de fichier, url pour les nœuds de lien)
4. type est l'un de : text, file, link, group
5. Les valeurs fromSide/toSide sont l'une de : top, right, bottom, left
6. Les valeurs fromEnd/toEnd sont l'une de : none, arrow
7. Les présets de couleur sont "1" à "6" ou hexadécimal valide (par exemple, "#FF0000")
8. Le JSON est valide et parsable

Si la validation échoue, vérifier les ID en doublon, les références d'arête orphelines, ou les chaînes JSON malformées (en particulier les retours à la ligne non échappés dans le contenu texte).

Exemples complets

Voir references/EXAMPLES.md pour des exemples de canvas complets incluant mind maps, tableaux de projet, canvas de recherche, et organigrammes.

Références

• JSON Canvas Spec 1.0
• JSON Canvas GitHub