mermaid-to-png

Installation
SKILL.md

Mermaid to PNG

Extracts mermaid diagrams from markdown files, renders them to PNGs, and inserts image references after each mermaid block. The original mermaid code is preserved for future editing.

Usage

Run the script via bunx:

bunx ~/nixos-config/modules/programs/claude-code/skills/mermaid-to-png/mermaid-to-png.ts "<markdown-file>"

What it does

  1. Finds all ```mermaid code blocks in the markdown file
  2. Renders each to PNG via mermaid.ink API (no local browser needed)
  3. Saves PNGs to assets/<filename-kebab-case>/diagram-N.png
  4. Inserts ![Diagram N](assets/...) after each mermaid block
  5. Preserves original mermaid code for future edits
Related skills
Installs
14
GitHub Stars
1
First Seen
Jan 27, 2026