# How to Use diagram-design Diagrams in Figma: Complete Export Guide

> Easily import diagram-design diagrams into Figma as SVGs. Maintain fonts, colors, and layout for seamless integration. Export your designs and enhance your Figma projects.

- Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design)
- Tags: how-to-guide
- Published: 2026-08-17

---

**diagram-design diagrams can be exported as standalone SVG files and imported directly into Figma while preserving fonts, colors, and layout.**

The cathrynlavery/diagram-design repository generates editorial-quality diagrams as self-contained HTML files embedding SVG elements. Because these diagrams export to standalone SVG format with embedded Google Fonts, you can seamlessly import them into Figma for further design iteration. This workflow bridges the gap between code-generated diagrams and collaborative design tools.

## Understanding the SVG Export Workflow

diagram-design stores diagrams as HTML files containing a single `<svg>` element. According to [`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md), the export workflow performs three critical transformations to ensure Figma compatibility:

1. **SVG Extraction**: Isolates the `<svg>` node from the HTML wrapper in [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html)
2. **Font Injection**: Adds `@import` rules for Google Fonts defined in [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md)
3. **Attribute Correction**: Injects the required `xmlns` attribute and ensures proper `viewBox` dimensions

The README.md format table explicitly lists **svg** as a deliverable specifically "for Figma" according to line 264. Additionally, line 309 of the same file explains that the SVG export "extracts the `<svg>` node and injects Google Fonts so it renders standalone in browsers, Figma, and Illustrator."

## Exporting diagram-design Diagrams for Figma

To generate a Figma-compatible file, use the `/export-diagram` command defined in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md). While the basic syntax creates both SVG and PNG, the `--svg-only` flag optimizes the workflow specifically for Figma import.

```bash

# Export both SVG and PNG

/export-diagram path/to/diagram.html

# Export only SVG for Figma import

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

# Export only PNG at 3× scale for high-resolution slides

/export-diagram path/to/diagram.html --png-only --scale=3

# Alternative syntax when using Pi

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

```

After execution, the CLI outputs confirmation messages:

```text
✅ Exported SVG: path/to/diagram.svg (12 KB)
✅ Exported PNG: path/to/diagram.png (45 KB)

```

The resulting `.svg` file is a plain XML document with all visual information—including vector paths, color values, and typography—baked directly into the markup.

## Importing SVG Files into Figma

Because the exported SVG contains no external dependencies, Figma parses it natively without conversion errors:

1. Open Figma and select **File → Import…** (or drag the `.svg` file directly onto the canvas)
2. Figma automatically converts the SVG into editable vector layers
3. The diagram retains its original layout, color values, and accessible metadata including `role="img"`, `<title>`, and `<desc>` elements

This import process preserves the design tokens from [`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md), ensuring visual consistency between the original diagram and the resulting Figma components.

## Key Implementation Files

Several files in the cathrynlavery/diagram-design repository implement this export pipeline:

- **[`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md)**: Defines the slash command interface (`/export-diagram`) and CLI flags including `--svg-only` and `--scale`
- **[`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md)**: Contains the detailed SVG extraction logic, font injection algorithms, and Playwright-based PNG rasterization code
- **[`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html)**: The HTML scaffold that the export command expects, containing the embedded `<svg>` element structure
- **[`skills/diagram-design/references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/style-guide.md)**: Provides the font tokens that the export process injects into standalone SVGs via CSS `@import` rules

## Summary

- diagram-design generates diagrams as HTML files with embedded SVG elements stored in [`template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/template.html)
- The `/export-diagram` command extracts standalone SVGs with injected Google Fonts as implemented in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md)
- Exported SVGs include required `xmlns` attributes and `viewBox` parameters for cross-platform compatibility
- Figma imports these files natively while preserving vector paths, colors, and accessibility metadata
- Use the `--svg-only` flag to skip PNG generation when targeting Figma workflows specifically

## Frequently Asked Questions

### Does Figma preserve Google Fonts when importing diagram-design SVGs?

Yes. The export process defined in [`skills/diagram-design/references/export.md`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/references/export.md) explicitly injects Google Fonts as `@import` rules within the SVG's `<style>` block. Because Figma supports embedded CSS font declarations, the typography renders correctly upon import, though Figma may convert live text to vector outlines depending on your import settings.

### Can I edit diagram-design diagrams after importing them into Figma?

Absolutely. The exported SVG files contain standard vector paths and text elements rather than raster images. Once imported into Figma, you can ungroup components, modify colors, adjust typography, and reshape vector paths just like any native Figma design. The original structure from [`skills/diagram-design/assets/template.html`](https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/assets/template.html) translates into fully editable Figma layers.

### What file formats does diagram-design support besides SVG?

According to the README.md format table, diagram-design primarily targets HTML for web deployment and SVG for design tools like Figma. The export command also supports PNG generation via the `--png-only` flag, which uses Playwright for high-resolution rasterization at configurable scales. However, for Figma workflows, SVG remains the recommended format for maintaining editability and small file sizes.

### Is the export process available in all AI coding assistants?

The `/export-diagram` slash command works within Claude Code, Codex, and Pi environments as specified in [`commands/export-diagram.md`](https://github.com/cathrynlavery/diagram-design/blob/main/commands/export-diagram.md). When using Pi specifically, invoke the command with `/pi export-diagram` followed by your target file path and desired flags such as `--svg-only` or `--scale=3`.