Convert Mermaid code blocks in Markdown files to PNG images using the mermaid.ink API.

Skill: Mermaid to Image Convert mermaid code blocks. Report how many blocks were found and in which files before proceeding. Step 2: Determine the image output directory Check the project structure to find where images are typically stored: If a clear image directory exists (e.g., images/ , assets/images/ ), use it. Create a subdirectory by topic if appropriate (e.g., images/<topic / ). If no image directory is obvious or multiple candidates exist , ask the user: Step 3: Render each diagram to PNG Use the [mermaid.ink](https://mermaid.ink) API to render diagrams. Run this Python snippet for each block: Important: The User Agent header is required — mermaid.ink returns 403 without it. Naming convention Use descriptive filenames based on the diagram content, not generic names: GOOD: architecture overview.png , data flow.png , heartbeat sequence.png BAD: mermaid 1.png , diagram.png , image1.png Step 4: Replace code blocks with image references Replace each block with a Markdown image reference using a relative path from the file to the image: If the project uses absolute URLs (e.g., GitHub Pages), use those instead: Choose the link style that matches the project's existing image references. If unsure, use relative paths. Step 5: Report results After processing, summarize: How many diagrams were converted Where the images were saved Which files were modified Edge Cases Large diagrams : mermaid.ink may time out on very complex diagrams. If a render fails, report the error and suggest the user simplify the diagram or try an alternative renderer. Multiple blocks in one file : process all blocks in order, give each a unique descriptive filename. Already rendered blocks : if a mermaid block already has a corresponding image (commented out or adjacent), skip it or ask the user. Non Markdown files : the same approach works for any text file containing mermaid code blocks (e.g., .rst , .txt ).

mermaid-to-image