obsidian-plugin/svm0n_obsidian-inline-graph
1
0
Fork 0
mirror of https://github.com/svm0n/obsidian-inline-graph.git synced 2026-07-22 08:32:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
svm0n_obsidian-inline-graph/README.md
SVM0N 379725ae59 Add cropped screenshots to README 
Show the gr code block source alongside its rendered graph. Images
are cropped to just the note content (no OS chrome, sidebar, or
other tab names) and stripped of ICC/EXIF/XMP metadata.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-18 03:06:36 +08:00

3.3 KiB
Raw Permalink Blame History

Inline Graph

An Obsidian plugin that renders interactive, force-directed node graphs inline in your notes from a simple gr code block. Like the native graph view, but for arbitrary ideas you define on the spot, not vault links.

  • Force-directed physics layout, animated, settles automatically
  • Draggable nodes (dragging reheats the simulation)
  • Colored, labelled nodes
  • Hover a node to expand it and show a tooltip with its text
  • Follows your Obsidian theme (light/dark) via CSS variables
  • Zero dependencies, no build step, works on mobile

Usage

Add a fenced code block with the language gr:

```gr
node1-node2; node2-node3; node2-node4: [
node1:{name="Name1",color="black",text="hello world"};
node2:{name="Name2",color="blue",text="hello world2"}
]
```

Syntax

<edges> : [ <node metadata> ]

Edges are pairs of node ids joined by - (undirected) or -> (directed, rendered with an arrowhead), separated by ; (newlines are fine too):

a-b; b->c; a-c

Height of the graph defaults to 320px. Override it per block with a directive on the first line:

height=480
a-b; b-c

Node metadata is optional, lives inside [ ... ], one entry per node:

id:{name="Label", color="blue", text="tooltip text"}
Property Meaning Default
name Label shown under the node the node id
color Any CSS color (#f50, blue, var(--color-red)) theme accent color
text Tooltip shown on hover none (no tooltip)

All parts are forgiving: the trailing : is optional, metadata is optional, and nodes that only appear in edges get sensible defaults. A minimal block like ```gr a-b; b-c ``` works.

Node ids may contain letters, digits, and underscores.

Screenshots

The block above, as source and as the rendered, draggable graph:

A gr code block in Obsidian's editor The same block rendered as an interactive force-directed graph

Install

Manual (current method)

  1. Download manifest.json, main.js, and styles.css from this repo (either clone it, or download all three files from the latest release).
  2. Create a folder named inline-graph inside your vault's plugin directory and place all three files there, so you end up with: 
    YourVault/.obsidian/plugins/inline-graph/manifest.json
YourVault/.obsidian/plugins/inline-graph/main.js
YourVault/.obsidian/plugins/inline-graph/styles.css
  3. In Obsidian: Settings → Community plugins, turn off Restricted mode if needed, hit the reload icon, and enable Inline Graph.

Via BRAT

  1. Install the BRAT plugin.
  2. BRAT settings → Add beta plugin → paste this repo's URL.

Notes

  • Renders in reading mode and in live preview once the cursor leaves the block.
  • The simulation is intentionally lightweight (O(n²) repulsion); it is meant for idea-sized graphs of up to a few dozen nodes, not whole-vault visualization.
  • Clicking nodes currently does nothing. Click-to-open-note is a planned option (see HANDOFF.md).

License

MIT