Canvas

InkStone can publish Obsidian .canvas files as read-only visual boards. Nodes are rendered as positioned boxes, edges as SVG bezier curves with direction arrows, and edge labels as HTML overlays — all scaled to fit the page width.

Publishing a canvas

The recommended way to publish a canvas is the filename marker: rename the file so it ends with __website before the .canvas extension.

My Diagram__website.canvas

The page title is everything before __website — in this case "My Diagram". The canvas is served at the same URL that an .md file in the same folder would produce.

Top-level JSON fields

These optional JSON fields are read from the canvas file:

Legacy: "website": true JSON flag

Adding "website": true to the canvas JSON still works as a fallback, but it is fragile — Obsidian will remove it on the next re-save. Use the filename marker instead.

Node types

All four Obsidian node types are supported:

Text nodes

Text content supports a subset of inline markdown:

• **bold** and __bold__
• *italic*
• `inline code`
• Line breaks (newlines become <br>)

File nodes

File nodes behave differently depending on what they point at:

Published post — if the file resolves to a published InkStone post, the node renders as a card with: - A clickable header showing the post title (links to the post URL) - A scrollable preview of the full rendered note body

Vault image, video, or audio — if the file points at a media file inside the vault (.jpg, .png, .gif, .webp, .svg, .mp4, .webm, .mov, .mp3, .ogg, .wav, .flac, .m4a), the media is embedded inline inside the card.

Unresolved file — if the file is not a published post or recognised media, the node shows the filename as plain text.

Node colours

Obsidian's six preset colours are supported:

The colour is applied as the node's border colour. Unset nodes use the default theme border.

Edges

Edges are drawn as SVG bezier curves with a direction arrow at the target end. The arrowhead colour matches the edge stroke.

The control-point length scales with the distance between connected sides so curves stay smooth at any layout.

Edge labels

If an edge has a "label" field, the label renders as a small HTML badge at the visual midpoint of the curve — not as SVG text, which would be distorted by the aspect-ratio scaling. The badge has a background so it stays readable over node boxes.

Edge colours

Edge colour follows the same six-value scheme as node colours. Edges without a "color" use the theme's muted text colour.

Sizing and layout

The canvas is rendered at the full width of the article column. The height is set automatically to preserve the original aspect ratio of all nodes combined (plus padding). Nodes are positioned with percentage coordinates so the layout stays correct at any viewport width.

Example

A minimal two-node canvas (save as Simple Diagram__website.canvas):

{
  "title": "Simple Diagram",
  "nodes": [
    {
      "id": "a",
      "type": "text",
      "text": "**Start**",
      "x": -200, "y": -60,
      "width": 160, "height": 80,
      "color": "5"
    },
    {
      "id": "b",
      "type": "text",
      "text": "**End**",
      "x": 80, "y": -60,
      "width": 160, "height": 80,
      "color": "4"
    }
  ],
  "edges": [
    {
      "id": "e1",
      "fromNode": "a", "fromSide": "right",
      "toNode": "b",   "toSide": "left",
      "label": "next"
    }
  ]
}

See also

• Media Embeds — inline images and galleries in regular notes
• Post Types — other special page types (homepage, listing, book)
• Bases — publish .base database views as filtered HTML tables
• Dataview — server-side query tables in fenced code blocks