Obsidian as a Claude Code Companion: Viewing AI Output in Style

Turn Obsidian into a viewer for Claude Code output with live markdown preview, graph view, and cross-device sync via GitHub.

Chris Groves

Chris Groves

— 3 min read
Hero image for Obsidian as a Claude Code Companion: Viewing AI Output in Style

Claude Code generates markdown. Session logs, plans, documentation, configuration files - typically sitting in your working directory or ~/.claude as plain text. You could read them in VS Code. You could use cat. But there's a better way.

I use Obsidian as my Claude Code companion. It renders markdown beautifully, visualizes file relationships through graph view, and syncs across devices via GitHub. While VS Code handles markdown preview, Obsidian adds graph visualization and keyboard-driven navigation that fits a CLI workflow. Here's how to set it up.

Step 1: Create a Vault at Your Claude Root

Obsidian works with "vaults" - folders it treats as interconnected knowledge bases. The trick is pointing your vault at where Claude already puts its files.

  1. Open Obsidian
  2. Click Open folder as vault
  3. Navigate to ~/.claude (or your project directory where Claude works)
  4. Select Open

That's it. Every markdown file Claude generates is now browsable with live preview, internal linking, and search.

Step 2: Enable "Detect All File Extensions"

This is a setting that's easy to overlook. By default, Obsidian only shows .md files. But Claude generates .json, .txt, .yaml, and more.

  1. Go to Settings (gear icon)
  2. Navigate to Files & Links
  3. Enable Detect all file extensions

Now your file explorer shows everything. PDFs render inline. JSON configs are visible. You can explore your entire Claude workspace without switching tools.

For editing non-markdown text files, install the Custom File Extensions Plugin. It lets you register .txt, .json, and other extensions to open in the markdown editor. Note that syntax highlighting quality varies by file type.

Step 3: Set Up GitHub Sync

Cross-device access adds flexibility. Work with Claude on your desktop, review on your tablet, quick-reference on your phone.

Install the Obsidian Git Plugin:

  1. Go to Settings > Community Plugins
  2. Turn off Safe Mode (required for community plugins)
  3. Click Browse and search for "Obsidian Git"
  4. Install and enable it

Configure Git:

  1. Generate a GitHub Personal Access Token (fine-grained tokens recommended)
  2. Create a private repository for your vault - this protects sensitive AI outputs, logs, and any API keys that might appear in configuration files
  3. In the plugin settings, configure your remote URL
  4. Important: Turn OFF "Disable Push" to enable syncing to GitHub

The plugin auto-commits and pushes on an interval you configure. It includes a diff viewer for version comparison. Note: Mobile sync works on Android with HTTPS; iOS may require additional workarounds.

Step 4: Use Live Preview Mode

Obsidian offers three view modes:

  • Source Mode: Raw markdown at all times
  • Reading Mode: Full render, no editing
  • Live Preview: Renders markdown except where your cursor is

Live Preview works well for reviewing Claude output. You see clean, formatted content while retaining the ability to make quick edits. Toggle with Ctrl+E (Windows/Linux) or Cmd+E (Mac).

Bonus: Graph View for Session Archaeology

Open graph view with Ctrl+G. You'll see your notes as nodes with connections based on internal links.

This can be useful for Claude work - but note that graph view only shows connections when files contain [[wiki-style links]]. If you add links between your session files and outputs, you can visualize those relationships. Claude doesn't create these links automatically, so this feature requires manual linking on your part.

Use Local Graph (right-click a file) to see what connects to a specific document.

Useful Hotkeys

Shortcut Action
Ctrl+O (Cmd+O) Quick Switcher - jump to any file
Ctrl+P (Cmd+P) Command Palette - all actions
Ctrl+Shift+F (Cmd+Shift+F) Global search across vault
Ctrl+E (Cmd+E) Toggle Live Preview / Reading mode
Ctrl+G (Cmd+G) Open graph view

All shortcuts are fully customizable in Settings > Hotkeys.

Optional Plugins for Power Users

Dataview: Query your vault like a database. List all files modified today, create dynamic task trackers, or build dashboards. Useful if you maintain structured session notes.

Templater: Create reusable note templates with dynamic content. Useful if you want consistent formatting for session notes.

CSS Snippets: Customize Obsidian's appearance with custom stylesheets. Add them to .obsidian/snippets/ and enable in Settings > Appearance.

Why This Works

Most Obsidian guides focus on note-taking systems and personal knowledge management. This is different. You're not creating notes - you're viewing AI-generated content in a format that makes sense.

Claude Code already outputs structured markdown with frontmatter, headings, and code blocks. Obsidian renders it properly while adding navigation, search, and sync. No workflow changes required - just a better viewing experience.

Sources

Official Documentation

Plugins & Tools

Tutorials & Guides

Read more