doc-render-beauty

Convert Markdown documents into HTML pages with pre-rendered Mermaid diagrams.

2|Updated Oct 16, 2025
One-click install
npx skills add https://github.com/musingfox/cc-plugins --skill doc-render-beauty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: doc-render-beauty
Source: https://github.com/musingfox/cc-plugins/tree/main/doc-viz/skills/doc-render-beauty
Command: npx skills add https://github.com/musingfox/cc-plugins --skill doc-render-beauty

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Render Markdown documents as polished HTML pages with pre-rendered Mermaid diagrams, enabling fast, server-side rendering without client Mermaid.js.

Core Features & Use Cases

  • Pre-render Mermaid diagrams to SVG for fast loading in browsers.
  • Render Markdown with syntax highlighting, math, and responsive design for documentation, specs, and READMEs.
  • Use Case: Share beautifully formatted docs with diagrams without needing a browser runtime.

Quick Start

Ask the AI to render the provided Markdown document as a beautifully formatted HTML page with pre-rendered Mermaid diagrams.

Frequently Asked Questions about doc-render-beauty

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

FAQPage Schema
How do I render Markdown to HTML with Mermaid diagrams pre-rendered server-side?▼

To render Markdown to HTML with pre-rendered Mermaid diagrams, you convert the document so diagrams become embedded SVGs. This avoids client-side Mermaid.js dependencies and enables fast, browser-ready viewing of formatted documentation.

What is the best way to share Markdown documentation with diagrams without requiring a browser runtime?▼

The best way to share Markdown documentation without a browser runtime is converting it to an HTML page with pre-rendered Mermaid diagrams. This outputs a standalone, fast-loading file with syntax highlighting, math support, and responsive design.

Can I render Markdown with syntax highlighting and math support for README files?▼

Yes, you can render Markdown with syntax highlighting and math support for READMEs. Converting Markdown to HTML applies these formatting features alongside pre-rendered Mermaid diagrams, producing polished, browser-ready documentation pages.

Does pre-rendering Mermaid diagrams to SVG work for fast-loading browser documentation?▼

Yes, pre-rendering Mermaid diagrams to SVG works for fast-loading browser documentation. By converting diagrams server-side during the Markdown to HTML rendering process, the output eliminates client Mermaid.js dependencies and accelerates page load times.

Do I need client-side Mermaid.js to display diagrams in my rendered Markdown HTML?▼

No, you do not need client-side Mermaid.js to display diagrams in rendered Markdown HTML. The conversion process pre-renders Mermaid diagrams directly to SVG server-side, ensuring the output HTML is fully browser-ready without additional client libraries.

Why does my Markdown documentation need server-side rendering for embedded Mermaid diagrams?▼

Markdown documentation needs server-side rendering for embedded Mermaid diagrams to avoid client-side runtime dependencies. Pre-rendering diagrams to SVG ensures fast loading, safe HTML output, and consistent viewing across browsers without requiring users to load external JavaScript.