// Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.
Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.
| name | canvas |
| description | Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control. |
| metadata | {"author":"Canvas is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md"} |
Quick Start: Define nodes with id, type, x, y, width, height → Plan layout on 100px grid → Connect edges with fromNode/toNode → Apply colors (1-6) → Wrap in ```canvas fence. Origin (0,0) at top-left, X right, Y down. Obsidian Canvas compatible.
{
"nodes": [
{"id": "n1", "type": "text", "text": "Node 1", "x": 0, "y": 0, "width": 120, "height": 50}
],
"edges": []
}
| Type | Required Fields | Purpose |
|---|---|---|
text | text | Display custom text content |
file | file | Reference external files |
link | url | External URL references |
group | label | Visual container for grouping |
All nodes require: id, type, x, y, width, height
| Value | Color |
|---|---|
"1" | Red |
"2" | Orange |
"3" | Yellow |
"4" | Green |
"5" | Cyan |
"6" | 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 fromNode/toNode match node IDs |
| 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: