Obsidian - Candy Canvas and Canvas Style Menu

Obsidian Canvas ships with basic, square “card” layouts and limited styling—so the practical workaround is to bolt on community CSS upgrades. The biggest leap comes from “Canvas Candy,” a paid CSS snippet/vault by TFT hacker that replaces Canvas’s plain boxes with richer shapes, gradients, and cleaner borders, enabling flowchart-like visuals and more expressive TTRPG organization.

Out of the box, Canvas lets users drag in cards and notes, link notes together, and arrange them visually—but the styling stays constrained: cards are essentially square, line/border options are minimal, and there’s little control over shapes or line aesthetics. The tutorial frames Canvas as functional but not feature-complete, especially compared with Excalidraw (a plugin-based alternative) where circles, diamonds, emojis, and images are easier to place with more freedom. The focus then shifts from “should you use Canvas?” to “how to make Canvas usable for real diagramming.”

Canvas Candy is presented as the upgrade path. After purchase (listed at $1.199.99), users can download a vault containing examples of what the CSS can do. The key improvement is visual variety: different shapes, grouped layouts, gradient-filled boxes, and border styles that make Canvas look less like a note board and more like a diagramming surface. A notable example is a manually assembled organizational chart—cards dragged and connected by hand—highlighting what’s possible today even though there’s no automatic hierarchy generation from note metadata.

However, Canvas Candy’s workflow has a friction point: it relies on “stencils,” meaning users must copy CSS class references into their vault to apply the styles. To reduce that overhead, the tutorial introduces “Obsidian Canvas Style Menu,” a plugin that adds a right-click menu system to Canvas. Instead of manually wiring CSS classes, users select border styles, shapes, transparency, rotation, text alignment, and link styles (straight, elbow, dashed, dotted, directional, thicker lines) from menus. The result is a more efficient way to use Canvas Candy’s styling without repeatedly editing CSS class names.

The tutorial also walks through how to install Canvas Style Menu via Brat (beta plugin manager) when it isn’t yet available in the marketplace, then how to integrate Canvas Candy with it. The integration uses a Canvas Candy JSON package file placed into the Canvas Style Menu “packages” folder, after which Canvas Style Menu can expose Canvas Candy’s options in its dropdowns. Once both are wired together, right-clicking “add card” surfaces the expanded styling controls—circles, parallelograms, gradients, fills, and more—while still allowing Canvas’s note linking.

The overall takeaway is pragmatic: Canvas becomes genuinely diagram-friendly when paired with Canvas Candy for design power and Canvas Style Menu for speed. The tutorial closes by noting Canvas can still feel slow and clunky for heavy editing, but the styling gap is largely addressed by these community tools—effectively turning Canvas into a flowchart-capable workspace rather than a limited card grid.