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

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, 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
2. Font Injection: Adds @import rules for Google Fonts defined in 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. While the basic syntax creates both SVG and PNG, the --svg-only flag optimizes the workflow specifically for Figma import.

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

✅ 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, 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: Defines the slash command interface (/export-diagram) and CLI flags including --svg-only and --scale
• 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: The HTML scaffold that the export command expects, containing the embedded <svg> element structure
• 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
• The /export-diagram command extracts standalone SVGs with injected Google Fonts as implemented in 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 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 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. 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.

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