# obsidian-note-constellation

**Repository Path**: caijiuuyk/obsidian-sample-plugin

## Basic Information

- **Project Name**: obsidian-note-constellation
- **Description**: obsidian-note-constellation
- **Primary Language**: JavaScript
- **License**: 0BSD
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-14
- **Last Updated**: 2025-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌌 Obsidian 笔记星图插件 (Note Constellation)

将你的 Obsidian 笔记转化为一个有机、动态的星系星图，让你的知识可视化变得更直观、更有沉浸感。

## ✨ 核心特性

### 🎨 有机视觉设计
- **多层次动态星空背景**：三层不同速度和亮度的星空，营造深邃宇宙感
- **星点式笔记节点**：优雅的光点设计，带有柔和辉光和悬停效果
- **纯净的初始界面**：隐藏默认标题，保持画面的简洁与沉浸

### 🌟 流畅交互体验
- **智能悬停反馈**：
  - 鼠标滑过时，节点平滑放大并显示标题
  - 直接相连的邻居节点和星轨会被瞬间点亮
  - 其他无关星点自动暗淡，实现聚焦效果
- **平滑视角转换**：点击节点时，星图会优雅地放大并将该节点置于中心
- **毛玻璃信息面板**：右侧滑出的信息面板采用半透明毛玻璃效果，清晰展示笔记详情

### 🔍 智能功能

#### 搜索 - 动态星图重组
- 输入搜索词时，匹配的笔记会**自动向视野中心聚集**形成集群
- 所有相关的连接会被高亮显示
- 无关笔记会退到背景中，实现“聚光灯”效果

#### 筛选 - 灵活知识组织
- **标签筛选**：按笔记标签快速过滤星图
- **孤立节点隐藏**：可选择隐藏没有任何连接的孤立笔记
- **优雅的过渡动画**：筛选结果平滑过渡，保持视觉连贯性

### 🚀 性能优化
- 加载时的智能布局计算
- 流畅的拖拽、缩放和平移操作
- 优化的渲染引擎，确保星图的流畅运行

## 📦 安装

1. 克隆或下载本仓库
2. 将 `main.js`、`styles.css`、`manifest.json` 复制到你的 Obsidian 仓库的插件目录：`VaultFolder/.obsidian/plugins/note-constellation/`
3. 在 Obsidian 设置中启用「笔记星图」插件
4. 点击左侧栏的 ribbon 图标或使用命令「打开笔记星图」即可体验

## 🛠️ 开发

### 环境要求
- NodeJS >= v16

### 开发流程

```bash
# 安装依赖
npm install

# 开发模式（实时编译）
npm run dev

# 生产构建
npm run build
```

## 📖 使用说明

1. **打开星图**：通过左侧栏图标或命令打开笔记星图视图
2. **探索笔记**：使用鼠标拖拽、缩放或点击节点来探索你的知识星系
3. **悬停查看**：将鼠标悬停在节点上查看详情
4. **搜索聚焦**：使用搜索功能快速定位相关笔记
5. **筛选整理**：利用标签筛选和孤立节点隐藏功能优化星图视图

## 🎯 技术栈
- TypeScript
- Obsidian Plugin API
- vis-network
- CSS3 动画与渐变

## 📝 License

MIT License

---

将你的知识组织成一颗美丽的宇宙星系，让探索知识变得更有趣、更直观！🌠

## First time developing plugins?

Quick starting guide for new plugin devs:

- Check if [someone already developed a plugin for what you want](https://obsidian.md/plugins)! There might be an existing plugin similar enough that you can partner up with.
- Make a copy of this repo as a template with the "Use this template" button (login to GitHub if you don't see it).
- Clone your repo to a local development folder. For convenience, you can place this folder in your `.obsidian/plugins/your-plugin-name` folder.
- Install NodeJS, then run `npm i` in the command line under your repo folder.
- Run `npm run dev` to compile your plugin from `main.ts` to `main.js`.
- Make changes to `main.ts` (or create new `.ts` files). Those changes should be automatically compiled into `main.js`.
- Reload Obsidian to load the new version of your plugin.
- Enable plugin in settings window.
- For updates to the Obsidian API run `npm update` in the command line under your repo folder.

## Releasing new releases

- Update your `manifest.json` with your new version number, such as `1.0.1`, and the minimum Obsidian version required for your latest release.
- Update your `versions.json` file with `"new-plugin-version": "minimum-obsidian-version"` so older versions of Obsidian can download an older version of your plugin that's compatible.
- Create new GitHub release using your new version number as the "Tag version". Use the exact version number, don't include a prefix `v`. See here for an example: https://github.com/obsidianmd/obsidian-sample-plugin/releases
- Upload the files `manifest.json`, `main.js`, `styles.css` as binary attachments. Note: The manifest.json file must be in two places, first the root path of your repository and also in the release.
- Publish the release.

> You can simplify the version bump process by running `npm version patch`, `npm version minor` or `npm version major` after updating `minAppVersion` manually in `manifest.json`.
> The command will bump version in `manifest.json` and `package.json`, and add the entry for the new version to `versions.json`

## Adding your plugin to the community plugin list

- Check the [plugin guidelines](https://docs.obsidian.md/Plugins/Releasing/Plugin+guidelines).
- Publish an initial version.
- Make sure you have a `README.md` file in the root of your repo.
- Make a pull request at https://github.com/obsidianmd/obsidian-releases to add your plugin.

## How to use

- Clone this repo.
- Make sure your NodeJS is at least v16 (`node --version`).
- `npm i` or `yarn` to install dependencies.
- `npm run dev` to start compilation in watch mode.

## Manually installing the plugin

- Copy over `main.js`, `styles.css`, `manifest.json` to your vault `VaultFolder/.obsidian/plugins/your-plugin-id/`.

## Improve code quality with eslint (optional)
- [ESLint](https://eslint.org/) is a tool that analyzes your code to quickly find problems. You can run ESLint against your plugin to find common bugs and ways to improve your code. 
- To use eslint with this project, make sure to install eslint from terminal:
  - `npm install -g eslint`
- To use eslint to analyze this project use this command:
  - `eslint main.ts`
  - eslint will then create a report with suggestions for code improvement by file and line number.
- If your source code is in a folder, such as `src`, you can use eslint with this command to analyze all files in that folder:
  - `eslint ./src/`

## Funding URL

You can include funding URLs where people who use your plugin can financially support it.

The simple way is to set the `fundingUrl` field to your link in your `manifest.json` file:

```json
{
    "fundingUrl": "https://buymeacoffee.com"
}
```

If you have multiple URLs, you can also do:

```json
{
    "fundingUrl": {
        "Buy Me a Coffee": "https://buymeacoffee.com",
        "GitHub Sponsor": "https://github.com/sponsors",
        "Patreon": "https://www.patreon.com/"
    }
}
```

## API Documentation

See https://github.com/obsidianmd/obsidian-api