Life OS

Excalidraw + Quartz Setup

2 min read

Goal

Make Excalidraw diagrams created in Obsidian publish correctly to the Quartz site.

What Was Done

1. Excalidraw Plugin — Global SVG Auto-Export

Setting changed: .obsidian/plugins/obsidian-excalidraw-plugin/data.json

  • autoexportSVG → true
  • displayExportedImageIfAvailable → true

Every time you save an Excalidraw file, the plugin now automatically writes a matching .svg file in the same folder. No manual export needed.

2. Quartz — Ignore Raw Excalidraw Files

File changed: _Tools/quartz/quartz.config.ts

Added **/*.excalidraw.md to ignorePatterns. This means:

  • .excalidraw.md source files are not published as pages
  • .svg exports are published normally (they’re just static image files)

3. Demo File

A working demo diagram lives at: 01 Areas/Languages/German/Grammatik/German Word Order — V2 Rule.excalidraw.md

It has excalidraw-autoexport: svg in its frontmatter (belt-and-suspenders alongside the global setting). Open it in Obsidian and save once to generate the SVG.

Workflow Going Forward

Creating a new diagram

  1. In Obsidian, run “Excalidraw: Create new drawing” from the command palette
  2. It will create a .excalidraw.md file (default goes to 0 INBOX/, move it to the right folder)
  3. Add excalidraw-autoexport: svg to the frontmatter (good habit even with global setting on)
  4. Draw your diagram and save — .svg exports automatically to the same folder

Embedding in a note for publishing

Use the SVG, not the Excalidraw source file:

![[My Diagram.svg]]

This works in both Obsidian reading view and on the Quartz site. The .excalidraw.md file is for editing only — Quartz ignores it.

Editing an existing diagram

Open the .excalidraw.md file → switch to Excalidraw view → edit → save. The SVG updates automatically.

File Naming Convention

Keep diagram filenames descriptive. The SVG takes the same name as the source:

SourcePublished as
German Word Order — V2 Rule.excalidraw.mdGerman Word Order — V2 Rule.svg
Accusative Case Diagram.excalidraw.mdAccusative Case Diagram.svg

Good Use Cases in This Vault

  • German grammar — sentence structure, case relationships, verb conjugation patterns
  • Topic concept maps — how ideas in a wiki topic relate to each other
  • Film/show timelines or character maps — embedded in Film & TV notes
  • PKM system diagrams — vault structure, workflow overviews

Graph View