Code Nodes

A VS Code extension that combines a block-based Markdown editor with a live wiki-link graph — write notes in structured blocks, visualize how they connect.

Features

Block-Based Markdown Editor

Code Nodes is the default editor for .md files. Each document is split into blocks separated by blank lines. Blocks are edited individually and rendered as formatted Markdown.

• Click any block to edit it in-place
• Escape or click away to render it
• Syntax-highlighted code blocks — fenced code with a language tag (```python, ```typescript, etc.) renders with full syntax highlighting
• YAML frontmatter rendered as a clean key-value table
• [[Wiki links]] rendered as highlighted spans; autocomplete suggests existing notes as you type
• Drag handles to reorder blocks
• Add Block button or Down arrow on the last line to create a new block below

Wiki-Link Graph

Open the graph with the toolbar button or the command palette.

• Force-directed layout using Force Atlas 2 — built on Sigma.js for smooth performance with thousands of nodes
• Node size reflects connection count — highly linked notes appear larger
• Single-click any node to select it and highlight its direct neighbors
• Double-click any node to open that note in the editor
• Ghost nodes shown for wiki links that reference files that don't exist yet — double-click to create them; automatically hidden on graphs with 500+ nodes
• Ghost toggle — show or hide ghost nodes with the Ghosts checkbox in the settings panel
• Run / Freeze button — start or pause the physics simulation at any time
• Drag to pin — drag any node to reposition it; pinned nodes are tinted gold and hold their position when physics runs; pin state survives session restarts
• Unpin controls — right-click a pinned node to unpin it individually; the ⊗ Unpin (N) toolbar button clears all pins at once and shows how many are active
• Active note highlighted in green
• Adjustable physics — Scaling Ratio, Gravity, and Slow Down sliders persist across sessions
• Hub labels — only nodes with more connections than the Hub Label Threshold always show their label, keeping large graphs readable

Folder Groups

Organise notes into subfolders inside your workspace. Code Nodes tracks which folder each note belongs to and uses it to seed initial node positions, keeping related notes naturally close together in the graph.

• Any subfolder depth is supported — projects/Notes.md, projects/api/Reference.md, etc.
• Folder membership travels with the node — drag freely and the group relationship is preserved

Full-Text Graph Search

A search bar sits at the top of the graph panel and searches across both note names and note content.

• Type any term to dim all nodes whose name and content don't contain a match
• Edges dim automatically when both of their endpoints are dimmed
• Matches note names and file content — useful when you know the topic but not which note covers it
• Pulsing border on the input indicates a search is in progress
• Clear with the ✕ button or press Escape

Daily Notes

Quickly capture today's thoughts without interrupting your flow.

• Opens (or creates) a note named after today's date in a daily/ subfolder
• Notes are pre-filled with a heading formatted as the full date (e.g. # April 5, 2026)
• Each day gets its own file — previous daily notes are preserved

Usage

Editor

Graph

Commands

Wiki-Links

[[Note Name]] links are resolved by filename across the entire workspace, regardless of which folder the file lives in. Moving a note into a subfolder never breaks existing links.

Note name uniqueness — each note name must be unique across your whole workspace, even across folders. If two files share the same name (e.g. games/Notes.md and projects/Notes.md), Code Nodes will warn you and only one will appear in the graph. Rename one of the files to resolve the conflict.

Tech Stack