Loading...
Loading...
Create spatial node-based diagrams with free positioning. Best for mind maps, knowledge graphs, concept maps, and planning boards where precise spatial layout matters. Use JSON format with x/y coordinates. NOT for sequential flows (use mermaid) or data charts (use vega).
npx skill4agent add markdown-viewer/skills canvasidtypexywidthheightfromNodetoNode```canvas{
"nodes": [
{"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
],
"edges": []
}| Type | Required Fields | Purpose |
|---|---|---|
| | Display custom text content |
| | Reference external files |
| | External URL references |
| | Visual container for grouping |
idtypexywidthheight| Value | Color |
|---|---|
| Red |
| Orange |
| Yellow |
| Green |
| Cyan |
| Purple |
{
"id": "e1",
"fromNode": "n1",
"fromSide": "right",
"toNode": "n2",
"toSide": "left",
"toEnd": "arrow"
}| Issue | Solution |
|---|---|
| Nodes overlapping | Increase spacing (100+ px) |
| Edges not visible | Verify |
| Invalid JSON | Check quotes and commas |
| IDs invalid | Use only a-z, A-Z, 0-9, -, _ |
```canvas
{
"nodes": [...],
"edges": [...]
}
```For detailed syntax and advanced features, refer to references below: