A Logseq plugin that transforms hierarchical block trees into interactive visual diagrams. One click turns any page or block into a polished diagram — no data export, no external tools required.
Targets Logseq DB (SQLite) graphs only.
| View | Description |
|---|---|
| Tree Chart | Root top-left, branches flow right with bezier curves and colored background zones |
| Tree Table | Spanning-cell matrix with alternating row stripes and semantic column headers |
| Roadmap ↕ | Horizontal timeline with phase cards alternating above/below the spine |
| Roadmap → | Linear timeline with all phase cards below the spine |
| Mind Map | Bilateral layout — branches split left/right from a central root |
| Right Tree | Classic left-to-right org chart with all branches stacked right |
| Fishbone | Ishikawa diagram with angled bones and sub-bone boxes |
| Treemap | Nested rectangles with content-aware cell sizing and hover breadcrumbs |
- Canvas2D with zero external rendering dependencies
- Multi-line text wrapping with adaptive node widths based on content length
- Recursive depth rendering — Tree Chart, Right Tree, and Mind Map render arbitrary depth levels as independent connected nodes
- HiDPI rendering via
devicePixelRatioscaling - Pan/zoom with pointer drag, scroll wheel, pinch-to-zoom, and keyboard controls
- Click any node to navigate to that block in the Logseq editor (and focus its relationships — see below)
- View switching with fade animation between all 8 views
- Treemap breadcrumbs — hover any cell to see its full hierarchy path
- Fit-to-view resets zoom to show the entire diagram
Visualize cross-hierarchy relationships between blocks using user-created DB properties of type :node. Five relationship kinds are recognised, each with its own color and its own dash pattern (so they stay distinguishable in grayscale and for colorblind readers):
| Property | Meaning | Line |
|---|---|---|
relates_to |
symmetric association | dashed gray, no arrow |
depends_on |
A needs B | solid orange arrow |
supports |
A backs up B | long-dashed green arrow |
contradicts |
A argues against B | short-dashed red arrow |
part_of |
A is a component of B | dash-dot purple arrow |
Only relates_to is undirected; the other four draw an arrowhead at the target.
Create whichever properties you need once on any block via Logseq's property UI, then assign other blocks as their values. Property idents are matched, so the -XYZ suffix Logseq appends is fine and renaming the property later doesn't break the connector. OutlineCanvas surfaces them in Tree Chart, Right Tree, and Mind Map views with a lazy-edges UX:
- At rest: clean tree, no edges. Every node carrying refs shows small corner badges —
→Noutgoing (orange),←Nincoming (gray). - Click a node: the node gets an accent halo; its outgoing + incoming edges fade in. Click another node = focus switches. Click empty canvas = unfocus.
- Stacked-column routing: when source and target sit in the same column, the bezier arcs outward instead of slicing through intermediate boxes.
- Optional labels: enable Label Relationship Connectors in settings to show the property name as a small pill at each curve's midpoint.
Your own relationship kinds — the five built-ins are just defaults. Any property becomes a relationship kind by tagging it semantic-connector (the tag name is configurable), or by naming it in Extra Relationship Kinds / the popover's add field. Custom kinds get a color and dash pattern assigned deterministically from their name, and are drawn with an arrowhead unless listed in Undirected Kinds.
The popover's Also in this graph section lists every node-typed property that isn't a kind yet — tick one to enable it, no typing involved. (Only node-typed properties are offered; a text or number property can't hold a block reference, so it could never draw a connector.)
You can add a name before the property exists — the kind appears in the legend marked not in graph and draws nothing until a property with that name shows up, at which point connectors appear on their own. Remove a kind you added with the × on its row; built-ins can only be hidden (uncheck them), and a tag-discovered kind goes away when you remove the marker tag from its property.
The Relations popover — the ◈ canvas toolbar's relations button opens scope, connector visibility, labels, and the kind legend, so you can change what you're looking at without leaving the diagram. Each kind shows the exact line the canvas draws, with a checkbox to hide it. Cmd/Ctrl+Shift+G flips page ↔ graph scope directly.
Connector visibility — the Connector Visibility setting picks when curves are drawn: lazy (default, only for the node you click), always (every connector stays drawn, matching the PNG export), or off (no curves, but badges and halo remain).
Cross-page relationships — by default connectors only draw between blocks both visible in the diagram; refs pointing elsewhere are dropped silently. Set Relationship Scope to graph and off-page endpoints appear as dashed ghost nodes in a gutter on the right, with their edges drawn normally. This works in both directions: refs out of the page, and refs into it from blocks on other pages (found via a reverse query, one per render). Ghosts are capped at 12 most-connected, with a +N more off-page note; click one to jump to that block. Badge counts always reflect the true totals, so a capped diagram never understates how connected a node is.
Two toolbar buttons capture the current view as a PNG (WYSIWYG — current pan/zoom, all edges visible regardless of focus):
- ⬇ Download — saves
outline-canvas-<view>-<timestamp>.pngto your downloads folder - 📋 Copy — writes the image to your clipboard for pasting into any block or document
- Docked mode (default): canvas opens as a fixed strip on the right. Your notes stay visible on the left, and Logseq's right sidebar opens beside the canvas (not under it). Toggle the right sidebar freely with
T R— it doesn't close the canvas. - Full-screen mode: canvas covers the entire viewport for maximum diagram space.
- Toggle between docked and full-screen with the toolbar button or
Cmd+Shift+O.
Adjusting the canvas width. Drag the slim handle on the canvas's left edge to resize it live (between 20 % and 70 % of the viewport). The width persists across sessions as the Canvas Width (vw) plugin setting.
Dock behavior — settable in plugin settings:
mirror(default): the canvas reserves its space in the app layout. The right sidebar opens to the left of the canvas without overlap.overlay: the canvas floats above the app without resizing it. The right sidebar opens under the canvas. Useful if you'd rather keep the main content full-width and treat the canvas as a transient overlay.
Embed static diagram images directly in your notes:
{{renderer :outline-canvas}}
{{renderer :outline-canvas, mind}}
{{renderer :outline-canvas, fish}}
Add child blocks beneath the macro block — they become the tree. Click the inline image to open the full interactive canvas.
Automatically adapts to Logseq's light and dark themes. Switches live when you toggle the theme.
- Deuteranopia-safe color palette — no red-green adjacency
- Unique dash patterns per branch color for color-blind users
- WCAG 2.1 AA contrast ratios (4.5:1 minimum) on all text; relationship connector overlays target the 3:1 graphical-element ratio
- Keyboard navigation: arrows to pan, +/- to zoom, 0 to fit, Esc to close
git clone https://github.com/hdansou/logseq-outline-canvas
cd logseq-outline-canvas
npm install
npm run dev- In Logseq, go to Settings > Advanced and enable Developer mode
- Click ... menu > Plugins > three-dot menu > Load plugin from web url
- Enter
http://127.0.0.1:8090/and click Install
npm run buildOutput goes to dist/.
| Trigger | Action |
|---|---|
| Toolbar button (◈) | Open OutlineCanvas for the current page |
Cmd+Shift+O |
Open OutlineCanvas / toggle docked ↔ full-screen |
/outline |
Open OutlineCanvas focused on the current block |
/outline-canvas |
Insert inline macro renderer at cursor |
| Setting | Default | Description |
|---|---|---|
| Default View | tree |
Which diagram view to show on open |
| Maximum Depth | 3 |
How many nesting levels to render |
| Depth Mode | recursive |
recursive: independent nodes per level. flat: breadcrumb leaf labels |
| Show Empty Blocks | false |
Include blocks with no title |
| Animate View Transitions | true |
Fade animation when switching views |
| Show Relationship Connectors | true |
Master toggle for relates_to / depends_on overlays (edges, badges, halo, labels) |
| Label Relationship Connectors | false |
Show the property name as a small pill at the midpoint of each visible connector |
| Layer | Technology |
|---|---|
| Plugin SDK | @logseq/libs |
| Build | Vite + vite-plugin-logseq |
| Language | TypeScript (strict) |
| Rendering | Canvas2D (zero dependencies) |
| Font | IBM Plex Mono (Google Fonts CDN) |
MIT