Diagram to Image
Convert Markdown documents containing ASCII or Unicode text diagrams into faithful draw.io PNG images. Use when the user provides a Markdown file or Markdown text and asks to extract architecture diagrams, flowcharts, or sequence diagrams from fenced or indented text blocks, generate draw.io XML through the drawio MCP, review and lint XML, gate export through browser-based human approval, and export PNGs.
Install
npx skills add zju-zhanglu/diagram-to-image --skill diagram-to-imagegit clone --depth 1 https://github.com/zju-zhanglu/diagram-to-image.git /tmp/diagram-to-image
mkdir -p ~/.claude/skills
cp -r /tmp/diagram-to-image/. ~/.claude/skills/diagram-to-imagePersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Diagram To Image
## Overview
Convert Markdown text diagrams into one PNG per selected diagram by extracting candidate code blocks, classifying them, asking the user which diagrams to process, generating single-diagram draw.io XML, reviewing and linting the XML, gating export through draw.io browser human approval, and exporting with the drawio MCP. Prioritize structural fidelity, correct containment, readable labels, and a tight canvas.
The final PNG must be a graphical reconstruction made of draw.io shapes, containers, labels, and connectors. Do not satisfy the task by rendering the original ASCII/Unicode block as a screenshot, `<pre>` block, line-by-line text cells, or any other raw text facsimile.
## Output Location
When the input is a Markdown file, write all generated artifacts under the input document's directory, not under the current working directory or the skill directory. Use this layout by default:
```text
INPUT_DIR/
└── diagram-images/
├── diagram-blocks.json
├── diagram-001.xml
└── diagram-001.png
```
Use `diagram-images/` unless the user explicitly requests another folder. For pasted Markdown without a source file, first save or treat the Markdown in a user-appropriate working document location, then place `diagram-images/` beside that input document. Include absolute output paths in the final summary.
## Workflow State TrackingDetails
- Skill name
diagram-to-image- Repository
- zju-zhanglu/diagram-to-image
- License
- MIT
- Repo updated
- 26 June 2026
FAQ
What does the Diagram to Image skill do?
Convert Markdown documents containing ASCII or Unicode text diagrams into faithful draw.io PNG images. Use when the user provides a Markdown file or Markdown text and asks to extract architecture diagrams, flowcharts, or sequence diagrams from fenced or indented text blocks, generate draw.io XML through the drawio MCP, review and lint XML, gate export through browser-based human approval, and export PNGs.
How do I install the Diagram to Image skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add zju-zhanglu/diagram-to-image --skill diagram-to-image. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Diagram to Image popular?
It lives in zju-zhanglu/diagram-to-image, which has 8 GitHub stars and 0 forks.
Related skills
Hyperframes Motion
82boysfromtown/hyperframes-motion
Make After Effects-style motion graphics in plain HTML + GSAP — 3D camera moves, kinetic typography, cinematic transitions and four ready-to-edit 1080x1920 templates. Use when the user wants an animated product reveal, social-media ad, brand story or kinetic-text video built as a web page, or asks for "motion graphics", "animated title", "cinematic text" or a 9:16 video template.
Claude 3d Harness
8MAX-786/claude-3d-harness
Entry point for every 3D or Blender task - modeling, materials, lighting, cameras, rendering, animation, product shots, environments, cinematic scenes, exports. Classifies the job (fast, standard or cinematic), picks a workflow, asks the harness registry which library skills to load, then drives Blender through the harness's single Blender MCP server with render, inspect and refine checkpoints. Use it whenever the user asks to create, change, light, render, animate or export anything in 3D, even if they never say "Blender".
Img2img Studio
8Dogwind221/img2img-studio
图生图工作室：先识图分析输入图片，再按风格模式生成新图。触发：用户给出/上传图片并要求「生成类似风格的新图」「换个风格重绘」「图生图」「以这张图为基础出图」「做成电商图/套图/主图/详情页」「杂志编辑风/抽象艺术/手绘插画/废片焕新」。 不触发：只是「描述/分析图片」而不要求生成新图（那属于 dsh-vision-skill）。 模式：photo-art（editorial 编辑杂志风 / revival 白纸手绘风 / 融合风）与 ecommerce（商品主图、卖点图、场景图、详情页、PDP、Amazon/Shopify 图包）。 生图通道一级优先 ChatGPT 网页（image 2.5）：免费网页账号先用，额度用尽后自有账号（Codex/Plus）优先，再降级 API（DashScope qwen-image-3.0-pro、OpenAI gpt-image、Z.AI、Seedream、MiniMax）；支持 t2i/i2i、批量并发、质量预设。
Book Distill
7ilia-pluzhnikov/book-distill
Перегоняет длинный материал — книгу, транскрипт видео, подкаст, курс, интервью, лонгрид — в набор атомарных вызываемых скиллов: фреймворки, принципы, чек-листы, решающие процедуры и границы их применения. Вызывать, когда просят «разбери книгу на скиллы», «сделай скилл из этой книги», «вытащи методичку из курса», «turn this book into skills», «distill this podcast into reusable skills», «extract frameworks from this course» — то есть нужны рабочие методы из источника, а не его пересказ. НЕ для саммари и рецензий, НЕ для отыгрыша автора, НЕ для восстановления книги по памяти без текста.
Openclaw Genpark Envoy
8Alpha-Park/openclaw-genpark-envoy
Autonomous relationship management. Not just CRM, but agentic gift giving, conflict resolution, and calendar-synced hospitality execution via GenPark rails.
Blender Campaign Studio
7Meir770ar/blender-campaign-studio
Direct, produce and edit Hebrew commercials, brand films and campaign videos in Blender: adaptive interview, direction, editorial, reusable HeyGen Avatar IV/V characters and Digital Twins, Codex images, Grok subscription video through the native SDK including mode-aware 1080p, Suno music, ElevenLabs or Gemini 3.8 TTS narration, ElevenLabs sound effects, HyperFrames HTML motion graphics, AAA/RTL typography, sound/color finishing in Blender or DaVinci Resolve Studio (plan hand-off, MCP finishing, verified import) and compressed WhatsApp self-delivery. Natural Hebrew: תכין לי סרטון, תערוך לי סרטו
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.