psylch-excalidraw-export-skill

excalidraw-export-skill

中文文档

Generate Excalidraw diagrams from natural language and export to PNG/SVG images, end-to-end.

Feature	Detail
Input	Natural language description
Output	PNG image, SVG image, .excalidraw source
Diagram types	Flowchart, architecture, mind map, sequence, ER, class, swimlane, DFD
Rendering	kroki.io (open-source)
PNG conversion	text-to-path + resvg (recommended), Chrome headless (fallback)

Installation

Via skills.sh (recommended)

npx skills add psylch/excalidraw-export-skill -g -y

Via Plugin Marketplace

/plugin marketplace add psylch/excalidraw-export-skill
/plugin install excalidraw-export@psylch-excalidraw-export-skill

Manual Install

git clone https://github.com/psylch/excalidraw-export-skill.git
cp -r excalidraw-export-skill/skills/excalidraw-export ~/.claude/skills/

Restart Claude Code after installation.

Prerequisites

• Python 3.8+
• resvg — fast SVG-to-PNG rasterizer (brew install resvg)
• fonttools + brotli — extracts embedded fonts, converts text to paths (pip install fonttools brotli)
• Internet access (kroki.io for SVG rendering)
• Google Chrome — optional fallback (not needed if resvg + fonttools installed)

Run the setup script to check and auto-install:

bash ~/.agents/skills/excalidraw-export/scripts/setup.sh

Usage

Just ask Claude to create a diagram:

• "Create a flowchart for user registration"
• "Draw the system architecture of a microservice app"
• "Visualize the relationship between User, Post, and Comment"
• "Make a mind map about machine learning"
• "画一个登录流程图"
• "画架构图"

The skill will generate the diagram and automatically export it as a PNG image.

How It Works

User description
       |
       v
  Generate .excalidraw JSON (Claude)
       |
       v
  kroki.io API -> SVG (with embedded Excalifont + Xiaolai woff2)
       |
       v
  fonttools extracts woff2 glyphs -> <text> converted to <path>
       |
       v
  resvg -> PNG (2x retina, hand-drawn fonts preserved)
       |
       v
  Delivered: .png + .excalidraw source

File Structure

excalidraw-export-skill/
├── skills/
│   └── excalidraw-export/
│       ├── SKILL.md              # Skill definition
│       ├── scripts/
│       │   ├── export.py         # Export pipeline
│       │   └── setup.sh          # Dependency checker
│       └── references/
│           ├── excalidraw-schema.md
│           └── element-types.md
├── .claude-plugin/
│   ├── plugin.json
│   └── marketplace.json
├── README.md
├── README.zh.md
├── LICENSE
└── .gitignore

Known Limitations

• Requires internet (kroki.io renders SVG server-side)
• Max ~20 elements per diagram for readability

License

MIT