richdocs

Convert markdown files into interactive HTML documents with rich media.

2|1|Updated Aug 23, 2025

Search Tags:#theming #markdown #html #data visualization #interactive

Ready to run

npx skills add https://github.com/neozenith/agentic-dotfiles --skill richdocs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: richdocs
Source: https://github.com/neozenith/agentic-dotfiles/tree/main/skills/richdocs
Command: npx skills add https://github.com/neozenith/agentic-dotfiles --skill richdocs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires marked, mermaid, cytoscape, plotly, uv, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill converts markdown documents into rich HTML companions, enhancing the user experience with interactive elements and theming options.

Core Features & Use Cases

Markdown to HTML Conversion: Converts markdown files into interactive HTML documents.
Rich Blocks: Renders mermaid diagrams, cytoscape graphs, and plotly charts directly within markdown files.
Stencils: Integrates a library of vendor SVG icons from draw.io for custom architecture diagrams.
Brandpack: Allows for theming with custom design tokens.
Serving: Includes a localhost server to serve the generated HTML documents reliably.

Quick Start

Generate an interactive HTML version of your markdown document by running:

uv run --no-project .claude/skills/richdocs/scripts/md2html.py TARGET_ARCHITECTURE.md

Frequently Asked Questions about richdocs

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

FAQPage Schema

How do I convert markdown to interactive HTML with embedded charts?▼

You can convert markdown to interactive HTML by using a script that processes the file and renders rich blocks like plotly charts and mermaid diagrams directly within the document. The output is a rich HTML companion with interactive data visualizations.

Can I render mermaid diagrams and cytoscape graphs inside markdown files?▼

Yes, mermaid diagrams and cytoscape graphs can be rendered inside markdown files by converting them into rich HTML companions. The conversion process automatically processes these rich blocks to create interactive visual elements.

What's the best way to add custom theming to HTML documentation generated from markdown?▼

The best way to add custom theming to HTML documentation generated from markdown is by using a Brandpack feature that applies custom design tokens. This allows you to enhance the user experience with personalized theming options.

Does converting markdown to interactive HTML require installing Python libraries?▼

Yes, converting markdown to interactive HTML requires various Python libraries and external CDNs for rich media and theming. You can run the conversion script using uv to manage the required dependencies like marked, mermaid, cytoscape, and plotly.

How do I serve generated HTML documents locally for reliable viewing?▼

To serve generated HTML documents locally for reliable viewing, you can use the built-in localhost server included in the skill. This ensures the interactive elements and external CDN resources load correctly during local viewing.

Can I use vendor SVG icons for custom architecture diagrams in markdown?▼

Yes, you can use vendor SVG icons for custom architecture diagrams in markdown by utilizing the integrated Stencils library. This feature incorporates draw.io SVG icons to help you create detailed technical drawings within your interactive HTML companions.