New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Diagram to Image Converter

by sugarforever in sugarforever/01coder-agent-skills

Converts Mermaid diagrams and markdown tables into PNG images through a hosted rendering API, for platforms without rich formatting.

MITAuto-check passedDevelopment

Install Diagram to Image Converter

skills CLI
$ npx skills add sugarforever/01coder-agent-skills --skill diagram-to-image -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sugarforever/01coder-agent-skills diagram-to-image --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sugarforever/01coder-agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/diagram-to-image .claude/skills/diagram-to-image && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
diagram-to-image
GitHub stars
137
Token cost
~1.9k tokens
SKILL.md length
654 words
Files
3 (incl. scripts)
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Converts Mermaid diagrams and markdown tables into PNG images through a hosted rendering API, for platforms without rich formatting.

  • Works in 10 steps: User Specifies Path → Project Context Detection → Article/Document Context → …
  • Exporting a Mermaid diagram as an image for a platform without rendering
  • SKILL.md covers When to Use, Prerequisites, Smart Output Location and Filename Generation, plus 3 more sections
  • Runs JavaScript and Python scripts from its folder; calls node and claude

What it does

A bundled Node script posts Mermaid diagram or markdown table source to the mermaid-red rendering API and saves the resulting PNG, aimed at destinations such as X/Twitter that can't render Mermaid or markdown directly. No heavy local dependency is needed beyond Node's built-in fetch.

Output location follows a decision tree: an explicit path you name, an existing images or assets directory in the current project, a document's own directory when you're writing an article, or the current directory as a fallback. The filename is generated from what the diagram or table actually represents rather than a generic name.

When your agent uses it

  • Exporting a Mermaid diagram as an image for a platform without rendering
  • Turning a markdown table into a shareable image for social posts
  • Converting diagram content for X/Twitter or similar plain-text platforms

Example prompts

  • “Convert this sequence diagram to a PNG for the X thread.”
  • “Export the comparison table above as an image named for this feature.”
  • “Turn the auth-flow flowchart into a PNG and save it next to this doc.”

Requirements

  • Node.js 18+ (built-in fetch)
  • Network access to the mermaid-red rendering API

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. User Specifies Path
  2. Project Context Detection
  3. Article/Document Context
  4. Conversation Context
  5. Default Fallback
  6. Analyze Context
  7. Determine Output Path
  8. Create Temporary Input File
  9. Convert via mermaid-red API
  10. Report Result

What it can do on your machine

Read from SKILL.md and the folder at commit e51fb6e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (JavaScript and Python), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • claude

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • diagramless.xyz

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Diagram to Image Converter loads about 1.9k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 654 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~66
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from sugarforever/01coder-agent-skills at commit e51fb6e, republished under its MIT licence (© sugarforever). 654 words, ~1,890 tokens.

Download SKILL.mdSave it as .claude/skills/diagram-to-image/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
diagram-to-image
description
Convert Mermaid diagrams and Markdown tables to images (PNG) for platforms that don't support rich formatting. Use when user asks to "convert to image", "export as PNG", "make this an image", or has content for X/Twitter that needs visual exports.

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.

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

bash
# Check for existing image directories (in order of preference)
ls -d ./images ./assets ./img ./static ./public/images ./assets/images 2>/dev/null | head -1

Use the first existing directory found. Common patterns:

  • ./images/ - General projects
  • ./assets/ - Web projects
  • ./assets/images/ - Structured web projects
  • ./public/images/ - Next.js, React projects
  • ./static/ - Hugo, other static site generators
  • ./img/ - Short form convention
3. Article/Document Context

If user is writing an article or document:

  • Look for the document's directory
  • Create images/ subdirectory if appropriate
  • Name the image based on the document name + descriptor
4. Conversation Context

Analyze the conversation to determine:

  • What the diagram represents → Use for filename (e.g., auth-flow.png, user-journey.png)
  • Related file being discussed → Place image near that file
  • Topic being discussed → Use for naming
5. Default Fallback

If no context clues:

  • Use current working directory
  • Generate descriptive filename from diagram content

Filename Generation

Create meaningful filenames based on content analysis:

Content PatternExample Filename
flowchart with auth/loginauth-flow.png
sequenceDiagram with APIapi-sequence.png
erDiagramentity-relationship.png
pie chart about Xx-distribution.png
gantt chartproject-timeline.png
Table with comparisoncomparison-table.png
Table with datadata-table.png

Rules:

  • Use kebab-case (lowercase with hyphens)
  • Keep names concise but descriptive (2-4 words)
  • Avoid generic names like diagram.png or image.png
  • Include topic/subject when identifiable

Conversion Process

Step 1: Analyze Context

Before converting, gather context:

  1. Check current working directory
  2. Look for existing image directories
  3. Analyze diagram/table content for naming
  4. Consider any files or topics mentioned in conversation
Step 2: Determine Output Path
bash
# Example logic (implement mentally, not as literal script)
if user_specified_path:
    output_path = user_specified_path
elif exists("./images"):
    output_path = "./images/{generated_name}.png"
elif exists("./assets"):
    output_path = "./assets/{generated_name}.png"
elif exists("./public/images"):
    output_path = "./public/images/{generated_name}.png"
else:
    output_path = "./{generated_name}.png"
Step 3: Create Temporary Input File
bash
# For Mermaid diagrams
cat > /tmp/diagram.mmd << 'DIAGRAM_EOF'
<mermaid content>
DIAGRAM_EOF

# For Markdown tables
cat > /tmp/table.md << 'TABLE_EOF'
<table content>
TABLE_EOF
Show full SKILL.md (288 more words)Show less
Step 4: Convert via mermaid-red API

The API auto-detects content type (mermaid vs table). Both use the same command.

Using the bundled script:

bash
# Mermaid diagram
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png

# Markdown table
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png

# With custom theme
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o <output_path>.png --theme ocean

# Force content type (if auto-detect gets it wrong)
node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o <output_path>.png --type table

Available options:

  • --theme <name> — default, dark, forest, neutral, ocean, emerald, midnight, slate, lavender, blueprint
  • --type <type> — auto (default), mermaid, table
  • --scale <n> — 1-4 (default: 2, for 2x DPI)
  • --bg <color> — Background color (default: white, use "transparent" for no bg)
  • --server <url> — Override server (default: https://diagramless.xyz)

Piping from stdin also works:

bash
echo "graph TD; A-->B" | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs -o out.png
cat /tmp/table.md | node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs --type table -o table.png
Step 5: Report Result

After conversion, tell the user:

  1. Full path where image was saved
  2. Why that location was chosen (briefly)
  3. File size in bytes (printed by the script)
  4. Suggest they can specify a different location if needed

Examples

Example 1: Project with images/ directory

Context: User is in a project that has ./images/ directory, discussing authentication.

User: "Convert this to an image"

flowchart TD
    A[Login] --> B{Valid?}
    B -->|Yes| C[Dashboard]
    B -->|No| D[Error]

Action:

  1. Detect ./images/ exists
  2. Analyze content → authentication flow
  3. Generate filename: login-flow.png
  4. Save content to /tmp/diagram.mmd
  5. Run: node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./images/login-flow.png
Example 2: Writing X article about AI with ocean theme

Context: User mentioned writing an article about AI agents for X.

User: "Make this a PNG with ocean theme"

flowchart LR
    User --> Agent --> Tools --> Response

Action:

  1. Save content to /tmp/diagram.mmd
  2. Run: node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/diagram.mmd -o ./ai-agent-flow.png --theme ocean
Example 3: Data comparison table

User: "Export this table as image"

| Model | Speed | Accuracy |
|-------|-------|----------|
| GPT-4 | Slow | High |
| Claude | Fast | High |

Action:

  1. Save content to /tmp/table.md
  2. Run: node ~/.claude/skills/diagram-to-image/scripts/diagram-to-image.mjs /tmp/table.md -o ./model-comparison.png (auto-detects as table)
Example 4: User specifies location

User: "Save this diagram to ~/Desktop/my-chart.png"

Action: Use exactly ~/Desktop/my-chart.png as output path.

Error Handling

  • If the API server is unreachable, the script prints a clear error message
  • If content type auto-detection fails, use --type mermaid or --type table explicitly
  • For local development/testing, use --server http://localhost:3000

© sugarforever, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (scripts) in skills/diagram-to-image of sugarforever/01coder-agent-skills.

  • SKILL.md
  • scripts/diagram-to-image.mjs
  • scripts/table_to_image.py

Open the folder on GitHubat commit e51fb6e

Compare with similar skills

Diagram to Image Converter next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Diagram to Image Converter compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Diagram to Image Converter this skillsugarforever/01coder-agent-skills137—~1.9kAutomated safety check: PassMIT
Legal Diagramlawve-ai/awesome-legal-skills847—~2.6kAutomated safety check: PassMIT
Sf Diagram NanobananaproJaganpro/sf-skills424—~1.6kAutomated safety check: PassMIT
Gpt Image Skillfeiskyer/claude-code-settings1.7k—~1.4kAutomated safety check: PassMIT
Nanobanana Skillfeiskyer/claude-code-settings1.7k—~1.1kAutomated safety check: PassMIT
Draw.io Diagram StudioAgents365-ai/drawio-skill10k—~2.4kAutomated safety check: NotesMIT

Similar skills

  • Legal Diagram

    lawve-ai/awesome-legal-skills

    A skill your agent uses when a user needs a legal or legal-adjacent Mermaid diagram from a document, pasted text, matter description, process, timeline, party map, obligation map, corporate…

    847 GitHub stars~2.6k tokensUpdated 8 days ago
    DevelopmentAuto-check passed

  • Sf Diagram Nanobananapro

    Jaganpro/sf-skills

    AI-powered image generation for Salesforce visuals via Nano Banana Pro.

    424 GitHub stars~1.6k tokensUpdated 5 mo ago
    Media & CreativeAuto-check passed

  • Gpt Image Skill

    feiskyer/claude-code-settings

    Generate or edit images using OpenAI GPT Image API (gpt-image-2, gpt-image-1, etc).

    1.7k GitHub stars~1.4k tokensUpdated 13 days ago
    Media & CreativeAuto-check passed

  • Nanobanana Skill

    feiskyer/claude-code-settings

    Generate or edit images via Google Gemini (nanobanana). An agent skill from feiskyer/claude-code-settings.

    1.7k GitHub stars~1.1k tokensUpdated 13 days ago
    Media & CreativeAuto-check passed

  • Draw.io Diagram Studio

    Agents365-ai/drawio-skill

    Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.

    10k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-check: notes

  • Scientific Schematics

    spacering-net/codeg

    Create publication-quality scientific diagrams using Nano Banana 2 AI with smart iterative refinement.

    3.9k GitHub starsUsed in 11 repos~5.9k tokens
    DevelopmentAuto-check: notes

More from sugarforever/01coder-agent-skills

All 21 skills in this repo

  • Typography Cover Designer

    sugarforever/01coder-agent-skills

    Designs typography-driven video covers and thumbnails in HTML/CSS and screenshots them with Chrome DevTools at 16:9, 16:10, 9:16 and 3:4.

    137 GitHub stars~3.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Mining Session Skills

    sugarforever/01coder-agent-skills

    Reviews one finished Claude Code session from its exported markdown and decides whether a skill is worth creating, updating or reusing for similar work.

    137 GitHub stars~1.4k tokensUpdated 3 mo ago
    Auto-check passed

  • Subtitle Correction

    sugarforever/01coder-agent-skills

    Fixes speech-recognition mistakes in .srt subtitle files, in Chinese or English, using terms you supply and leaving every timestamp untouched.

    137 GitHub stars~2.3k tokensUpdated 3 mo ago
    Auto-check passed

  • Claude Session Exporter

    sugarforever/01coder-agent-skills

    Lists Claude Code session transcripts and exports them to organized Markdown with a digest, a clean conversation and linked tool-call details.

    137 GitHub stars~1.7k tokensUpdated 3 mo ago
    Auto-check passed

  • Codex Session Manager

    sugarforever/01coder-agent-skills

    Lists, filters and exports local Codex session transcripts to organized Markdown with a digest, timeline and tool-call details, in full or pick-one mode.

    137 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed

  • Audio and SRT to Narrated Video

    sugarforever/01coder-agent-skills

    Builds a narration-synced MP4 from a voiceover audio file and its SRT subtitles using HyperFrames, with scenes timed to the subtitle cues; instructions are in Chinese.

    137 GitHub stars~1.9k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Diagram to Image Converter

What does Diagram to Image Converter do?

Converts Mermaid diagrams and markdown tables into PNG images through a hosted rendering API, for platforms without rich formatting. A bundled Node script posts Mermaid diagram or markdown table source to the mermaid-red rendering API and saves the resulting PNG, aimed at destinations such as X/Twitter that can't render Mermaid or markdown directly. No heavy local dependency is needed beyond Node's built-in fetch.

When should I use Diagram to Image Converter?

Diagram to Image Converter fits situations like: exporting a Mermaid diagram as an image for a platform without rendering; turning a markdown table into a shareable image for social posts; converting diagram content for X/Twitter or similar plain-text platforms.

How do I install Diagram to Image Converter in Claude Code?

Run `npx skills add sugarforever/01coder-agent-skills --skill diagram-to-image -a claude-code`. Or copy the skill folder (skills/diagram-to-image in sugarforever/01coder-agent-skills) into .claude/skills/diagram-to-image in your project. Claude Code loads it when a task matches its description.

How do I install Diagram to Image Converter in Codex?

Run `npx skills add sugarforever/01coder-agent-skills --skill diagram-to-image -a codex`. Or copy the skill folder (skills/diagram-to-image in sugarforever/01coder-agent-skills) into .agents/skills/diagram-to-image in your project. Codex loads it when a task matches its description.

Can I use Diagram to Image Converter in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sugarforever/01coder-agent-skills --skill diagram-to-image -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diagram-to-image, .gemini/skills/diagram-to-image, .github/skills/diagram-to-image and .opencode/skills/diagram-to-image in your project.

What does Diagram to Image Converter need to run?

Going by SKILL.md and its folder, Diagram to Image Converter needs JavaScript and Python for the scripts in its folder and the command-line tools its instructions call (node and claude). Our summary lists: Node.js 18+ (built-in fetch); Network access to the mermaid-red rendering API.

Does Diagram to Image Converter access the network?

SKILL.md names 1 domain. As links in the text: diagramless.xyz. This is read from the text; nothing was executed.

Is Diagram to Image Converter safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Diagram to Image Converter use?

Diagram to Image Converter is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Diagram to Image Converter use?

About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Diagram to Image Converter?

Skills that share tags, products or a category with Diagram to Image Converter: Legal Diagram (lawve-ai/awesome-legal-skills, 847 stars), Sf Diagram Nanobananapro (Jaganpro/sf-skills, 424 stars), Gpt Image Skill (feiskyer/claude-code-settings, 1.7k stars) and Nanobanana Skill (feiskyer/claude-code-settings, 1.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Diagram to Image Converter?

sugarforever (a GitHub user) maintains it in sugarforever/01coder-agent-skills, which has 137 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on June 19, 2026.

Source: sugarforever/01coder-agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.