Canvas 实战：课程地图
学习目标
- 综合运用 Canvas 的各项功能，设计一张实用的课程地图。
- 掌握用 Canvas 组织课程章节、依赖关系、完成状态的方法。
- 学会将 Canvas 嵌入教程入口文档。
- 学会使用 Advanced Canvas 插件增强课程地图的交互与展示效果。
前置条件
- 已掌握 Canvas 基础操作（参考 00_obsidian_canvas基础）。
- 已了解本教程的全部章节结构。
- 已安装并启用
Advanced Canvas社区插件（建议，非强制）。
项目概述
在本实战项目中，你将创建一张 教程课程地图 Canvas，将本仓库的全部章节以可视化方式呈现，包括：
- 各章节的定位与主题。
- 章节之间的前置依赖关系。
- 当前的完成状态（已完成 / 待编写）。
- 快速跳转到对应章节的链接。
这张课程地图可以直接嵌入 README.md 或作为独立导航页面使用。
步骤
第 1 步：规划卡片布局
在动手之前，先用草图规划布局。推荐结构：
┌─────────────────┐
│ section0: 导读 │
└────────┬─────────┘
│
┌─────────────┼─────────────┐
│ │ │
┌────────▼──┐ ┌──────▼──────┐ ┌───▼────────┐
│section1: │ │section2: │ │section4: │
│环境安装 │ │Markdown基础 │ │Git协作 │
└───────────-┘ └──────┬──────┘ └──────┬──────┘
│ │
┌───────▼──────┐ │
│section3: │ │
│扩展语法 │ │
└──────────────┘ │
│
┌──────────────┐ ┌──────────────┐ │
│section5: │ │section6: │ │
│Canvas │ │Bases │ │
└──────┬───────┘ └──────┬───────┘ │
│ │ │
┌──────▼───────┐ ┌──────▼───────┐ │
│section7: │ │section8: │ │
│Syncthing │ │Copilot基础 │ │
└──────────────┘ └──────┬───────┘ │
│ │
┌──────▼──────┐ │
│section9: │ │
│Copilot实战 │ │
└─────────────┘ │
│
┌────────────────────┘
│
┌────────▼────────┐
│ 附录 │
│ 术语表/FAQ/日志 │
└─────────────────┘
你也可以自由设计自己的布局，只要清晰反映章节关系和状态即可。
第 2 步：创建基础画布
- 在
section5/文件夹下新建 Canvas，命名为教程课程地图.canvas。 - 按
Ctrl + 0适应画布大小。 - 如果需要更大空间，滚动到空白区域。
第 3 步：创建章节卡片
为每个章节创建一个文本卡片，内容格式建议：
# section0
## 课程导读与协作规范
状态: ✅ 完成
建议使用不同颜色区分状态：
| 状态 | 卡片边框颜色 | 说明 |
|---|---|---|
| ✅ 完成 | 绿色 | 已编写完成 |
| 🔄 进行中 | 蓝色 | 正在编写 |
| ⬜ 待编写 | 灰色 | 尚未开始 |
卡片边框颜色可以在选中卡片后，在右侧属性面板中设置。
按照以上格式，为以下章节创建卡片：
| 章 | 主题 | 当前状态 |
|---|---|---|
| section0 | 课程导读与协作规范 | ✅ 完成 |
| section1 | 环境安装 | ✅ 完成 |
| section2 | Markdown 基础语法 | ✅ 完成 |
| section3 | Markdown 扩展与 Obsidian 语法 | ✅ 完成 |
| section4 | Git/GitHub 可视化协作 | ✅ 完成 |
| section5 | Obsidian Canvas | 🔄 进行中 |
| section6 | Obsidian Bases | ⬜ 待编写 |
| section7 | Syncthing 局域网同步 | ⬜ 待编写 |
| section8 | VS Code Copilot 基础 | ⬜ 待编写 |
| section9 | Copilot 实战案例 | ⬜ 待编写 |
| 附录 | 术语表 / FAQ / 更新日志 | ⬜ 待编写 |
第 4 步：添加链接跳转
为每张卡片添加跳转到对应章节笔记的链接。
方法：
- 双击卡片进入编辑模式。
- 在卡片底部添加 WikiLink：
📖 [[section0/00_课程导读与协作规范.md|前往学习]]你也可以利用 Canvas 的嵌入功能，将章节的 00_ 文件直接嵌入为笔记卡片：
- 从左侧文件列表中拖拽
section1/00_环境安装总览.md到画布上。 - 调整卡片大小，显示预览内容。
- 双击笔记卡片可在 Obsidian 中打开。
第 5 步：绘制连接线
根据章节依赖关系绘制连接线：
| 从 | 到 | 关系 | 建议颜色 |
|---|---|---|---|
| section0 | section1 | 前置 | 🔵 蓝色 |
| section1 | section2 | 前置 | 🔵 蓝色 |
| section2 | section3 | 前置 | 🔵 蓝色 |
| section1 | section4 | 前置 | 🔵 蓝色 |
| section1 | section5 | 前置 | 🔵 蓝色 |
| section1 | section6 | 前置 | 🔵 蓝色 |
| section1 | section7 | 前置 | 🔵 蓝色 |
| section1 | section8 | 前置 | 🔵 蓝色 |
| section8 | section9 | 前置 | 🔵 蓝色 |
连接线设置建议：
- 颜色：蓝色表示前置依赖，绿色表示扩展关联。
- 线型：直线表示强依赖，虚线表示可选。
- 箭头：从依赖章节指向目标章节。
第 6 步：创建分组
为三个里程碑创建分组，增强可读性：
M1 基础可用组：
- 包含：section0, section1, section2, section3, section4
- 组标签：
📦 M1：基础可用 - 颜色：绿色半透明
M2 Obsidian 进阶组：
- 包含：section5, section6, section7
- 组标签：
🗺 M2：Obsidian 进阶 - 颜色：蓝色半透明
M3 Copilot 体系组：
- 包含：section8, section9
- 组标签：
🤖 M3：Copilot 体系 - 颜色：紫色半透明
第 7 步：添加图例和说明
在画布角落添加一张”图例”卡片，帮助读者理解：
# 图例
## 卡片状态
- 🟩 绿色边框 — 已完成
- 🟦 蓝色边框 — 进行中
- ⬜ 灰色边框 — 待编写
## 连接线
- 🔵 蓝色实线 — 前置依赖
- 🟢 绿色虚线 — 扩展关联
## 分组
各组代表一个里程碑阶段。第 8 步：查看课程地图
本仓库已为你创建了一个完整的课程地图示例：教程课程地图.canvas（与本文件在同一目录下）。
- 在 Obsidian 中打开本仓库 Vault。
- 在文件列表中点击
section5/教程课程地图.canvas。 - 你将看到一张完整的交互式课程地图，包含：
- 全部 11 个章节卡片（含状态色标）。
- 蓝色箭头连接线表示前置依赖关系。
- 三个里程碑分组（M1 / M2 / M3）。
- 左上角的图例卡片。
你可以直接在此基础上修改——拖拽卡片、调整连线、更新状态，Canvas 会自动保存。
如果你是从 VS Code 或 GitHub 网页查看，
.canvas文件会显示为原始 JSON，无法渲染。请务必在 Obsidian 中打开以体验完整交互效果。
第 9 步：升级为 Advanced Canvas 交互版（可选）
在不破坏原有结构的前提下，给课程地图增加以下增强能力：
-
分组折叠/展开
- 将
M1 / M2 / M3三个里程碑分组设置为可折叠。 - 演示时先折叠全部，再按讲解顺序逐组展开。
- 将
-
演示模式（Presentation）
- 为节点建立一条演示路径（例如
section0 → section1 → section2 → ...）。 - 打开命令面板执行
Advanced Canvas: Start presentation。 - 使用方向键翻页，
Esc退出。
- 为节点建立一条演示路径（例如
-
Portal（门户）拆分复杂区域
- 当某个章节信息过多时，单独创建子画布（如
section5-细节.canvas）。 - 在主画布中嵌入该子画布并切换为 Portal，保持主图简洁。
- 当某个章节信息过多时，单独创建子画布（如
-
增强导出（PNG/SVG）
- 导出一张 SVG 版本课程地图，便于在文档或幻灯片中复用。
- 如用于 README 展示，优先导出透明背景 PNG，便于适配不同背景色。
-
节点模板统一样式
- 选中一个“章节标准卡片”作为模板保存。
- 新增章节节点时直接套用模板，避免重复调样式。
-
增强 frontmatter（建议优先启用）
- 点击 Canvas 右上角信息按钮，编辑当前
教程课程地图.canvas的 frontmatter。 - 为课程地图补充检索与协作字段（如
tags、aliases、status、owner）。 - 建议初始模板：
- 点击 Canvas 右上角信息按钮，编辑当前
---
tags:
- tutorial
- roadmap
- canvas
aliases:
- 教程课程地图
status: in-progress
owner: tutorial-team
review_cycle: monthly
---渐进式增强
建议先完成原生 Canvas 主流程，再启用 Advanced Canvas 特性。这样在协作和回滚时更容易定位问题。
扩展阅读
- Obsidian Canvas 高级技巧
- Advanced Canvas 功能总览
- 社区 Canvas 示例库（Obsidian 社区插件：Canvas 示例）
常见问题
Q：卡片太多，画布变得很乱怎么办？
A：使用分组（Groups）来归类卡片，并利用缩放和平移聚焦到特定区域。也可以将不同主题放在不同的 Canvas 中。
Q：如何快速更新所有卡片的状态？
A：可以一次性修改一个章节的状态后，使用 Obsidian 的搜索功能查找所有 Canvas 文件批量更新。目前 Canvas 不支持自动状态同步。
Q：课程地图嵌入 README.md 后不显示？
A：在 GitHub 等平台上，.canvas 文件无法直接渲染。建议在 README 中使用截图 + 链接的方式：
[](section5/教程课程地图.canvas)先在 Obsidian 中打开 Canvas，右键 → 复制截图，保存为图片，再用上面的方式引用。
Q：命令面板里找不到 Advanced Canvas 相关命令？
A：通常是插件未启用或加载失败。请在设置 → 社区插件中确认已启用 Advanced Canvas，然后重启 Obsidian 再试。
Q：Canvas 的 frontmatter 应该写哪些字段？
A：最低建议写 tags 和 status。如果是团队协作，再增加 owner 与 review_cycle。字段名尽量在团队内保持一致，避免后续筛选混乱。
练习任务
- 在 Obsidian 中打开
section5/教程课程地图.canvas，查看课程地图示例。 - 尝试拖拽卡片调整布局，观察与其他卡片的连接线是否跟随移动。
- 修改一张卡片的状态文字（例如将 section6 的”⬜ 待编写”改为”🔄 进行中”）。
- 在图例卡片中新增一行”🟣 紫色 — Copilot 体系”。
- （可选）安装并启用
Advanced Canvas，完成以下任意两项：- 启动一次演示模式并按顺序浏览章节。
- 将一个分组设为可折叠并演示展开/收起。
- 导出一张 SVG 或透明背景 PNG。
- 为章节卡片保存并应用一个节点模板。
- （可选）为
教程课程地图.canvas添加 frontmatter，至少包含tags、status、owner三个字段。 - （可选）创建你自己的 Canvas 画布，用于其他项目的规划。
验收清单
- 在 Obsidian 中成功打开
教程课程地图.canvas - Canvas 包含所有 11 个章节卡片 + 图例
- 每张卡片标题清晰，状态标识正确
- 连接线正确反映章节依赖关系
- 已创建三个里程碑分组（M1 / M2 / M3）
- 图例卡片解释了颜色含义
- 能自由拖拽和编辑 Canvas 内容
- （可选）已完成至少 2 项 Advanced Canvas 增强操作
- （可选）已为课程地图补充 frontmatter 元数据（如
tags/status/owner）