# Canvas Export

An Obsidian plugin that exports `.canvas` files to multiple formats:

- **HTML** (light and dark themes) — fully self-contained, clickable links
- **Excalidraw** (`.excalidraw`) — editable diagrams
- **[Mermaid](https://mermaid.js.org/)** (`.mmd`) — text-based flowcharts
- **[D2](https://d2lang.com/)** (`.d2`) — declarative diagrams
- **PDF** — print-ready via Electron

## Usage

Open a `.canvas` file, then use the **Command Palette** (Cmd/Ctrl+P):

- `Canvas Export: Export to HTML (light)`
- `Canvas Export: Export to HTML (dark)`
- `Canvas Export: Export to Excalidraw`
- `Canvas Export: Export to Mermaid (.mmd)`
- `Canvas Export: Export to D2 (.d2)`
- `Canvas Export: Export to PDF`
- `Canvas Export: Export current canvas...` — multi-format picker modal
- `Canvas Export: Re-export with last settings`

You can also **right-click** a `.canvas` file in the file explorer and select **Export Canvas...**.

If the output file already exists, you'll be prompted to overwrite, save with a numbered name, or skip.

## What gets exported

Canvas files follow the [JSON Canvas](https://jsoncanvas.org/) spec and can contain four types of nodes: **text**, **groups**, **file embeds**, and **link embeds**. Not all of these translate equally to every format.

### All formats

| Feature | How it's handled |
|---------|-----------------|
| Text nodes | Exported with basic Markdown rendering (headings, bold, italic, links, lists) |
| Groups | Rendered as containers with labels |
| Edges (arrows) | Preserved with correct anchoring and direction |
| Node colors | Mapped to each format's color system (Obsidian's 6 preset colors + custom hex) |
| YAML frontmatter in text nodes | Stripped automatically (used by plugins like Canvas Candy) |
| Images / file embeds | Shown as a placeholder with the filename (e.g. `📄 diagram.png`) — **images are not embedded** |
| Link embeds (iframes) | URL is displayed as text/link — **iframe content is not rendered** |

### Format-specific notes

#### HTML (light/dark)

- Fully self-contained single-file output — no external dependencies
- Markdown links become clickable `<a>` tags with `target="_blank"`
- Bare URLs are auto-linked
- Canvas dimensions are preserved exactly (absolute positioning)
- Both themes use the same layout; only colors differ

#### Excalidraw

- Outputs raw `.excalidraw` JSON (opens in Obsidian's Excalidraw plugin in compatibility mode, or in [excalidraw.com](https://excalidraw.com))
- **Single-link text nodes**: the link URL is attached to the rectangle element (clickable in Excalidraw)
- **Multi-link text nodes**: URLs are shown inline in the text (e.g. `label (https://...)`) since Excalidraw only supports one link per element
- Markdown formatting is stripped to plain text
- Groups rendered as dashed rectangles with labels

#### Mermaid

- Outputs a `flowchart TD` diagram
- Groups become `subgraph` blocks
- All text is stripped to plain text with URLs shown inline
- Node colors applied via `style` directives
- Edge labels preserved

#### D2

- Outputs a `direction: down` diagram
- Groups become nested containers with optional styling
- Nodes inside groups use qualified IDs (e.g. `group.node`)
- Link nodes get a `.link` property
- Colors applied via `style` blocks

#### PDF

- Renders the light HTML theme to PDF via Electron's `printToPDF`
- Page size matches the canvas dimensions
- Requires desktop Obsidian (Electron)
- If PDF generation fails (e.g. Electron API unavailable), a warning is shown but other formats still export

## Settings

- **Group title size (%)** — font size of group labels relative to body text (default: 150%)
- **Output subfolder** — leave empty to export alongside the canvas, or specify a subfolder name

## Installation

### From Obsidian Community Plugins

1. Open **Settings -> Community plugins -> Browse**
2. Search for "Canvas Export"
3. Click **Install**, then **Enable**

### Manual

1. Download `main.js`, `manifest.json`, and `styles.css` from the [latest release](https://github.com/rmoff/obsidian-canvas-export/releases/latest)
2. Create `.obsidian/plugins/canvas-export/` in your vault
3. Copy the three files into that folder
4. Enable the plugin in **Settings -> Community plugins**

## Desktop only

This plugin uses Electron APIs for PDF export and is desktop-only.

## Author

[Robin Moffatt](https://rmoff.net) ([@rmoff](https://github.com/rmoff))

## License

[Apache License 2.0](LICENSE)