From bilardi
Replace mermaid code blocks in markdown files with PNG images. Extracts blocks to .mermaid files, generates mermaid.live links for the user to create PNGs from browser, then substitutes the blocks with image references. Use when the user asks to replace mermaid diagrams with images.
How this skill is triggered — by the user, by Claude, or both
Slash command
/bilardi:mermaid-pngThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Replace mermaid code blocks in markdown files with PNG images.
Replace mermaid code blocks in markdown files with PNG images.
When the user says "sostituisci i mermaid con delle immagini", "replace mermaid with images", "convert mermaid to png", or similar.
Find mermaid blocks - scan the target markdown file for ```mermaid code blocks
Extract to files - save each block to img/{type}.{n}.mermaid where {type} is the diagram type (first word: flowchart, sequenceDiagram, classDiagram, etc.) and {n} is a sequential number starting from 1 (2, 3, .. if there are multiple of the same type)
Generate mermaid.live links - for each .mermaid file, encode the content and generate a mermaid.live/edit URL using pako compression:
import json, base64, zlib
state = json.dumps({
'code': mermaid_code,
'mermaid': {'theme': 'default'},
'autoSync': True,
'updateDiagram': True
})
compressed = zlib.compress(state.encode('utf-8'), 9)
encoded = base64.urlsafe_b64encode(compressed).decode('ascii')
url = f'https://mermaid.live/edit#pako:{encoded}'
Present links to the user - show each link with instructions:
img/{type}.{n}.pngWait for confirmation - the user will confirm when PNGs are in place
Replace blocks - substitute each ```mermaid ... ``` block in the markdown with  where {alt text} is a descriptive caption derived from the diagram type and context
.mermaid source files: img/ directory of the project.png files: same img/ directory (created by the user from browser)img/ directory must exist; create it if missing.mermaid file already exists with the same name, ask before overwriting.mermaid files are kept as source of truth for future editsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub bilardi/publish-claude-plugins --plugin bilardi