Diagram To Image
Converts Mermaid diagrams and Markdown tables to PNG images using the mermaid-red API at diagramless.xyz. Handy when you need visual exports for X/Twitter or platforms that don't support rich formatting. The smart part is how it figures out where to save files: it looks for existing image directories in your project (./images, ./assets, ./public/images), analyzes the diagram content to generate meaningful filenames like auth-flow.png or model-comparison.png, and considers conversation context. Supports ten themes including ocean and midnight, works via a bundled Node script with no npm install, and handles both diagram types through the same command with auto-detection. Beats spinning up local rendering dependencies when you just need a quick export.
- skills.sh installs
- 513
- GitHub stars
- 139
- last updated
- Aug 21, 2026
Install
$ npx -y skills add sugarforever/01coder-agent-skills --skill diagram-to-image --agent claude-codeInstalls into .claude/skills of the current project.
Files
Diagram to Image
Convert Mermaid diagrams and Markdown tables to PNG images via the mermaid-red API (diagramless.xyz). Produces high-quality, styled output with custom themes — no heavy local dependencies needed.
When to Use
Use this skill when:
- User has a Mermaid diagram that needs to be converted to an image
- User has a Markdown table that needs to be converted to an image
- User is writing content for X/Twitter and needs visual exports
- User asks to "convert to image", "export as PNG", "make this an image", or similar
Prerequisites
The bundled script uses Node.js built-in fetch (Node 18+). No npm install needed.
# The render script is bundled with this skill:
SKILL_DIR=~/.claude/skills/diagram-to-image/scripts
ls $SKILL_DIR/diagram-to-image.mjs
Smart Output Location
IMPORTANT: Determine the best output location based on context. Follow this decision tree:
1. User Specifies Path
If user explicitly mentions a path or filename, use that.
2. Project Context Detection
Check for common image/asset directories in the current project:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/sugarforever/01coder-agent-skills
- Categories
- AI & Agent Building, Design & UI/UX
- First seen
- Jun 3, 2026
More from sugarforever/01coder-agent-skills
All 13Recommended
More AI & Agent Building
migrating-to-tuist-generated-projectstuist/agent-skillsMigrates existing Xcode projects to Tuist generated workspaces with build and run validation, external dependency mapping, and migration checklists. Use when ad513skills.sh installs
word-statshumanizerai/agent-skillsGet word count, character count, reading time, and text statistics. Quick analysis without questions.512skills.sh installs
starter-kit-upgradelaravel/agent-skillsSelectively pull upstream improvements from a Laravel starter kit (laravel/vue-starter-kit, laravel/react-starter-kit, laravel/svelte-starter-kit, laravel/livew512skills.sh installs
interaction-designaj-geddes/useful-ai-promptsDesign meaningful interactions and microinteractions. Create delightful user experiences through thoughtful animation, feedback, and responsive interface design510skills.sh installstechnical-debt-assessmentaj-geddes/useful-ai-promptsAssess, quantify, and prioritize technical debt using code analysis, metrics, and impact analysis. Use when planning refactoring, evaluating codebases, or makin509skills.sh installswebhook-developmentaj-geddes/useful-ai-promptsImplement webhook systems for event-driven integration with retry logic, signature verification, and delivery guarantees. Use when creating event notification s509skills.sh installs