Was macht Canvas?
Erstellen Sie räumliche Diagramme mit frei positionierten Knoten im JSON-Format. Ideal für Konzeptkarten, Wissensgraphen und Planungstafeln, die eine präzise x/y-Koordinatensteuerung erfordern.
Verwendung
Fügen Sie einen JSON-Block in Ihr Markdown-Dokument ein, um ein Canvas-Diagramm zu erstellen.
{
"nodes": [
{
"id": "knoten1",
"x": 100,
"y": 200,
"label": "Hauptidee",
"color": "#4A90D9"
},
{
"id": "knoten2",
"x": 300,
"y": 400,
"label": "Unteridee",
"color": "#7B68EE"
}
],
"edges": [
{
"source": "knoten1",
"target": "knoten2",
"label": "verbindet"
}
]
}
Parameter
| Parameter | Typ | Beschreibung |
|---|---|---|
nodes | Array | Liste der Knoten mit Position und Label |
edges | Array | Optionale Kanten zwischen Knoten |
Beispiele
Konzeptkarte
{
"nodes": [
{"id": "a", "x": 50, "y": 100, "label": "KI"},
{"id": "b", "x": 200, "y": 100, "label": "ML"},
{"id": "c", "x": 125, "y": 250, "label": "Daten"}
],
"edges": [
{"source": "a", "target": "b"},
{"source": "a", "target": "c"}
]
}
Planungstafel
{
"nodes": [
{"id": "1", "x": 50, "y": 50, "label": "ToDo", "color": "#FF6B6B"},
{"id": "2", "x": 200, "y": 50, "label": "In Arbeit", "color": "#FFD93D"},
{"id": "3", "x": 350, "y": 50, "label": "Erledigt", "color": "#6BCB77"}
]
}
Einschränkungen
- Diagramme müssen im JSON-Format angegeben werden.
- Koordinaten werden in Pixeln relativ zur linken oberen Ecke der Leinwand angegeben.
- Kanten sind optional und werden standardmäßig als gerade Linien gezeichnet.
Lizenz
MIT