skills.rest
sparkling
sparklingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mermaid-export

Export Mermaid diagram blocks from Markdown, HTML, MDX, reStructuredText, and AsciiDoc documents to PNG images.

1|Updated Dec 11, 2025
Search Tags:#documentation#markdown#mermaid#export#diagram#render
One-click install
npx skills add https://github.com/sparkling/claude-config --skill mermaid-export
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-export
Source: https://github.com/sparkling/claude-config/tree/main/skills/mermaid-export
Command: npx skills add https://github.com/sparkling/claude-config --skill mermaid-export

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagrams created or edited in documents are often left unrendered, resulting in missing visuals when sharing or publishing. This Skill renders Mermaid blocks to PNG images immediately after creation or modification, BEFORE committing, ensuring diagrams are always visible.

Core Features & Use Cases

  • Automatic rendering: Converts all Mermaid code blocks in documents to PNG images.
  • In-document updates: Replaces the Mermaid code blocks with image references and preserves the original Mermaid source inside a collapsible details block for easy editing.
  • Broad format support: Processes files with extensions such as .md, .html, .mdx, .rst, and .adoc.

Quick Start

Process a Mermaid-containing document with the export tool, e.g.: node ~/.claude/tools/mermaid-renderer/process-document.js <document-path> --verbose

Frequently Asked Questions about mermaid-export

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I export Mermaid diagrams to PNG images from my markdown documents?▼

Export Mermaid diagrams by running the process-document tool on your markdown, HTML, MDX, reStructuredText, or AsciiDoc file. The tool converts all Mermaid code blocks to PNG images, replaces them with image references, and preserves the original source in collapsible details blocks for editing.

Can I use Mermaid diagram export with multiple document formats?▼

Yes, the export tool processes files with .md, .html, .mdx, .rst, and .adoc extensions. It automatically detects Mermaid blocks in each format and renders them to PNG, maintaining format compatibility throughout the workflow.

What happens to my original Mermaid code when I export diagrams to PNG?▼

Original Mermaid source code is preserved inside a collapsible details block after export. This keeps the diagram editable and allows you to regenerate PNGs without losing the code when you modify diagrams later.

How do I customize diagram rendering with themes and layout options?▼

The export tool supports CLI options including --theme for visual styling, --verbose for detailed output logging, --dry-run to preview changes, and ELK layout configurations for advanced diagram layout control.

When should I run Mermaid export in my documentation workflow?▼

Run export immediately after creating or editing Mermaid diagrams, before committing. This ensures rendered PNG visuals are always present when sharing or publishing documents, preventing broken diagram references.

Why would diagrams remain unrendered without an export step?▼

Mermaid code blocks in documents are text-only until rendered. Without export, viewers see raw syntax instead of visual diagrams, making documentation incomplete. Export automates rendering so diagrams display correctly every time.

Related Skills

Explore More Content & Communication Skills→
mchien15mchien15

mermaidjs-v11

Renders Markdown-embedded MIME v11 diagrams to interactive HTML.

Community
Intermediate
abudhahirabudhahir

mermaid-flow-image

Generate Mermaid flow diagrams and render them as PNG images via Kroki.

Community
Intermediate
FaysilAlshareefFaysilAlshareef
4

architecture-docs

Generate version-controlled Mermaid architecture diagrams for microservice systems.

Community
Intermediate
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic