mermaid-to-image은(는) 무엇을 하나요?
mermaid.ink API를 사용하여 마크다운 파일의 Mermaid 코드 블록을 PNG 이미지로 변환합니다.
마크다운 파일의 Mermaid 코드 블록을 mermaid.ink API를 사용하여 PNG 이미지로 변환합니다.
이 스킬은 마크다운 파일에 포함된 Mermaid 다이어그램 코드 블록을 자동으로 감지하고, mermaid.ink API를 활용하여 고품질 PNG 이미지로 변환해줍니다. 개발자는 복잡한 다이어그램을 수동으로 이미지 변환할 필요 없이, 마크다운 문서에서 바로 Mermaid 코드를 작성하면 이 스킬이 자동으로 이미지 생성을 처리합니다. GitHub, GitLab, Claude Code, Cursor 등 다양한 플랫폼에서 사용할 수 있으며, 기존 마크다운 워크플로우와 자연스럽게 통합됩니다. CLI 기반으로 동작하여 CI/CD 파이프라인에도 쉽게 적용 가능하며, Mermaid 다이어그램을 문서, 위키, README 등에 효율적으로 포함시킬 수 있게 해줍니다.
npx skills add https://github.com/zc277584121/marketing-skills/tree/main/skills/mermaid-to-imageInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
mermaid.ink API를 사용하여 마크다운 파일의 Mermaid 코드 블록을 PNG 이미지로 변환합니다.
This repo contains 12 individual skills — each has its own dedicated page.
Take focused, region-specific screenshots from web pages. Navigates to the right page based on user context (URL, search query, social media post), locates the target region via DOM selectors, and crops to a clean, focused screenshot.
Automate Chrome browser tasks using agent-browser CLI. Navigate pages, fill forms, click buttons, take screenshots, extract data, and replay recorded workflows — all inside the user's real Chrome session.
Adapt and rewrite content for different platforms (LinkedIn, X, Reddit, English blog, WeChat). Each platform has its own tone, format, and length requirements.
Fetch, store, and visualize GitHub repository traffic data (views, clones, referrers, stars) with trend charts. Requires repo push access.
Generate illustration images for articles and documentation with a Codex-first workflow, OpenAI API fallback, and Gemini fallback.
Write Milvus application-level Jupyter notebook examples using a Markdown-first workflow with jupyter-switch for format conversion.
Convert local Markdown files to Feishu (Lark) documents with automatic image uploading. Uses the feishu-docx CLI tool.
Convert Mermaid code blocks in .mmd or .md files to animated GIFs with customizable animation styles (progressive, highlight walk, pulse flow, wave).
Post-process raw screen recordings by removing silent segments and applying speed adjustments. Uses FFmpeg-based Python scripts to optimize video pacing automatically.
Review and adjust writing style to reduce AI-generated patterns, making text read more naturally and human-like. Supports Chinese and English.
Compress PNG and JPEG screenshots in place using pngquant and jpegoptim, keeping the original format for maximum compatibility.
Convert a video to multiple GIF variants with different quality/size tradeoffs. Generates a comparison set so the user can visually pick the best result.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.