Canvas Enhance

Canvas Enhance for Obsidian.md

⚡ 全面增强你的 Obsidian Canvas 体验。流程图、脑图，一个插件搞定。

📖 使用指南 · 📋 更新日志 · 🐛 反馈问题 · 🇬🇧 English

为什么选择 Canvas Enhance？

Obsidian Canvas 原生功能够用，但不够好用。Canvas Enhance 在不改变原生体验的前提下，补上了这些缺口：

• 缩小画布就看不清节点？ 概览模式自动用大号标题填满卡片，全局视角也能快速定位
• 想用 Canvas 做脑图？ Tab 创建下级节点、Enter 创建同级节点、方向键导航，完整的思维导图工作流
• 节点样式太单调？ 流程图形状、边框样式、自定义 CSS 属性，右键菜单直接设置
• Canvas 文件是信息孤岛？ 元数据缓存让 .canvas 接入关系图谱、反向链接、出链系统

所有功能均可在设置中独立开关，不用的功能零开销。

https://github.com/user-attachments/assets/86da3869-f637-467e-a2dd-4042e3c7c74b

功能

概览模式

https://github.com/user-attachments/assets/d98e9132-ad4f-4186-b1e3-f2f051ceabeb

缩小画布后节点内容变得难以阅读。概览模式自动用大号标题填满每张卡片：

• 文件节点显示文件名或第一行标题
• 文本节点显示第一个 Markdown 标题（# 标题）
• 分组标签自动放大，保持可读
• 放大画布超过阈值后，自动恢复原始内容

思维导图

https://github.com/user-attachments/assets/9d0a7240-75b7-4c5c-bc42-cfba88a1e9f9

将画布变成思维导图：Tab 创建下级节点，Enter 创建同级节点，Alt+方向键 在节点间导航。下级节点自动继承上级节点颜色。

文件节点模板

支持在设置中配置，使用特定模板创建文件节点。

https://github.com/user-attachments/assets/7ae37cf5-bc9d-427e-90d5-e86e044c1b79

节点与边样式

流程图形状（终端、流程、判断、数据库等）、边框样式、文本对齐、8 种箭头、路径样式（实线/点线/虚线）、自动避障连线——全部通过右键菜单设置。

更多功能

自定义 CSS 样式

通过 CSS snippet 为节点和边添加自定义样式属性，在 CSS 文件中用 YAML 注释定义：

/* @canvas-enhance-node-style
key: validation-state
label: 验证状态
options:
  - label: 无状态
    value: null
    icon: circle-help
  - label: 已通过
    value: approved
    icon: circle-check
*/

详见示例 CSS 文件。

社区插件市场

在 Obsidian 设置 → 第三方插件 → 浏览中搜索 Canvas Enhance。

设置

四个标签页：

• 基础设置 — 通用、文件模板、概览模式、命令、搜索、图片导出
• 思维导图 — 节点间距、快捷键、颜色传播
• 节点与边 — 节点/边样式、自定义样式、浮动/翻转边、边高亮/选择、自动调整、宽高比、图层顺序、可折叠分组
• 进阶功能 — 元数据、传送门、专注模式、封装选区、节点渲染断点、增强只读、替代文本渲染

支持这个项目

如果 Canvas Enhance 帮到了你，请考虑给一个 ⭐ Star。这是对我最大的鼓励，也让更多人发现这个插件。

☕️ 支持作者

如果插件帮助到您，欢迎请作者喝杯咖啡～

许可证

GPL-3.0

致谢

基于 Developer-Mike 的 Advanced Canvas 项目，重命名并独立维护。

English

⚡ Supercharge your Obsidian Canvas. Flowcharts, mindmaps, and more — one plugin does it all.

📖 Usage Guide · 📋 Changelog · 🐛 Report Issue · 🇨🇳 中文文档

Why Canvas Enhance?

Obsidian Canvas is great, but it leaves gaps. Canvas Enhance fills them — without changing the native experience:

• Can't read nodes when zoomed out? Overview Mode fills each card with a large title so you can navigate at a glance
• Want a mindmap? Tab for child nodes, Enter for siblings, arrow keys to navigate — a full mindmap workflow
• Boring node styles? Flowchart shapes, border styles, custom CSS attributes — all from the right-click menu
• Canvas files are isolated? Metadata cache integrates .canvas into the graph view, backlinks, and outgoing links

Every feature can be toggled independently. Unused features have zero overhead.

Features

Overview Mode

Zoom out and nodes become unreadable. Overview Mode automatically replaces card content with large titles:

• File nodes show filename or first heading
• Text nodes show the first Markdown heading (# Title)
• Group labels scale up to stay readable
• Zoom back in past the threshold and everything restores automatically

Mindmap

Turn your canvas into a mindmap: Tab creates a child node, Enter creates a sibling, Alt+Arrow navigates between nodes. Child nodes inherit the parent's color.

Node & Edge Styles

Flowchart shapes (terminal, process, decision, database…), border styles, text alignment, 8 arrow types, path styles (solid/dotted/dashed), and automatic obstacle-avoiding edges — all from the right-click menu.

More Features

Custom CSS Styles

Define custom style attributes for nodes and edges via CSS snippets with YAML comments:

/* @canvas-enhance-node-style
key: validation-state
label: Validation State
options:
  - label: None
    value: null
    icon: circle-help
  - label: Approved
    value: approved
    icon: circle-check
*/

See example CSS file.

Installation

Community Plugin

Search Canvas Enhance in Obsidian → Settings → Community Plugins → Browse.

Manual

1. Create a canvas-enhance folder inside your vault's .obsidian/plugins/
2. Download main.js, styles.css, manifest.json from Releases
3. Enable the plugin in Settings → Community Plugins

Settings

Four tabs:

• Basic — General defaults, file templates, Overview Mode, commands, search, image export
• Mindmap — Node spacing, hotkeys, color propagation
• Nodes & Edges — Node/edge styles, custom styles, floating/flip edge, edge highlight/selection, auto-resize, aspect ratio, layer order, collapsible groups
• Advanced — Metadata, portals, focus mode, encapsulation, render breakpoints, readonly, text rendering

Support This Project

If Canvas Enhance helps you, consider giving it a ⭐ Star. It's the biggest encouragement and helps others discover the plugin.

License

GPL-3.0

Credits

Based on Advanced Canvas by Developer-Mike. Canvas Enhance continues development with a rename, refactoring, and new features.