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.