Canvas From Headings

Canvas from Headings

English | 中文

将 Obsidian 笔记中的标题（H1 / H2 / H3...）自动转换为画布（Canvas）节点的插件。适用于人物关系梳理、故事结构可视化、知识图谱构建等场景。

本插件已完成架构重构，新增多视图面板、视图联动、可视化设置面板等能力，后续将持续扩展更多创作辅助模块。

---

中文

✨ 功能一览

📦 安装

🚀 快速开始

1. 安装插件 → 打开任意包含标题的 Markdown 笔记。
2. 触发生成 → 点击左侧 Ribbon 图标，或按 Ctrl/Cmd + P 搜索 "生成画布"。
3. 调整布局 → 在弹出的弹窗中确认选项（是否删除分组、是否删除连接线、是否使用简略尺寸）。
4. 手动微调 → 画布生成后进入手动布局模式，拖动节点调整位置。
5. 重建关系线 → 在画布空白处右键，选择 "是否按现有布局建立关系线？"。

🖥️ 面板与视图

插件提供两个独立视图面板，可通过命令面板打开：

💡 视图联动：在生成器面板中点击 "🔍 预览结构"，预览面板会自动打开（或更新内容），无需手动切换。

⌨️ 命令列表

⚙️ 设置项

在 设置 → 第三方插件 → Canvas from Headings 中配置：

📝 笔记格式建议

为获得最佳效果，建议笔记遵循以下结构：

# 主角组

## 张三【主角】

张三是一个少年。

### 关系
- **挚友** [[李四]]
- **师父** [[王五]]

## 李四

李四的简介。

# 配角组

## 王五

• H1 → 生成画布分组（如"主角组""配角组"）。
• H2 → 生成画布文本节点。
• ### 关系 下的 [[链接]] → 生成带标签的关系线。
• **粗体** → 作为关系线的标签文字。
• 【主角】 → 标记主角节点，插件会以该节点为中心进行布局。

🧱 架构说明

本插件采用分层架构，源码按职责拆分为以下模块：

src/
├── constants.ts           # 界面文字、布局常量
├── types/                 # 全局类型定义
├── core/
│   ├── EventBus.ts        # 事件总线（视图间通信）
│   ├── PluginState.ts     # 全局状态容器
│   ├── Settings.ts        # 设置管理器
│   └── events.ts          # 事件名常量
├── services/
│   ├── HeadingParser.ts   # 标题解析服务
│   ├── LayoutEngine.ts    # 布局计算引擎
│   ├── CanvasService.ts   # 画布文件读写
│   └── EdgeService.ts     # 关系线生成与重建
├── ui/
│   ├── views/             # 自定义视图（ItemView）
│   ├── modals/            # 设置页、弹窗
│   └── components/        # 可复用 UI 片段
└── utils/                 # 通用工具

• 服务层（services/）不依赖 UI，可独立测试。
• 视图层（ui/views/）通过 EventBus 通信，互不直接引用。
• 状态层（core/PluginState.ts）集中管理跨模块共享状态。

🛠️ 开发

# 安装依赖
npm install

# 编译（监听模式）
npm run dev

# 编译（单次）
npm run build

编译产物为项目根目录的 main.js。

📄 许可证

MIT

---

English

✨ Features

📦 Installation

🚀 Quick Start

1. Install the plugin → Open any Markdown note containing headings.
2. Trigger generation → Click the Ribbon icon, or press Ctrl/Cmd + P and search for "Generate Canvas".
3. Adjust layout → Confirm options in the modal (delete groups, delete edges, simple size).
4. Fine-tune manually → Drag nodes to adjust positions in manual layout mode.
5. Rebuild edges → Right-click on the canvas blank area and select "Rebuild edges from current layout?".

🖥️ Panels & Views

The plugin provides two independent view panels, accessible via the Command Palette:

💡 View Linking: Click "🔍 Preview Structure" in the Generator panel to automatically open (or update) the Preview panel.

⌨️ Commands

⚙️ Settings

Configure in Settings → Community Plugins → Canvas from Headings:

📝 Recommended Note Format

For best results, structure your notes as follows:

# Protagonist Group

## Zhang San【Protagonist】

Zhang San is a young boy.

### Relationships
- **Best Friend** [[Li Si]]
- **Master** [[Wang Wu]]

## Li Si

Li Si's profile.

# Supporting Group

## Wang Wu

• H1 → Creates canvas groups (e.g., "Protagonist Group").
• H2 → Creates canvas text nodes.
• [[Wikilinks]] under ### Relationships → Creates labeled edges.
• **Bold text** → Used as edge labels.
• 【Protagonist】 → Marks the protagonist node for centered layout.

🧱 Architecture

The plugin follows a layered architecture:

src/
├── constants.ts           # UI text, layout constants
├── types/                 # Global type definitions
├── core/
│   ├── EventBus.ts        # Event bus (inter-view communication)
│   ├── PluginState.ts     # Global state container
│   ├── Settings.ts        # Settings manager
│   └── events.ts          # Event name constants
├── services/
│   ├── HeadingParser.ts   # Heading parsing service
│   ├── LayoutEngine.ts    # Layout computation engine
│   ├── CanvasService.ts   # Canvas file I/O
│   └── EdgeService.ts     # Edge generation & rebuilding
├── ui/
│   ├── views/             # Custom views (ItemView)
│   ├── modals/            # Settings tab, modals
│   └── components/        # Reusable UI fragments
└── utils/                 # General utilities

• Service layer (services/) is UI-agnostic and independently testable.
• View layer (ui/views/) communicates via EventBus, no direct cross-references.
• State layer (core/PluginState.ts) manages cross-module shared state.

🛠️ Development

# Install dependencies
npm install

# Build (watch mode)
npm run dev

# Build (single run)
npm run build

Output is written to main.js in the project root.

📄 License

MIT

---