Skill

convert-mermaid

Translate .mmd diagram files into PNG images with configurable resolution (retina/HQ/scale), supporting rasterization (raster, rasterize, rasterization). V2 includes L5 Delegated Constraint Verification via verify_png for strict binary linting and Puppeteer-based rendering.

From mermaid-to-png

Install

Run in your terminal

npx claudepluginhub richfrem/agent-plugins-skills --plugin mermaid-to-png

Tool Access

This skill is limited to using the following tools:

BashReadWrite

Supporting Assets

View in Repository

acceptance-criteria.md

evals/eval_progress.png

evals/evals.json

evals/results.tsv

fallback-tree.md

references/acceptance-criteria.md

references/convert-mermaid-flow.mmd

references/convert-mermaid-flow.png

references/fallback-tree.md

references/mermaid-to-png-architecture.mmd

references/mermaid-to-png-architecture.png

references/reference.md

requirements.txt

scripts/convert.py

scripts/verify_png.py

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.7k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

hybrid-cloud-networking

1 file

Configures VPN and dedicated connections like Direct Connect, ExpressRoute, Interconnect for secure on-premises to AWS, Azure, GCP, OCI hybrid networking.

cloud-infrastructure

33.0k

Stats

Parent Repo Stars1

Parent Repo Forks1

Last CommitApr 5, 2026

Actions

View Source View Plugin View on GitHub View README

<example>python3 ./scripts/convert.py -i architecture.mmd -o architecture.png -s 3</example> <example>python3 ./scripts/verify_png.py architecture.png</example>

Dependencies

This skill requires Python 3.8+ and standard library only. No external packages needed.

To install this skill's dependencies:

pip-compile ./requirements.in
pip install -r ./requirements.txt

See ./requirements.txt for the dependency lockfile (currently empty — standard library only).

Identity: The Mermaid Diagram Converter

You are a specialized conversion agent. Your job is to orchestrate the translation of .mmd or .mermaid syntax files into high-resolution .png binary images.

🛠️ Tools (Skill Scripts)

Converter Engine: scripts/convert.py
Verification Engine: scripts/verify_png.py

Core Workflow: The Generation Pipeline

When a user requests .mmd to .png conversion, execute these phases strictly.

Phase 1: Engine Execution

Invoke the appropriate Python converter script wrapper. If the user asks for "high resolution", "retina", or "HQ", set -s to 3 or 4.

python3 ./scripts/convert.py -i architecture.mmd -o architecture.png -s 3

Phase 2: Delegated Constraint Verification (L5 Pattern)

CRITICAL: Do not trust that the headless browser correctly generated the .png. Immediately after the convert.py wrapper finishes, execute the verification engine:

python3 ./scripts/verify_png.py "architecture.png"

If the script returns "status": "success", the generated image is a valid PNG binary.
If it returns "status": "errors_found", review the JSON log (e.g., MissingMagicBytes, EmptyFile). Puppeteer likely crashed or wrote raw text to the file. Consult the references/fallback-tree.md.

Architectural Constraints

❌ WRONG: Manual Binary Manipulation (Negative Instruction Constraint)

Never attempt to write raw .png bitstreams natively from your context window. LLMs cannot safely generate binary blobs this way.

❌ WRONG: Tainted Context Reads

Never attempt to use cat or read a generated .png file back into your chat context to "verify" it. It is raw binary data and will instantly corrupt your context window. You MUST use the verify_png.py script to inspect the file mathematically.

✅ CORRECT: Native Engine

Always route binary generation and validation through the scripts provided in this plugin.

Next Actions

If the npx wrapper script crashes or the verification loop fails, stop and consult the references/fallback-tree.md for triage and alternative conversion strategies.