scieng-skill

Generate self-contained HTML files rendering Mermaid, Graphviz, and LaTeX via CDN.

Updated Aug 27, 2026

Search Tags:#html #mermaid #rendering #latex #diagram #graphviz #playground

Ready to run

npx skills add https://github.com/danielsimonjr/claude-skills --skill scieng-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: scieng-skill
Source: https://github.com/danielsimonjr/claude-skills/tree/main/scieng-skill
Command: npx skills add https://github.com/danielsimonjr/claude-skills --skill scieng-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables users to author and render Mermaid diagrams, Graphviz DOT graphs, and LaTeX equations inside a single self-contained HTML playground.

Core Features & Use Cases

Self-contained HTML playgrounds that render diagrams and math with CDN-based renderers.
Supports Mermaid diagrams, Graphviz DOT graphs, and LaTeX equations for documentation, teaching, and prototyping.
Provides a ready-made workflow to generate visuals and equations directly in the browser.

Quick Start

Create a standalone HTML file that renders a Mermaid diagram, a Graphviz DOT graph, and a LaTeX equation using CDN-based renderers. Open the file in a browser to see the output.

Frequently Asked Questions about scieng-skill

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

FAQPage Schema

How do I render Mermaid diagrams and LaTeX equations in a single HTML file?▼

To render Mermaid diagrams and LaTeX equations in a single HTML file, use a self-contained HTML playground with CDN-based renderers. This approach allows immediate browser visualization without server-side dependencies.

Can I display Graphviz DOT graphs directly in a browser without installing software?▼

You can display Graphviz DOT graphs directly in a browser by using a self-contained HTML file with CDN-based renderers. This method bypasses local software installation and provides immediate visual output for DOT graph formats.

What is the best way to create a self-contained HTML playground for technical documentation?▼

The best way to create a self-contained HTML playground for technical documentation is to integrate CDN-based renderers for Mermaid, Graphviz, and LaTeX. This generates a single portable file for documentation, teaching, and prototyping workflows.

Does this HTML rendering approach work for software prototyping and technical blogs?▼

Yes, this HTML rendering approach works for software prototyping and technical blogs by generating standalone files that visualize diagrams and math. It applies directly to documentation and research workflows requiring immediate browser rendering.

Do I need a YAML frontmatter to render diagrams in an HTML playground?▼

You need a YAML frontmatter with name and description in a SKILL.md file to define the rendering workflow. This metadata structures the generation of self-contained HTML files that use CDN-based renderers for browser output.

Are there limitations to using CDN-based renderers for HTML diagrams and math?▼

Using CDN-based renderers for HTML diagrams and math requires an active internet connection to load external libraries. This dependency means the self-contained HTML file cannot render visual outputs offline in a browser environment.