Mermaid to PNG Skill | Agent Skills

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/agents/shared/skills/mermaid-to-png/mermaid-to-png.ts "<markdown-file>"

What it does

Finds all ```mermaid code blocks in the markdown file
Renders each to PNG via mermaid.ink API (no local browser needed)
Saves PNGs to assets/<filename-kebab-case>/diagram-N.png
Inserts ![Diagram N](assets/...) after each mermaid block
Preserves original mermaid code for future edits

Output structure

document.md
assets/
  document/
    diagram-1.png
    diagram-2.png
    ...

Example

Before:

# My Doc

```mermaid
graph LR
    A --> B
```

After:

# My Doc

```mermaid
graph LR
    A --> B
```

![Diagram 1](assets/my-doc/diagram-1.png)

Notes

Uses mermaid.ink web API (requires internet)
Filenames are converted to kebab-case (no spaces)
White background for compatibility
Idempotent: re-running will regenerate PNGs but not duplicate image refs (mermaid blocks without existing image refs get new ones)

Agent Skills: Mermaid to PNG