190 lines
4.9 KiB
Markdown
190 lines
4.9 KiB
Markdown
# Graph Settings - Quick Start
|
|
|
|
Get started with the new Graph Settings feature in 5 minutes!
|
|
|
|
## 🚀 Quick Overview
|
|
|
|
The Graph Settings panel lets you customize your graph view just like Obsidian:
|
|
- **Filter** what appears in the graph
|
|
- **Color** nodes by tags, files, or paths
|
|
- **Adjust** visual appearance
|
|
- **Fine-tune** physics forces
|
|
|
|
All settings are saved to `.obsidian/graph.json` and sync automatically.
|
|
|
|
## 📝 How to Use
|
|
|
|
### 1. Open Settings
|
|
|
|
Click the **gear icon (⚙️)** in the top-right corner of the graph view.
|
|
|
|
### 2. Explore Sections
|
|
|
|
The panel has 4 collapsible sections:
|
|
|
|
#### 🔍 **Filters**
|
|
Control which nodes appear:
|
|
- **Search**: Type to filter by node name
|
|
- **Tags**: Toggle to show/hide tag nodes
|
|
- **Attachments**: Toggle to show/hide attachment files
|
|
- **Existing files only**: Show only notes that exist (hide broken links)
|
|
- **Orphans**: Toggle to show/hide notes with no connections
|
|
|
|
#### 🎨 **Groups**
|
|
Color nodes based on criteria:
|
|
1. Click **"New group"**
|
|
2. Choose a color (click the color circle)
|
|
3. Enter a query:
|
|
- `tag:#work` - Color all notes with #work tag
|
|
- `file:meeting` - Color notes with "meeting" in filename
|
|
- `path:projects` - Color notes in projects folder
|
|
4. Use duplicate/delete icons to manage groups
|
|
|
|
#### 👁️ **Display**
|
|
Adjust visual appearance:
|
|
- **Arrows**: Show direction of links
|
|
- **Text fade threshold**: When to hide node labels
|
|
- **Node size**: Make nodes bigger/smaller
|
|
- **Link thickness**: Make connections thicker/thinner
|
|
- **Animate**: Restart the physics simulation
|
|
|
|
#### ⚡ **Forces**
|
|
Fine-tune physics:
|
|
- **Center force**: Pull nodes toward center
|
|
- **Repel force**: Push nodes apart
|
|
- **Link force**: Pull connected nodes together
|
|
- **Link distance**: Preferred spacing between linked nodes
|
|
|
|
### 3. See Changes Live
|
|
|
|
All changes apply immediately to the graph!
|
|
|
|
### 4. Close Panel
|
|
|
|
- Click the **X** button
|
|
- Press **Esc** key
|
|
- Click outside (mobile only)
|
|
|
|
## 💡 Common Use Cases
|
|
|
|
### Hide Clutter
|
|
**Goal**: Show only your main notes, no tags or orphans
|
|
|
|
1. Open Filters section
|
|
2. Uncheck "Tags"
|
|
3. Uncheck "Orphans"
|
|
4. Check "Existing files only"
|
|
|
|
### Color by Topic
|
|
**Goal**: Color notes by their main tag
|
|
|
|
1. Open Groups section
|
|
2. Click "New group"
|
|
3. Set query: `tag:#work` and choose red
|
|
4. Click "New group" again
|
|
5. Set query: `tag:#personal` and choose blue
|
|
6. Click "New group" again
|
|
7. Set query: `tag:#learning` and choose green
|
|
|
|
### Make Graph Compact
|
|
**Goal**: Tighter, smaller graph
|
|
|
|
1. Open Forces section
|
|
2. Increase "Repel force" to push nodes apart less
|
|
3. Decrease "Link distance" to bring connected nodes closer
|
|
4. Open Display section
|
|
5. Decrease "Node size" to make nodes smaller
|
|
|
|
### Make Graph Spread Out
|
|
**Goal**: Looser, bigger graph
|
|
|
|
1. Open Forces section
|
|
2. Increase "Repel force" to push nodes apart more
|
|
3. Increase "Link distance" for more spacing
|
|
4. Open Display section
|
|
5. Increase "Node size" if needed
|
|
|
|
## 🎯 Pro Tips
|
|
|
|
1. **Search is powerful**: Use it to highlight specific notes in the graph
|
|
2. **Order matters**: In Groups, first matching group wins - reorder if needed
|
|
3. **Animate button**: Hit this after changing forces to see immediate effect
|
|
4. **External edits**: Edit `.obsidian/graph.json` directly - UI updates in ~2 seconds
|
|
5. **Reset section**: Each section has a reset button (hover over title)
|
|
6. **Reset all**: Click the refresh icon in panel header to reset everything
|
|
|
|
## 📱 Mobile Tips
|
|
|
|
- Panel takes full screen on mobile
|
|
- Swipe down or tap outside to close
|
|
- All features work the same as desktop
|
|
|
|
## 🔧 Keyboard Shortcuts
|
|
|
|
- **Esc**: Close settings panel
|
|
- **Tab**: Navigate between controls
|
|
- **Enter/Space**: Activate buttons and toggles
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Settings not saving?
|
|
- Check browser console for errors
|
|
- Verify `.obsidian` folder exists in vault
|
|
- Restart server if needed
|
|
|
|
### Panel not opening?
|
|
- Clear browser cache
|
|
- Check for JavaScript errors
|
|
- Refresh the page
|
|
|
|
### Graph not updating?
|
|
- Settings change immediately - if not, check console
|
|
- Try clicking "Animate" button
|
|
- Refresh page as last resort
|
|
|
|
## 📚 Learn More
|
|
|
|
- [Full Documentation](./GRAPH_SETTINGS.md)
|
|
- [Configuration Reference](./GRAPH_SETTINGS.md#configuration-structure)
|
|
- [API Documentation](./GRAPH_SETTINGS.md#api-endpoints)
|
|
|
|
## 🎉 Example Configs
|
|
|
|
### Minimalist View
|
|
```json
|
|
{
|
|
"showTags": false,
|
|
"showAttachments": false,
|
|
"hideUnresolved": true,
|
|
"showOrphans": false,
|
|
"showArrow": false,
|
|
"nodeSizeMultiplier": 0.8,
|
|
"lineSizeMultiplier": 0.5
|
|
}
|
|
```
|
|
|
|
### Colorful Project View
|
|
```json
|
|
{
|
|
"colorGroups": [
|
|
{ "query": "tag:#project", "color": { "a": 1, "rgb": 14701138 } },
|
|
{ "query": "tag:#idea", "color": { "a": 1, "rgb": 9699539 } },
|
|
{ "query": "tag:#done", "color": { "a": 1, "rgb": 5763719 } }
|
|
]
|
|
}
|
|
```
|
|
|
|
### Dense Network
|
|
```json
|
|
{
|
|
"repelStrength": 5,
|
|
"linkDistance": 80,
|
|
"centerStrength": 1.2,
|
|
"nodeSizeMultiplier": 0.6
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
**Happy graphing!** 🎨📊
|