skills.rest
shomatan
shomatanCOMMUNITY
Explore all skills by this author →
Website𝕏@shoma416GitHub

visualize-long-document

Generates self-contained HTML visualizations of long documents using Mermaid diagrams and structured cards.

3|Updated Jul 1, 2016
Search Tags:#documentation#markdown#html#mermaid#flowchart#visualization#diagram
One-click install
npx skills add https://github.com/shomatan/dotfiles --skill visualize-long-document-shomatan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visualize-long-document
Source: https://github.com/shomatan/dotfiles/tree/main/dot_claude/skills/visualize-long-document
Command: npx skills add https://github.com/shomatan/dotfiles --skill visualize-long-document-shomatan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Long specifications, RFCs, and design documents are hard to grasp at a glance. This Skill converts them into a single self-contained HTML page with diagrams, comparison tables, and timelines so readers can understand the overall structure quickly. ## Core Features & Use Cases - Automatic pattern selection: Chooses the right visual per section, such as Mermaid flowcharts for processes, sequence diagrams for interactions, comparison tables for alternatives, and CSS timelines for staged histories. - Self-contained HTML output: Produces one file with a table of contents, anchor links, print-friendly styling, and CDN-loaded Tailwind and Mermaid, saved to /tmp/claude-diagrams/ with a timestamped filename. - Use Case: Paste a long RFC or design doc and ask for a diagram; the Skill extracts motivation, design, flow, alternatives, and timeline sections and renders each with the most suitable visual. ## Quick Start Paste your long markdown document and ask: visualize this document as an HTML diagram page.

Frequently Asked Questions about visualize-long-document

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

FAQPage Schema
How do I visualize a long markdown document as HTML?▼

Paste the document and ask for a diagram or visualization. The Skill analyzes the structure, picks suitable visuals per section such as Mermaid flowcharts or comparison tables, and saves a self-contained HTML file to /tmp/claude-diagrams/.

What diagram types does Mermaid support for document visualization?▼

This Skill uses Mermaid flowcharts for processes and state transitions, sequence diagrams for interactions, and class or ER diagrams for data structures. Non-Mermaid visuals like cards, tables, and timelines are built with plain HTML and CSS.

Where is the generated HTML file saved?▼

Files are saved to /tmp/claude-diagrams/ using the pattern slug-YYYYMMDD-HHmmss.html to avoid name collisions. After saving, the Skill shows the file path and suggests the open command for macOS.

When should I not use document visualization?▼

Skip it for short documents of one or two paragraphs, when the user explicitly wants only a summary or bullet list, or for explaining a single code snippet where a code block suffices.

Why does a Mermaid diagram become unreadable in generated HTML?▼

Embedding long text in Mermaid nodes makes diagrams unreadable. Keep node labels to 10-20 characters and move details into nearby cards, and limit each section to at most two visual types.

Related Skills

Explore More Content & Communication Skills→
ThrimbdaThrimbda
13

report-walkthrough

Repackage delivery artifacts into reviewer-ready walkthroughs and PR bodies.

Community
Intermediate
twillcockstwillcocks

portal-share

Generate HMAC-SHA256 signed share links for hosted client portals.

Community
Advanced
nicepkgnicepkg
276

presentation-builder

Generate presentation outlines with slide structures, speaker notes, and visual suggestions.

Official
Intermediate
usetheodevusetheodev

deck

Plan and orchestrate presentation decks combining Excalidraw diagrams with Marp slides.

Community
Advanced