What happens if my Mermaid syntax has an error?

The skill identifies validation errors in a non-blocking way, prepending a warning to the document while allowing the preview to open so you can see Mermaid's built-in error messages.

Is this skill compatible with Windows?

Yes, the skill features platform detection that correctly handles file paths and browser launching across macOS, Linux, and Windows.

Does it support Mermaid diagrams?

Yes, it includes full support for Mermaid.js and performs a high-speed validation pass to check diagram syntax before rendering.

Can I change the visual style of the preview?

Yes, you can choose between 'github' (default), 'dark', and 'minimal' themes to suit your environment or presentation needs.

Does it require an external web server to view the HTML?

No, it generates self-contained HTML files with embedded libraries that run locally in your browser from your system's temporary directory.

Markdown & Mermaid Preview

Name: Markdown & Mermaid Preview
Author: rp1-run

byrp1-run

•

学習とドキュメンテーション

Generates professional, browser-ready HTML previews from Markdown files and Mermaid diagrams with automated syntax validation.

概要

The Markdown Preview skill transforms raw Markdown, plain text, and Mermaid diagrams into styled, self-contained HTML documents that automatically open in your default browser. It features an optimized single-pass validation engine for Mermaid diagrams to ensure visual accuracy before rendering. By providing multiple themes—including GitHub-style, Dark mode, and Minimalist—this skill helps developers and technical writers visualize documentation, system architectures, and formatted reports instantly without manual export steps or external tools.

主な機能

4 GitHub stars
Integrated Mermaid diagram validation
Instant browser-based HTML previews
GitHub-style, Dark, and Minimal themes
Self-contained files with syntax highlighting
Cross-platform support for macOS, Linux, and Windows

ユースケース

Reviewing formatted technical documentation before committing changes
Visualizing complex system architecture diagrams in Mermaid
Generating shareable HTML reports from raw terminal or agent output

概要

主な機能

4 GitHub stars
Integrated Mermaid diagram validation
Instant browser-based HTML previews
GitHub-style, Dark, and Minimal themes
Self-contained files with syntax highlighting
Cross-platform support for macOS, Linux, and Windows

ユースケース

Reviewing formatted technical documentation before committing changes
Visualizing complex system architecture diagrams in Mermaid
Generating shareable HTML reports from raw terminal or agent output