mirror of
https://github.com/ninglg/light-mindmap.git
synced 2026-07-22 06:51:49 +00:00
merge readme
This commit is contained in:
ninglg
parent
2f6eb1a56b
commit
4f5d52087a
2 changed files with 193 additions and 190 deletions
194
README.md
194
README.md
|
|
@ -1,6 +1,6 @@
|
|||
# Light Mindmap
|
||||
|
||||
**English** | [简体中文](README.zh-CN.md)
|
||||
**English** | [简体中文](#light-mindmap-1)
|
||||
|
||||
Auto-renders markdown headings as a colorful, interactive mindmap — no extra syntax required.
|
||||
|
||||
|
|
@ -186,3 +186,195 @@ mindmap-node: rounded
|
|||
## License
|
||||
|
||||
MIT
|
||||
|
||||
---
|
||||
|
||||
# Light Mindmap
|
||||
|
||||
[English](#light-mindmap) | **简体中文**
|
||||
|
||||
自动将 Markdown 标题渲染为色彩丰富、可交互的思维导图——无需额外语法。
|
||||
|
||||
## 预览
|
||||
|
||||
|
||||
|
||||
## 使用方法
|
||||
|
||||
在笔记的 frontmatter 中添加 `type: mindmap`，插件会自动将编辑/阅读视图替换为实时思维导图，导图内容来自笔记的标题层级。
|
||||
|
||||
```yaml
|
||||
---
|
||||
type: mindmap
|
||||
---
|
||||
|
||||
# My Plan
|
||||
## Life
|
||||
### walk the dog
|
||||
### cook dinner
|
||||
### call my parents
|
||||
## *Work*
|
||||
### write report
|
||||
### team discussion
|
||||
### send emails
|
||||
## *Study*
|
||||
### learn new words
|
||||
### listen to podcast
|
||||
### practice coding
|
||||
## Shopping
|
||||
### buy fruits
|
||||
### get stationery
|
||||
### pick up snacks
|
||||
|
||||
```
|
||||
|
||||
编辑源文件时，思维导图会实时更新。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 从标题自动生成导图
|
||||
|
||||
- 解析所有标题层级（`#` 到 `######`）为树状结构
|
||||
- 自动去除节点文本中的行内 Markdown 格式（粗体、斜体、链接、Wiki 链接、行内代码）
|
||||
- 当存在多个顶级标题时，会自动创建以文件名命名的虚拟根节点
|
||||
- 解析时自动跳过围栏代码块
|
||||
|
||||
### 布局模式
|
||||
|
||||
五种布局，可通过工具栏下拉菜单或命令切换：
|
||||
|
||||
| 布局 | 说明 |
|
||||
| ---------- | ---------------------------------------------- |
|
||||
| **均衡** | 子节点分布于根节点两侧，按子树高度加权分配 |
|
||||
| **向右** | 所有分支向右展开 |
|
||||
| **向左** | 所有分支向左展开 |
|
||||
| **树形** | 自上而下树状布局，根节点在顶部，分支向下展开 |
|
||||
| **放射** | 根节点居中，分支沿圆周向外辐射 |
|
||||
|
||||
### 主题
|
||||
|
||||
七套内置配色方案：
|
||||
|
||||
| 主题 | 风格 |
|
||||
| ---------- | ------------------------------------------ |
|
||||
| **活力** | 靛蓝/紫罗兰/粉红渐变——默认主题 |
|
||||
| **经典** | 暖色大地色调，奶油色背景 |
|
||||
| **清新** | 绿色与青色，薄荷色背景 |
|
||||
| **海洋** | 蓝色与靛色，浅蓝色背景 |
|
||||
| **日落** | 红、橙、粉暖色调，温暖背景 |
|
||||
| **午夜** | 深色底板搭配霓虹色彩 |
|
||||
| **石板** | 冷灰蓝色调，带淡雅科技网格纹理 |
|
||||
|
||||
主题会自动适配 Obsidian 的深色/浅色模式。
|
||||
|
||||
### 连线样式
|
||||
|
||||
| 样式 | 形状 | 虚线 |
|
||||
| ------------------ | ------------------ | ---- |
|
||||
| **平滑** | 三阶贝塞尔曲线 | 实线 |
|
||||
| **平滑虚线** | 三阶贝塞尔曲线 | 虚线 |
|
||||
| **直线** | 直线段 | 实线 |
|
||||
| **直角** | 水平 + 垂直折线 | 实线 |
|
||||
| **直角虚线** | 水平 + 垂直折线 | 虚线 |
|
||||
|
||||
### 节点形状
|
||||
|
||||
| 形状 | 外观 |
|
||||
| ---------- | ---------------------------- |
|
||||
| **圆角** | 圆角矩形（默认） |
|
||||
| **方角** | 直角矩形 |
|
||||
| **无边框** | 叶子节点无边框和背景 |
|
||||
| **胶囊** | 完全圆角的胶囊形 |
|
||||
| **涂鸦** | 手绘风格，带轻微随机旋转 |
|
||||
|
||||
### 平移与缩放
|
||||
|
||||
- **拖拽** 画布背景进行平移（支持鼠标和触屏）
|
||||
- **捏合** 进行触屏缩放
|
||||
- **滚轮** 上下/左右平移
|
||||
- **Ctrl/Cmd + 滚轮** 以光标为中心缩放
|
||||
- 工具栏按钮：**适配**（将所有节点适配到视窗）、**+** / **−**（步进缩放）
|
||||
|
||||
### 节点编辑
|
||||
|
||||
可直接在画布上编辑节点，修改会回写到 Markdown 源文件：
|
||||
|
||||
| 操作 | 手势 / 按键 |
|
||||
| -------------------------- | --------------------------------------- |
|
||||
| 选中节点 | 单击 |
|
||||
| 编辑节点文字 | 双击或按 **F2** |
|
||||
| 确认编辑 | **Enter** |
|
||||
| 确认编辑并添加子节点 | **Tab** |
|
||||
| 取消编辑 | **Escape** |
|
||||
| 添加同级节点（无需编辑） | 选中节点后按 **Enter** |
|
||||
| 添加子节点（无需编辑） | 选中节点后按 **Tab** |
|
||||
| 删除节点 | 选中节点后按 **Delete** 或 **Backspace**|
|
||||
| 折叠/展开节点 | 选中节点后按 **Space** |
|
||||
|
||||
- 根节点不可删除。
|
||||
- 在根节点上按 **Enter** 无效（根节点上方无法添加同级节点）。
|
||||
- 在已折叠节点上按 **Tab** 会自动展开并添加子节点。
|
||||
- 双击或按 **F2** 已折叠节点会自动展开并进入编辑模式。
|
||||
- 已折叠节点的文字后会显示 **+** 标记，导出 PNG 时也会保留该标记。
|
||||
|
||||
### 持久化设置
|
||||
|
||||
所有单文件显示偏好会写入 frontmatter，下次打开时自动恢复：
|
||||
|
||||
| Frontmatter 字段 | 可选值 |
|
||||
| ------------------ | -------------------------------------------------------------------------- |
|
||||
| `mindmap-layout` | `balanced` / `right` / `left` / `tree` / `radial` |
|
||||
| `mindmap-theme` | `vibrant` / `classic` / `fresh` / `ocean` / `sunset` / `midnight` / `slate`|
|
||||
| `mindmap-line` | `curve` / `straight` / `polyline` / `polyline-dashed` / `curve-dashed` |
|
||||
| `mindmap-node` | `rounded` / `square` / `borderless` / `circle` / `doodle` |
|
||||
|
||||
### 切换源码视图
|
||||
|
||||
- 工具栏中的 **Edit Markdown** 按钮可隐藏思维导图并显示浮动的 **Light Mindmap** 按钮
|
||||
- 从源码视图返回时会自动适配导图到视窗
|
||||
- 命令面板：**Toggle mindmap / source view**
|
||||
- 命令面板：**Cycle mindmap layout (balanced / right / left / tree / radial)**
|
||||
|
||||
### 外部链接
|
||||
|
||||
标题中的 Markdown 链接（`[文本](url)`）会直接在思维导图画布上渲染为可点击的链接。点击链接会在默认浏览器中打开。编辑节点时，链接会显示为纯文本以便修改。
|
||||
|
||||
### 导出 PNG
|
||||
|
||||
点击工具栏中的 **Export PNG** 按钮，将当前思维导图保存为高清 PNG 图片（2 倍分辨率）。系统文件对话框允许你选择保存位置。
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 Obsidian 社区插件安装（推荐）
|
||||
|
||||
1. 打开 **设置 → 社区插件 → 浏览**
|
||||
2. 搜索 **Light Mindmap**
|
||||
3. 点击 **安装**，然后 **启用**
|
||||
|
||||
### 手动安装
|
||||
|
||||
1. 从 [最新版本](https://github.com/ninglg/obsidian-light-mindmap/releases/latest) 下载 `main.js`、`manifest.json` 和 `styles.css`
|
||||
2. 将这三个文件复制到 `<vault>/.obsidian/plugins/obsidian-light-mindmap/` 目录下
|
||||
3. 重新加载 Obsidian，在 **设置 → 社区插件** 中启用该插件
|
||||
|
||||
## Frontmatter 示例
|
||||
|
||||
```yaml
|
||||
---
|
||||
type: mindmap
|
||||
mindmap-layout: balanced
|
||||
mindmap-theme: vibrant
|
||||
mindmap-line: curve
|
||||
mindmap-node: rounded
|
||||
---
|
||||
```
|
||||
|
||||
## 兼容性
|
||||
|
||||
- 最低 Obsidian 版本：**1.4.0**
|
||||
- 支持桌面端和移动端
|
||||
- 兼容 Obsidian 深色和浅色主题
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
|
|
|
|||
189
README.zh-CN.md
189
README.zh-CN.md
|
|
@ -1,189 +0,0 @@
|
|||
# Light Mindmap
|
||||
|
||||
[English](README.md) | **简体中文**
|
||||
|
||||
自动将 Markdown 标题渲染为色彩丰富、可交互的思维导图——无需额外语法。
|
||||
|
||||
## 预览
|
||||
|
||||
|
||||
|
||||
## 使用方法
|
||||
|
||||
在笔记的 frontmatter 中添加 `type: mindmap`，插件会自动将编辑/阅读视图替换为实时思维导图，导图内容来自笔记的标题层级。
|
||||
|
||||
```yaml
|
||||
---
|
||||
type: mindmap
|
||||
---
|
||||
|
||||
# My Plan
|
||||
## Life
|
||||
### walk the dog
|
||||
### cook dinner
|
||||
### call my parents
|
||||
## *Work*
|
||||
### write report
|
||||
### team discussion
|
||||
### send emails
|
||||
## *Study*
|
||||
### learn new words
|
||||
### listen to podcast
|
||||
### practice coding
|
||||
## Shopping
|
||||
### buy fruits
|
||||
### get stationery
|
||||
### pick up snacks
|
||||
|
||||
```
|
||||
|
||||
编辑源文件时，思维导图会实时更新。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 从标题自动生成导图
|
||||
|
||||
- 解析所有标题层级（`#` 到 `######`）为树状结构
|
||||
- 自动去除节点文本中的行内 Markdown 格式（粗体、斜体、链接、Wiki 链接、行内代码）
|
||||
- 当存在多个顶级标题时，会自动创建以文件名命名的虚拟根节点
|
||||
- 解析时自动跳过围栏代码块
|
||||
|
||||
### 布局模式
|
||||
|
||||
五种布局，可通过工具栏下拉菜单或命令切换：
|
||||
|
||||
| 布局 | 说明 |
|
||||
| ---------- | ---------------------------------------------- |
|
||||
| **均衡** | 子节点分布于根节点两侧，按子树高度加权分配 |
|
||||
| **向右** | 所有分支向右展开 |
|
||||
| **向左** | 所有分支向左展开 |
|
||||
| **树形** | 自上而下树状布局，根节点在顶部，分支向下展开 |
|
||||
| **放射** | 根节点居中，分支沿圆周向外辐射 |
|
||||
|
||||
### 主题
|
||||
|
||||
七套内置配色方案：
|
||||
|
||||
| 主题 | 风格 |
|
||||
| ---------- | ------------------------------------------ |
|
||||
| **活力** | 靛蓝/紫罗兰/粉红渐变——默认主题 |
|
||||
| **经典** | 暖色大地色调，奶油色背景 |
|
||||
| **清新** | 绿色与青色，薄荷色背景 |
|
||||
| **海洋** | 蓝色与靛色，浅蓝色背景 |
|
||||
| **日落** | 红、橙、粉暖色调，温暖背景 |
|
||||
| **午夜** | 深色底板搭配霓虹色彩 |
|
||||
| **石板** | 冷灰蓝色调，带淡雅科技网格纹理 |
|
||||
|
||||
主题会自动适配 Obsidian 的深色/浅色模式。
|
||||
|
||||
### 连线样式
|
||||
|
||||
| 样式 | 形状 | 虚线 |
|
||||
| ------------------ | ------------------ | ---- |
|
||||
| **平滑** | 三阶贝塞尔曲线 | 实线 |
|
||||
| **平滑虚线** | 三阶贝塞尔曲线 | 虚线 |
|
||||
| **直线** | 直线段 | 实线 |
|
||||
| **直角** | 水平 + 垂直折线 | 实线 |
|
||||
| **直角虚线** | 水平 + 垂直折线 | 虚线 |
|
||||
|
||||
### 节点形状
|
||||
|
||||
| 形状 | 外观 |
|
||||
| ---------- | ---------------------------- |
|
||||
| **圆角** | 圆角矩形（默认） |
|
||||
| **方角** | 直角矩形 |
|
||||
| **无边框** | 叶子节点无边框和背景 |
|
||||
| **胶囊** | 完全圆角的胶囊形 |
|
||||
| **涂鸦** | 手绘风格，带轻微随机旋转 |
|
||||
|
||||
### 平移与缩放
|
||||
|
||||
- **拖拽** 画布背景进行平移（支持鼠标和触屏）
|
||||
- **捏合** 进行触屏缩放
|
||||
- **滚轮** 上下/左右平移
|
||||
- **Ctrl/Cmd + 滚轮** 以光标为中心缩放
|
||||
- 工具栏按钮：**适配**（将所有节点适配到视窗）、**+** / **−**（步进缩放）
|
||||
|
||||
### 节点编辑
|
||||
|
||||
可直接在画布上编辑节点，修改会回写到 Markdown 源文件：
|
||||
|
||||
| 操作 | 手势 / 按键 |
|
||||
| -------------------------- | --------------------------------------- |
|
||||
| 选中节点 | 单击 |
|
||||
| 编辑节点文字 | 双击或按 **F2** |
|
||||
| 确认编辑 | **Enter** |
|
||||
| 确认编辑并添加子节点 | **Tab** |
|
||||
| 取消编辑 | **Escape** |
|
||||
| 添加同级节点（无需编辑） | 选中节点后按 **Enter** |
|
||||
| 添加子节点（无需编辑） | 选中节点后按 **Tab** |
|
||||
| 删除节点 | 选中节点后按 **Delete** 或 **Backspace**|
|
||||
| 折叠/展开节点 | 选中节点后按 **Space** |
|
||||
|
||||
- 根节点不可删除。
|
||||
- 在根节点上按 **Enter** 无效（根节点上方无法添加同级节点）。
|
||||
- 在已折叠节点上按 **Tab** 会自动展开并添加子节点。
|
||||
- 双击或按 **F2** 已折叠节点会自动展开并进入编辑模式。
|
||||
- 已折叠节点的文字后会显示 **+** 标记，导出 PNG 时也会保留该标记。
|
||||
|
||||
### 持久化设置
|
||||
|
||||
所有单文件显示偏好会写入 frontmatter，下次打开时自动恢复：
|
||||
|
||||
| Frontmatter 字段 | 可选值 |
|
||||
| ------------------ | -------------------------------------------------------------------------- |
|
||||
| `mindmap-layout` | `balanced` / `right` / `left` / `tree` / `radial` |
|
||||
| `mindmap-theme` | `vibrant` / `classic` / `fresh` / `ocean` / `sunset` / `midnight` / `slate`|
|
||||
| `mindmap-line` | `curve` / `straight` / `polyline` / `polyline-dashed` / `curve-dashed` |
|
||||
| `mindmap-node` | `rounded` / `square` / `borderless` / `circle` / `doodle` |
|
||||
|
||||
### 切换源码视图
|
||||
|
||||
- 工具栏中的 **Edit Markdown** 按钮可隐藏思维导图并显示浮动的 **Light Mindmap** 按钮
|
||||
- 从源码视图返回时会自动适配导图到视窗
|
||||
- 命令面板：**Toggle mindmap / source view**
|
||||
- 命令面板：**Cycle mindmap layout (balanced / right / left / tree / radial)**
|
||||
|
||||
### 外部链接
|
||||
|
||||
标题中的 Markdown 链接（`[文本](url)`）会直接在思维导图画布上渲染为可点击的链接。点击链接会在默认浏览器中打开。编辑节点时，链接会显示为纯文本以便修改。
|
||||
|
||||
### 导出 PNG
|
||||
|
||||
点击工具栏中的 **Export PNG** 按钮，将当前思维导图保存为高清 PNG 图片（2 倍分辨率）。系统文件对话框允许你选择保存位置。
|
||||
|
||||
## 安装
|
||||
|
||||
### 通过 Obsidian 社区插件安装（推荐）
|
||||
|
||||
1. 打开 **设置 → 社区插件 → 浏览**
|
||||
2. 搜索 **Light Mindmap**
|
||||
3. 点击 **安装**，然后 **启用**
|
||||
|
||||
### 手动安装
|
||||
|
||||
1. 从 [最新版本](https://github.com/ninglg/obsidian-light-mindmap/releases/latest) 下载 `main.js`、`manifest.json` 和 `styles.css`
|
||||
2. 将这三个文件复制到 `<vault>/.obsidian/plugins/obsidian-light-mindmap/` 目录下
|
||||
3. 重新加载 Obsidian，在 **设置 → 社区插件** 中启用该插件
|
||||
|
||||
## Frontmatter 示例
|
||||
|
||||
```yaml
|
||||
---
|
||||
type: mindmap
|
||||
mindmap-layout: balanced
|
||||
mindmap-theme: vibrant
|
||||
mindmap-line: curve
|
||||
mindmap-node: rounded
|
||||
---
|
||||
```
|
||||
|
||||
## 兼容性
|
||||
|
||||
- 最低 Obsidian 版本：**1.4.0**
|
||||
- 支持桌面端和移动端
|
||||
- 兼容 Obsidian 深色和浅色主题
|
||||
|
||||
## 许可证
|
||||
|
||||
MIT
|
||||
Loading…
Reference in a new issue