@quartz-community/obsidian-plugin-excalidraw

A page type plugin that renders Obsidian Excalidraw drawings (.excalidraw.md and .excalidraw files) as full-page interactive SVG visualizations. Supports shapes, text, arrows, freedraw strokes, embedded notes with transcluded content, embedded webpages via iframe, and full dark/light theme adaptation using Excalidraw's color palette.

Installation

npx quartz plugin add github:quartz-community/obsidian-plugin-excalidraw

Usage

plugins:
  - source: github:quartz-community/obsidian-plugin-excalidraw
    enabled: true
    options:
      enableInteraction: true
      darkMode: "auto"
      exportPadding: 20

For advanced use cases, you can override in TypeScript:

import * as ExternalPlugin from "./.quartz/plugins";

ExternalPlugin.ExcalidrawPage({
  enableInteraction: true,
  darkMode: "auto",
  exportPadding: 20,
});

Features

• Shapes: Rectangles, ellipses, and diamonds rendered with roughjs hand-drawn style, respecting fill styles (hachure, cross-hatch, solid), stroke styles (solid, dashed, dotted), and roughness levels.
• Text: Multi-line text with Virgil (hand-drawn), Helvetica, and Cascadia font families. Supports alignment and vertical positioning.
• Arrows and lines: Smooth curved paths for multi-point arrows with arrowhead markers. Straight lines for two-point connections.
• Freedraw: Freeform strokes rendered via perfect-freehand with pressure simulation.
• Images: Embedded images displayed from base64 data URLs stored in the drawing.
• Embedded notes: Obsidian wikilink embeds ([[note]]) resolved and transcluded with rendered HTML content.
• Embedded webpages: URL embeds rendered as sandboxed iframes with title bars.
• Dark/light mode: Full theme support using CSS custom properties. All 65 Excalidraw palette colors have pre-computed dark-mode equivalents matching Excalidraw's own applyDarkModeFilter algorithm.
• Pan and zoom: Mouse drag to pan, scroll wheel to zoom, with zoom in/out/reset buttons.
• Full-viewport layout: Dedicated page frame with toggleable sidebar (matching canvas-page pattern).
• Compressed JSON: Supports both json and compressed-json (LZ-String) formats from the Obsidian Excalidraw plugin.
• Filter integration: Prevents .excalidraw.md files from being double-processed as regular Markdown pages.

Configuration

Option	Type	Default	Description
enableInteraction	boolean	true	Whether to enable pan and zoom interaction on the drawing.
darkMode	string	"auto"	Theme mode: "auto", "light", or "dark".
exportPadding	number	20	Padding around the drawing content in pixels.

Supported file formats

.excalidraw.md (Obsidian format)

The primary format produced by the Obsidian Excalidraw plugin. Contains YAML frontmatter, text elements section, optional embedded files section, and the drawing data in a %%-delimited block as either json or compressed-json (LZ-String base64).

.excalidraw (Pure JSON)

Standard Excalidraw JSON format with type, version, elements, appState, and files fields.

License

MIT