How to Export Diagrams to PNG or SVG Formats in Diagram Design

You can export diagrams to PNG or SVG formats by running the /export-diagram slash command, which extracts the <svg> 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. The pipeline loads the target HTML file, locates the first <svg> 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 <svg> 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.

pip install playwright
playwright install chromium

How to Run the Export Commands

The command specification in 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:

/export-diagram path/to/diagram.html

Export only the SVG vector:

/export-diagram path/to/diagram.html --svg-only

Export only the PNG at 3× scale with a custom base name:

/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:

"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, which contains multiple diagrams rather than a single asset.

• The HTML file does not contain an <svg> 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. Continuous integration may also rely on 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 <svg> 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 and the reference logic in 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?

The gallery page contains multiple diagrams in a single HTML document. The export pipeline is designed to process one <svg> element per file, as documented in skills/diagram-design/references/export.md. Because 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. The complete procedural reference—covering SVG font injection, Playwright rasterization, and edge-case handling—is stored in skills/diagram-design/references/export.md.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}