SKILL.md
唯讀
名稱
canvas
描述
使用 JSON 格式建立自由定位節點的空間圖表。最適合需要精確 x/y 座標控制的概念圖、知識圖譜和規劃板。
JSON Canvas 視覺化工具
快速入門： 使用 id、type、x、y、width、height 定義節點 → 在 100px 網格上規劃佈局 → 使用 fromNode/toNode 連接邊線 → 套用顏色（1-6）→ 包裹在 ```canvas 程式碼區塊中。原點 (0,0) 位於左上角，X 向右增加，Y 向下增加。與 Obsidian Canvas 相容。
重要語法規則
1. 結構格式
{
"nodes": [
{"id": "n1", "type": "text", "text": "節點 1", "x": 0, "y": 0, "width": 120, "height": 50}
],
"edges": []
}
2. 節點類型
| 類型 | 必要欄位 | 用途 |
|---|---|---|
text |
text |
顯示自訂文字內容 |
file |
file |
參照外部檔案 |
link |
url |
外部 URL 參照 |
group |
label |
用於分組的視覺容器 |
3. 必要節點屬性
所有節點都需要：id、type、x、y、width、height
4. 顏色預設
| 值 | 顏色 |
|---|---|
"1" |
紅色 |
"2" |
橙色 |
"3" |
黃色 |
"4" |
綠色 |
"5" |
青色 |
"6" |
紫色 |
5. 邊線連接
{
"id": "e1",
"fromNode": "n1",
"fromSide": "right",
"toNode": "n2",
"toSide": "left",
"toEnd": "arrow"
}
6. 座標系統
- 原點 (0,0) 位於左上角
- X 向右增加
- Y 向下增加
7. 節點尺寸
- 設定節點尺寸時需考慮文字內容
- 多行文字需要更多高度才能顯示所有行
- 長單字需要更多寬度以避免溢出
常見問題
| 問題 | 解決方案 |
|---|---|
| 節點重疊 | 增加間距（100 像素以上） |
| 邊線未顯示 | 確認 fromNode/toNode 與節點 ID 相符 |
| JSON 無效 | 檢查引號和逗號 |
| ID 無效 | 僅使用 a-z、A-Z、0-9、-、_ |
輸出格式
```canvas
{
"nodes": [...],
"edges": [...]
}
```
相關檔案
如需詳細語法和進階功能，請參閱以下參考資料：
- syntax.md — 完整屬性參考：節點類型、邊線屬性、群組樣式及進階範例
