Mermaid diagrams are a popular way to describe processes and systems using simple text. However, many publishing platforms like GitHub Pages and Dev.to cannot render Mermaid code blocks directly. This means your diagrams will not show up as images.
This skill converts those Mermaid code blocks into PNG images automatically. It uses the mermaid.ink API to generate clear pictures. The images are saved in your project folder and the original code blocks are replaced with image references.
You can use this for documentation, blog posts, or any text file with Mermaid diagrams. It works with Markdown, RST, and other formats. The result is a set of images that work on any website.
Global
mkdir -p ~/.claude/skills/mermaid-to-imageProject
mkdir -p .claude/skills/mermaid-to-imageSource Repository
Grill With Docsmattpocock/skills
Stress-test your plan, refine your terms, and update docs instantly
Lark Doclarksuite/cli
Create read summarize edit translate and manage Lark cloud documents
To Prdmattpocock/skills
Generate a complete PRD from your conversation and codebase understanding
Github Actions Docsxixu-me/skills
Answers your GitHub Actions questions with exact official documentation links
Readme I18nxixu-me/skills
Localize your repo READMEs automatically with structure and selector intact
Domain Modelingmattpocock/skills
Define clear terms and record key decisions for a shared project language
Ubiquitous Languagemattpocock/skills
Build a shared glossary of terms from your conversations with clear definitions
Edit Articlemattpocock/skills
Polish your article drafts by improving clarity structure and flow