Back to Details

obsidian-canvas

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Obsidian Canvas Skill

Obsidian Canvas 技能

Create visual canvases with automatic layout, color-coding, and smart node positioning.
创建具备自动布局、颜色编码和智能节点定位功能的可视化画布。

When to Use This Skill

何时使用该技能

Activate when you need to:
  • Create visual summaries of weekly reading
  • Build knowledge maps connecting related topics
  • Design project timelines or mind maps
  • Organize scattered notes into visual structure
在以下场景中启用：
  • 创建每周阅读的可视化总结
  • 构建关联主题的知识图谱
  • 设计项目时间线或思维导图
  • 将零散笔记整理为可视化结构

Core Principle: Automatic Layout

核心原则：自动布局

레이아웃은 자동으로, 콘텐츠에 집중하라
Canvas의 핵심은 노드 배치와 연결. 수동으로 좌표 계산하는 대신, 패턴별 자동 레이아웃 사용.
布局自动化，专注于内容
Canvas的核心是节点布局与连接。无需手动计算坐标，而是使用基于模式的自动布局。

Canvas File Structure

Canvas 文件结构

json
{
  "nodes": [
    {
      "id": "unique-id",
      "type": "text" | "file" | "link" | "group",
      "text": "content or file path",
      "x": 0, "y": 0,
      "width": 250, "height": 60,
      "color": "1-6"
    }
  ],
  "edges": [
    {
      "id": "edge-id",
      "fromNode": "node-id",
      "fromSide": "top|bottom|left|right",
      "toNode": "node-id",
      "toSide": "top|bottom|left|right",
      "color": "1-6"
    }
  ]
}
json
{
  "nodes": [
    {
      "id": "unique-id",
      "type": "text" | "file" | "link" | "group",
      "text": "content or file path",
      "x": 0, "y": 0,
      "width": 250, "height": 60,
      "color": "1-6"
    }
  ],
  "edges": [
    {
      "id": "edge-id",
      "fromNode": "node-id",
      "fromSide": "top|bottom|left|right",
      "toNode": "node-id",
      "toSide": "top|bottom|left|right",
      "color": "1-6"
    }
  ]
}

Layout Patterns

布局模式

1. Radial Layout (방사형)

1. 放射状布局

중심 노드에서 카테고리별로 방사형 배치
        Topic1
           |
Topic4 - CENTER - Topic2
           |
        Topic3
Use case: Weekly reading, topic overview Spacing: 400-600px from center
从中心节点按类别呈放射状排列
        Topic1
           |
Topic4 - CENTER - Topic2
           |
        Topic3
适用场景：每周阅读总结、主题概览 间距：与中心节点间距400-600px

2. Grid Layout (그리드)

2. 网格布局

카테고리별 세로 열로 배치
Category1  Category2  Category3
  Item1      Item1      Item1
  Item2      Item2      Item2
  Item3      Item3      Item3
Use case: Comparative analysis, multi-column organization Spacing: X: 400px, Y: 100px between items
按类别纵向分栏排列
Category1  Category2  Category3
  Item1      Item1      Item1
  Item2      Item2      Item2
  Item3      Item3      Item3
适用场景：对比分析、多栏整理 间距：X轴：400px，项目间Y轴：100px

3. Timeline Layout (타임라인)

3. 时间线布局

시간순 가로 흐름
Event1 → Event2 → Event3 → Event4
Use case: Project milestones, historical events Spacing: 300px horizontal
按时间顺序横向排列
Event1 → Event2 → Event3 → Event4
适用场景：项目里程碑、历史事件 间距：横向300px

4. Hierarchical Layout (계층형)

4. 层级式布局

트리 구조로 위→아래 확장
         Root
        /    \
    Child1  Child2
     / \      / \
   A   B    C   D
Use case: Concept breakdown, org charts Spacing: Y: 200px per level
以树形结构从上到下扩展
         Root
        /    \
    Child1  Child2
     / \      / \
   A   B    C   D
适用场景：概念拆解、组织结构图 间距：每层级Y轴200px

5. Side-by-side Comparison (가로 비교)

5. 横向对比布局

관련 항목들을 가로로 배치하여 한눈에 비교
┌─────────┐ ┌─────────┐ ┌─────────┐
│  항목1  │ │  항목2  │ │  항목3  │
│ (350px) │ │ (350px) │ │ (350px) │
└─────────┘ └─────────┘ └─────────┘
Use case: 옵션 비교, 요약 카드, 관련 개념 나열 Node width: 300-350px (좁게) X spacing: 40px between nodes X position calculation (centered at x=0):
  • 2 nodes: x = -195, 195
  • 3 nodes: x = -390, 0, 390
  • 계산식: 첫 노드 x = -(총너비/2) + (노드너비/2)
将相关项目横向排列，便于一眼对比
┌─────────┐ ┌─────────┐ ┌─────────┐
│  项目1  │ │  项目2  │ │  项目3  │
│ (350px) │ │ (350px) │ │ (350px) │
└─────────┘ └─────────┘ └─────────┘
适用场景：选项对比、摘要卡片、相关概念罗列 节点宽度：300-350px（窄版） X轴间距：节点间40px X轴位置计算（以x=0为中心）：
  • 2个节点：x = -195, 195
  • 3个节点：x = -390, 0, 390
  • 计算公式：首个节点x = -(总宽度/2) + (节点宽度/2)

6. Two-Column Comparison (2열 비교)

6. 双列对比布局

대조되는 두 관점/옵션을 양쪽에 배치
    LEFT COLUMN          RIGHT COLUMN
    ┌─────────┐          ┌─────────┐
    │ Header  │          │ Header  │
    ├─────────┤          ├─────────┤
    │ Item 1  │          │ Item 1  │
    │ Item 2  │          │ Item 2  │
    │ Item 3  │          │ Item 3  │
    └────┬────┘          └────┬────┘
         └───────┬───────────┘
           ┌─────┴─────┐
           │  Common   │
           │  Ground   │
           └───────────┘
Use case: A vs B 비교, 찬반, Before/After, 관점 대조 Column width: 500-550px each X spacing: 750px between column centers (left: -375, right: 375) Center elements: x = 0 (양쪽 연결)
将两个对立的观点/选项分别放置在两侧
    LEFT COLUMN          RIGHT COLUMN
    ┌─────────┐          ┌─────────┐
    │ Header  │          │ Header  │
    ├─────────┤          ├─────────┤
    │ Item 1  │          │ Item 1  │
    │ Item 2  │          │ Item 2  │
    │ Item 3  │          │ Item 3  │
    └────┬────┘          └────┬────┘
         └───────┬───────────┘
           ┌─────┴─────┐
           │  Common   │
           │  Ground   │
           └───────────┘
适用场景：选项对比、正反方、Before/After、观点对照 列宽度：每列500-550px X轴间距：列中心间距750px（左侧：-375，右侧：375） 中心元素：x = 0（连接两侧）

Color Scheme

配色方案

ColorIDUse Case
Red1AI & Tech
Orange2Work & Projects
Yellow3Current Events
Green4PKM & Learning
Purple5Personal & Meta
Blue6Education & Career
颜色ID适用场景
红色1AI与技术
橙色2工作与项目
黄色3当前事件
绿色4PKM与学习
紫色5个人与元认知
蓝色6教育与职业

Node Types & Sizes

节点类型与尺寸

Text Node

文本节点

  • Default: 250x60 (single line)
  • Quote: 280x60 (wider for readability)
  • Multi-line: 250x(60 + 20*lines)
  • 默认：250x60（单行）
  • 引用：280x60（加宽以提升可读性）
  • 多行：250x(60 + 20*行数)

File Node

文件节点

  • Link to note: 280x90 (includes title + summary)
  • Path format: Use wiki links in text field
  • 链接至笔记：280x90（包含标题+摘要）
  • 路径格式：在文本字段中使用wiki链接

Group Node

组节点

  • Category header: 200x50
  • Container: Auto-size based on children
  • 类别标题：200x50
  • 容器：根据子节点自动调整大小

Width Adaptation (폭 변경 시 콘텐츠 조정)

宽度变化时的内容调整

레이아웃 변경으로 노드 폭이 줄어들 때:
폭 변경콘텐츠 조정
550px → 350px테이블 열 축소, 긴 문장 분리
350px → 300px불릿 2-3개만, 예시 제거
300px → 250px제목 + 한 줄 요약만
축약 우선순위 (먼저 제거할 것):
  1. 부연 설명, 괄호 내용
  2. 예시, 참조
  3. 테이블 행 (핵심만 유지)
  4. 불릿 포인트 수
当布局变化导致节点宽度缩小时：
宽度变化内容调整
550px → 350px缩减表格列宽，拆分长句
350px → 300px仅保留2-3个项目符号，移除示例
300px → 250px仅保留标题+一行摘要
精简优先级（优先移除内容）：
  1. 补充说明、括号内内容
  2. 示例、参考资料
  3. 表格行（仅保留核心内容）
  4. 项目符号数量

Auto-Layout Algorithm

自动布局算法

Step 1: Categorize Nodes

步骤1：节点分类

Group nodes by topic/category using tags or manual grouping.
使用标签或手动分组，按主题/类别对节点进行分组。

Step 2: Calculate Positions

步骤2：计算位置

Based on layout pattern:
  • Radial: Divide 360° by category count
  • Grid: Calculate column width, row height
  • Timeline: Distribute evenly on X-axis
  • Hierarchy: BFS traversal, level-by-level
基于布局模式：
  • 放射状：将360°按类别数量均分
  • 网格：计算列宽、行高
  • 时间线：在X轴上均匀分布
  • 层级式：广度优先遍历，逐层计算

Step 3: Avoid Overlaps

步骤3：避免重叠

  • Minimum spacing: 50px
  • Check bounding boxes
  • Adjust if collision detected
  • 最小间距：50px
  • 检查边界框
  • 若检测到碰撞则调整位置

Step 4: Create Edges

步骤4：创建连接边

  • Connect center to categories (radial)
  • Connect sequential items (timeline)
  • Connect parent-child (hierarchy)
  • 连接中心节点与各分类（放射状）
  • 连接连续项目（时间线）
  • 连接父节点与子节点（层级式）

Example Templates

示例模板

Weekly Reading Canvas

每周阅读Canvas

json
{
  "nodes": [
    {
      "id": "center",
      "type": "text",
      "text": "# Weekly Reading\n## Dec 20-27, 2025",
      "x": 0, "y": 0,
      "width": 200, "height": 80,
      "color": "5"
    },
    {
      "id": "group-ai",
      "type": "text",
      "text": "## AI & Learning",
      "x": -380, "y": -200,
      "width": 180, "height": 50,
      "color": "1"
    }
  ],
  "edges": [
    {
      "id": "edge-center-ai",
      "fromNode": "center",
      "fromSide": "left",
      "toNode": "group-ai",
      "toSide": "right",
      "color": "1"
    }
  ]
}
json
{
  "nodes": [
    {
      "id": "center",
      "type": "text",
      "text": "# Weekly Reading\n## Dec 20-27, 2025",
      "x": 0, "y": 0,
      "width": 200, "height": 80,
      "color": "5"
    },
    {
      "id": "group-ai",
      "type": "text",
      "text": "## AI & Learning",
      "x": -380, "y": -200,
      "width": 180, "height": 50,
      "color": "1"
    }
  ],
  "edges": [
    {
      "id": "edge-center-ai",
      "fromNode": "center",
      "fromSide": "left",
      "toNode": "group-ai",
      "toSide": "right",
      "color": "1"
    }
  ]
}

Project Timeline Canvas

项目时间线Canvas

json
{
  "nodes": [
    {
      "id": "phase1",
      "type": "text",
      "text": "**Phase 1**\nResearch",
      "x": 0, "y": 0,
      "width": 200, "height": 80,
      "color": "1"
    },
    {
      "id": "phase2",
      "type": "text",
      "text": "**Phase 2**\nDevelopment",
      "x": 300, "y": 0,
      "width": 200, "height": 80,
      "color": "2"
    }
  ],
  "edges": [
    {
      "id": "edge-1-2",
      "fromNode": "phase1",
      "fromSide": "right",
      "toNode": "phase2",
      "toSide": "left"
    }
  ]
}
json
{
  "nodes": [
    {
      "id": "phase1",
      "type": "text",
      "text": "**Phase 1**\nResearch",
      "x": 0, "y": 0,
      "width": 200, "height": 80,
      "color": "1"
    },
    {
      "id": "phase2",
      "type": "text",
      "text": "**Phase 2**\nDevelopment",
      "x": 300, "y": 0,
      "width": 200, "height": 80,
      "color": "2"
    }
  ],
  "edges": [
    {
      "id": "edge-1-2",
      "fromNode": "phase1",
      "fromSide": "right",
      "toNode": "phase2",
      "toSide": "left"
    }
  ]
}

Best Practices

最佳实践

Content First, Layout Second

内容优先，布局其次

  1. List all items to include
  2. Group by category/theme
  3. Choose layout pattern
  4. Generate coordinates
  5. Add edges last
  1. 列出所有需要包含的项目
  2. 按类别/主题分组
  3. 选择布局模式
  4. 生成坐标
  5. 最后添加连接边

Keep It Scannable

保持易读性

  • Max 20 nodes per canvas
  • 4-6 categories ideal
  • Clear visual hierarchy
  • Consistent spacing
  • 每个Canvas最多20个节点
  • 4-6个类别为最佳
  • 清晰的视觉层级
  • 统一的间距

Link to Notes

链接至笔记

  • Use wiki link format: 
    [[Note Title]]
  • Include section links: 
    [[Note#Section]]
  • Add emoji for visual cues
  • 使用wiki链接格式：
    [[Note Title]]
  • 包含章节链接：
    [[Note#Section]]
  • 添加表情符号作为视觉提示

Iterate Layout

迭代布局

  • Start with template
  • Adjust spacing if crowded
  • Test in Obsidian preview
  • Refine edge routing
  • 从模板开始
  • 若过于拥挤则调整间距
  • 在Obsidian预览中测试
  • 优化连接边的路径

Part Headers for Long Documents

长文档的章节标题

긴 캔버스는 Part 헤더로 섹션 구분
언제 사용:
  • 노드 수 15개 이상
  • 논리적으로 구분되는 단계/섹션 존재
Part 헤더 형식:
json
{"id":"part1","type":"text","text":"# 📋 Part 1: [섹션명]","x":-275,"y":[y],"width":550,"height":60,"color":"[색상]"}
Part 간 색상 구분:
  • 각 Part에 다른 색상 할당
  • Part 내 노드들은 동일 색상 계열 사용
  • 시각적 네비게이션 향상
长Canvas使用章节标题划分区域
何时使用：
  • 节点数量超过15个
  • 存在可逻辑划分的步骤/区域
章节标题格式：
json
{"id":"part1","type":"text","text":"# 📋 Part 1: [章节名称]","x":-275,"y":[y],"width":550,"height":60,"color":"[颜色]"}
章节间颜色区分：
  • 为每个章节分配不同颜色
  • 章节内节点使用同一色系
  • 提升视觉导航体验

Overlap Prevention (오버랩 방지)

防止重叠

캔버스 업데이트 시 항상 오버랩을 체크해야 한다. 오버랩은 가독성을 해치고 노드 선택을 어렵게 만든다.
更新Canvas时必须检查重叠问题。重叠会降低可读性，且难以选择节点。

오버랩 계산 공식

重叠计算公式

두 노드가 겹치는지 확인:
Node A: (x1, y1, width1, height1)
Node B: (x2, y2, width2, height2)

오버랩 조건 (둘 다 만족 시 오버랩):
- X축: x1 < x2 + width2 AND x1 + width1 > x2
- Y축: y1 < y2 + height2 AND y1 + height1 > y2
判断两个节点是否重叠：
Node A: (x1, y1, width1, height1)
Node B: (x2, y2, width2, height2)

重叠条件（同时满足则重叠）：
- X轴: x1 < x2 + width2 AND x1 + width1 > x2
- Y轴: y1 < y2 + height2 AND y1 + height1 > y2

적정 간격 계산

合理间距计算

노드 간 간격을 유지하기 위한 공식:
다음 노드 Y = 현재 노드 Y + 현재 노드 Height + Gap(30-50px)

예시:
- Node A: y=500, height=180 → Node A 하단 = 680
- Node B 시작: y = 680 + 40(gap) = 720
维持节点间距的公式：
下一个节点Y坐标 = 当前节点Y坐标 + 当前节点高度 + 间距(30-50px)

示例：
- Node A: y=500, height=180 → Node A底部 = 680
- Node B起始Y坐标: y = 680 + 40(间距) = 720

노드 높이 권장 기준

节点高度推荐标准

콘텐츠 유형권장 높이
한 줄 제목60-80px
2-3줄 텍스트100-120px
중간 설명 (4-6줄)140-180px
긴 설명 (7-10줄)200-260px
테이블 포함250-350px
内容类型推荐高度
单行标题60-80px
2-3行文本100-120px
中等长度说明（4-6行）140-180px
长说明（7-10行）200-260px
包含表格250-350px

캔버스 수정 시 체크리스트

Canvas修改检查清单

  1. 수정 전: 현재 노드들의 Y 좌표 + Height 파악
  2. 노드 추가 시: 삽입 위치 기준 하단 모든 노드 Y값 조정
  3. Height 변경 시: 해당 노드 이후 모든 노드 Y값 재계산
  4. 수정 후: 모든 인접 노드 쌍에 대해 오버랩 검사
  1. 修改前：记录当前所有节点的Y坐标 + 高度
  2. 添加节点时：根据插入位置调整下方所有节点的Y坐标
  3. 修改高度时：重新计算该节点之后所有节点的Y坐标
  4. 修改后：检查所有相邻节点对是否重叠

레이아웃 패턴별 간격

各布局模式的间距

레이아웃X 간격Y 간격
Radial400-600pxN/A
Grid350-450px40-60px
Timeline280-350pxN/A
HierarchicalN/A150-250px
Two-Column500-700px40-60px
布局X轴间距Y轴间距
放射状400-600pxN/A
网格350-450px40-60px
时间线280-350pxN/A
层级式N/A150-250px
双列对比500-700px40-60px

자동 오버랩 수정 절차

自动修复重叠的步骤

1. 모든 노드를 Y 좌표 기준 정렬
2. 각 노드에 대해:
   a. 이전 노드의 하단(y + height)과 현재 노드의 상단(y) 비교
   b. 겹치면: 현재 노드 y = 이전 노드 하단 + 40px
   c. 이후 모든 노드 y 값을 동일 delta만큼 이동
3. 센터 정렬이 필요한 노드는 x 값도 조정
1. 按Y坐标对所有节点排序
2. 对每个节点：
   a. 比较前一个节点的底部(y + height)与当前节点的顶部(y)
   b. 若重叠：当前节点y = 前一个节点底部 + 40px
   c. 将后续所有节点的y坐标增加相同的差值
3. 需要居中的节点同时调整x坐标

Quality Checklist

质量检查清单

Before finalizing canvas:
  • All nodes have unique IDs
  • No overlapping nodes (run overlap check formula above)
  • Minimum 30-50px spacing between adjacent nodes
  • Colors follow scheme (AI=1, PKM=4, etc.)
  • Center node clearly visible
  • Edges don't cross unnecessarily
  • Wiki links are valid
  • Canvas renders in Obsidian without errors
在最终确定Canvas前：
  • 所有节点均有唯一ID
  • 无重叠节点（使用上述重叠检查公式）
  • 相邻节点间最小间距30-50px
  • 颜色符合配色方案（AI=1，PKM=4等）
  • 中心节点清晰可见
  • 连接边无不必要的交叉
  • Wiki链接有效
  • Canvas可在Obsidian中正常渲染无错误

Common Use Cases

常见使用场景

1. Weekly Reading Summary

1. 每周阅读总结

  • Layout: Radial
  • Categories: AI, PKM, Current Events, Education
  • Nodes: Article links with quotes
  • Output: 
    AI/Canvas/YYYY-MM-DD Weekly Reading.canvas
  • 布局：放射状
  • 类别：AI、PKM、当前事件、教育
  • 节点：带引用的文章链接
  • 输出路径：
    AI/Canvas/YYYY-MM-DD Weekly Reading.canvas

2. Project Planning

2. 项目规划

  • Layout: Timeline or Hierarchical
  • Nodes: Milestones, tasks, deliverables
  • Colors: By status or phase
  • Output: 
    Projects/[Name]/Planning.canvas
  • 布局：时间线或层级式
  • 节点：里程碑、任务、交付物
  • 颜色：按状态或阶段区分
  • 输出路径：
    Projects/[Name]/Planning.canvas

3. Concept Map

3. 概念图谱

  • Layout: Hierarchical
  • Nodes: Main concept + subconcepts
  • Edges: Parent-child relationships
  • Output: 
    Topics/[Category]/[Concept].canvas
  • 布局：层级式
  • 节点：核心概念+子概念
  • 连接边：父子关系
  • 输出路径：
    Topics/[Category]/[Concept].canvas

4. Meeting Network

4. 会议关联图谱

  • Layout: Radial
  • Center: Person or topic
  • Nodes: Related meetings/people
  • Output: 
    AI/Canvas/[Topic] Network.canvas
  • 布局：放射状
  • 中心：人物或主题
  • 节点：相关会议/人员
  • 输出路径：
    AI/Canvas/[Topic] Network.canvas

Tools & Functions

工具与函数

generate_radial_layout(center, categories, items_per_category)

generate_radial_layout(center, categories, items_per_category)

Returns node positions in radial pattern.
返回放射状模式的节点位置。

generate_grid_layout(columns, items)

generate_grid_layout(columns, items)

Returns node positions in grid.
返回网格模式的节点位置。

create_edge(from_id, to_id, color)

create_edge(from_id, to_id, color)

Returns edge object with auto-routing.
返回带有自动路径规划的连接边对象。

validate_canvas(canvas_json)

validate_canvas(canvas_json)

Checks for overlaps, invalid IDs, broken links.
检查重叠、无效ID、损坏链接等问题。

Error Handling

错误处理

Common Issues

常见问题

  • Overlapping nodes: Increase spacing or use different layout
  • Broken wiki links: Validate file exists before linking
  • Edge routing: Simplify connections, avoid crossing
  • 节点重叠：增加间距或更换布局
  • Wiki链接损坏：链接前验证文件是否存在
  • 连接边路径问题：简化连接，避免交叉

Debugging

调试

  • Use Obsidian developer console (Cmd+Opt+I)
  • Check JSON syntax
  • Verify all node IDs exist in edges
Next Steps: Run example canvas generation to test layout algorithms.
  • 使用Obsidian开发者控制台（Cmd+Opt+I）
  • 检查JSON语法
  • 验证所有连接边中的节点ID均存在
下一步：运行示例Canvas生成以测试布局算法。