ObsiViewer/docs/GRAPH_SETTINGS_QUICK_START.md

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
• Configuration Reference
• API Documentation

🎉 Example Configs

Minimalist View

{
  "showTags": false,
  "showAttachments": false,
  "hideUnresolved": true,
  "showOrphans": false,
  "showArrow": false,
  "nodeSizeMultiplier": 0.8,
  "lineSizeMultiplier": 0.5
}

Colorful Project View

{
  "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

{
  "repelStrength": 5,
  "linkDistance": 80,
  "centerStrength": 1.2,
  "nodeSizeMultiplier": 0.6
}

---

Happy graphing! 🎨📊