# How to Export Diagrams to PNG or SVG Formats in Diagram Design > Easily export diagrams to PNG or SVG formats using the /export-diagram command. Get vector or high-resolution raster images for your projects. - Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design) - Tags: how-to-guide - Published: 2026-08-19 --- **You can export diagrams to PNG or SVG formats by running the `/export-diagram` slash command, which extracts the `` element for vector output or rasterizes it via Playwright for high-resolution PNG images.** Diagram Design stores every diagram as a self-contained HTML file, so converting your work to portable assets requires extracting the embedded vector markup. According to the `cathrynlavery/diagram-design` source code, the skill provides built-in slash commands that automate this conversion. Whether you need a scalable SVG or a rasterized PNG, the export pipeline handles font injection, device scaling, and file validation in a single step. ## Export Workflow and Pipeline When you invoke an export command, the skill executes a standardized sequence defined in [`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md). The pipeline loads the target HTML file, locates the first `` node, and branches based on the requested format. For **SVG** output, the skill injects any required Google Fonts directly into the file so the result is fully standalone. For **PNG** output, the tool launches a Playwright-controlled Chromium instance, renders the extracted SVG at the specified device-scale factor, and saves the raster image. By default, the process uses a **2× scale factor** for crisp, high-resolution PNGs. The final files are written adjacent to the source HTML unless you supply a custom output path, and the command reports the resulting file size upon completion. ## Supported Export Formats Diagram Design supports two primary output types, each suited to different production needs. - **SVG**: A pure vector export that requires no external browser engine. The skill reads the HTML source, extracts the `` element, and writes a self-contained `.svg` file. - **PNG**: A raster image generated via Playwright. Because this path depends on a headless browser, you must first install Playwright and its Chromium binary. ```bash pip install playwright playwright install chromium ``` ## How to Run the Export Commands The command specification in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md) defines three slash commands that expose the same underlying logic. You can export both formats at once, or isolate the output to a single file type. Export both SVG and PNG using the default **2×** scale: ```bash /export-diagram path/to/diagram.html ``` Export only the SVG vector: ```bash /export-diagram path/to/diagram.html --svg-only ``` Export only the PNG at **3×** scale with a custom base name: ```bash /export-diagram path/to/diagram.html --png-only --scale=3 --output=out/diagram ``` You can also trigger exports with natural-language prompts during a session: ```text "Export this diagram as SVG and PNG." "Save my-diagram.html as PNG." ``` The skill parses the intent, applies the documented defaults, and returns the generated file paths. ## Edge Cases and Validation Rules The export pipeline enforces strict guardrails to prevent invalid output. As implemented in `cathrynlavery/diagram-design`, the command refuses to run if any of the following conditions are met: - No HTML file is supplied. - The source file is the gallery page at [`assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/index.html), which contains multiple diagrams rather than a single asset. - The HTML file does not contain an `` element. - PNG is requested but Playwright is not installed; the user is shown the exact install instructions. - An unsupported scale factor is provided; only values of **1**, **2**, or **3** are accepted. After export, you can verify asset integrity with [`skills/diagram-design/scripts/self_check.py`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/scripts/self_check.py). Continuous integration may also rely on [`scripts/verify-export.py`](https://github.com/cathrynlavery/diagram-design/blob/main/scripts/verify-export.py) to ensure export behavior remains consistent across releases. ## Summary - Diagram Design saves diagrams as self-contained HTML files, and you export diagrams to PNG or SVG formats by extracting the embedded `` node. - **SVG** exports are standalone vector files with injected Google Fonts, requiring no browser engine. - **PNG** exports rely on Playwright and Chromium to rasterize the SVG at configurable scale factors of 1×, 2×, or 3×. - Use `/export-diagram` with flags such as `--svg-only`, `--png-only`, `--scale`, and `--output` to control the output. - The command spec in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md) and the reference logic in [`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md) define the exact behavior and error handling. ## Frequently Asked Questions ### Can I export a diagram without installing Playwright? Yes. If you only need an SVG, Playwright is not required because the skill performs a direct vector extraction from the HTML source. However, PNG generation depends entirely on Playwright and its Chromium browser, so you must run `pip install playwright && playwright install chromium` before requesting raster output. ### Why does the export command reject the gallery file at [`assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/index.html)? The gallery page contains multiple diagrams in a single HTML document. The export pipeline is designed to process one `` element per file, as documented in [`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md). Because [`assets/index.html`](https://github.com/cathrynlavery/diagram-design/blob/main/assets/index.html) does not represent a single diagram, the command exits to avoid ambiguous output. ### What scale factors are supported for PNG export? The PNG rasterizer accepts only **1**, **2**, or **3**. The default is **2×**, which balances file size and visual fidelity. If you pass an unsupported scale factor, the command halts and informs you of the valid options. ### Where are the export rules and file format details documented? The high-level usage is covered in the README section **Export to PNG / SVG**. The formal command interface, including flags and error states, lives in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md). The complete procedural reference—covering SVG font injection, Playwright rasterization, and edge-case handling—is stored in [`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md).