visualiseur-markdown/canvas

Que fait canvas ?

Créez des diagrammes spatiaux avec des nœuds positionnés librement au format JSON. Idéal pour les cartes conceptuelles, les graphes de connaissances et les tableaux de planification nécessitant un contrôle précis des coordonnées x/y.

Utilisation

Pour créer un diagramme, fournissez un objet JSON avec les propriétés suivantes :

• nodes : un tableau d'objets nœud, chacun contenant :
  • id : identifiant unique (chaîne)
  • x : coordonnée x (nombre)
  • y : coordonnée y (nombre)
  • label : texte affiché sur le nœud (chaîne, optionnel)
  • color : couleur du nœud (chaîne hexadécimale, optionnel)
• edges : un tableau d'objets lien, chacun contenant :
  • source : identifiant du nœud source (chaîne)
  • target : identifiant du nœud cible (chaîne)
  • label : texte du lien (chaîne, optionnel)

Exemple

{
  "nodes": [
    { "id": "a", "x": 100, "y": 100, "label": "Nœud A" },
    { "id": "b", "x": 300, "y": 200, "label": "Nœud B" }
  ],
  "edges": [
    { "source": "a", "target": "b", "label": "Connexion" }
  ]
}

Plateformes supportées

• Claude Code
• Cursor
• Codex

Remarques

• Les coordonnées sont relatives au canevas (en pixels).
• Les couleurs par défaut s'appliquent si color n'est pas spécifié.
• Les étiquettes sont optionnelles et peuvent être omises.