Skip to content

Add visual-notes markdown code block for inline embedded graphs #27

Description

@bobthearsonist

Feature

Support a ```visual-notes markdown fence in any watched note that becomes an inline-rendered graph at that location in the note's preview. Currently the renderer mounts a single graph at the top of the markdown preview; this feature gives users explicit control over where the graph appears, and supports multiple sidecar-bound graphs per note (e.g., an AI session summary that wants its visual in a dedicated ## Session Visual section).

Motivation

docs/design.md lists this as an existing capability:

explicit visual-notes code blocks can reserve a persistent visual slot in AI session summary templates

The obsidian-notes skill's session-summary template already includes the empty \``visual-notes\n```block expecting this to work. Today the plugin'sregisterMarkdownPostProcessor` mounts a single auto-positioned container per note instead — the code-block path was started but never landed.

Current state — WIP on feat/visual-notes-codeblock

Branch feat/visual-notes-codeblock at commit 3f85310 carries the in-flight implementation (~140 lines):

  • src/main.tsregisterMarkdownCodeBlockProcessor("visual-notes", ...) + mountVisualNotesCodeBlock lifecycle
  • src/renderer.ts — added removeContainerOnUnload / removeDuplicates options to VisualNotesRenderChild so code-block mounts can manage their own container lifecycle
  • src/anthropic.ts (new) — extracted validateAnthropicApiKey + classifyAnthropicFailure from extractor.ts into a dedicated module
  • test/feature/anthropic.test.ts (new) — tests for the extracted helpers
  • styles.css.visual-notes-codeblock-container + .visual-notes-codeblock-host mount styles
  • Doc updates across README + design.md + skill docs

What's left to ship

  • test/feature/main.test.ts (or equivalent) covering the code-block processor: detect, mount, unmount, dedup-against-postprocessor-mount
  • Hand-verify in Obsidian — open an AI session note that contains a visual-notes code block, confirm the graph mounts inline at the block's position (not at the top of the preview), confirm unmount cleans up correctly when the note is closed
  • Confirm dedup behavior when a note has BOTH a code block AND the auto-postprocessor mount: only one container should render
  • Rebase onto current main (122d26d) — the branch was forked from eb7c152 before PR feat(obsidian): #21 visual fidelity pass — styling parity + layout repair #23 merged, so it needs a rebase to pick up the post-Improve plugin visual generation to match legacy hook-rendered boards #21 changes (label-sized nodes, hover handler, edge fixes, repair-pass refactor)
  • Run full validate suite + manual QA pass

Branch + worktree

  • Branch: feat/visual-notes-codeblock (pushed to origin)
  • Local worktree: ~/Repositories/visual-notes-codeblock

Risk / dependencies

Out of scope

  • Multiple distinct sidecars per note. The current sidecar contract is one *-overview.json per *.md file; multiple code blocks in one note all bind to that single sidecar (or fail loudly). Multi-sidecar is a separate, larger feature.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions