skills.rest
jimmy071919
jimmy071919COMMUNITY
Explore all skills by this author →
GitHub

diagram-generation

Generate HTML-based architecture diagrams from textual component descriptions.

Updated Aug 23, 2026
Search Tags:#code review#HTML#diagram generation#architecture visualization#system documentation
One-click install
npx skills add https://github.com/jimmy071919/iiii-project --skill diagram-generation-jimmy071919
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-generation
Source: https://github.com/jimmy071919/iiii-project/tree/main/opik/.agents/skills/diagram-generation
Command: npx skills add https://github.com/jimmy071919/iiii-project --skill diagram-generation-jimmy071919

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires html2canvas, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of generating self-contained HTML architecture diagrams, ideal for documentation and communication in PRs and task plans.

Core Features & Use Cases

  • Automatic Diagram Creation: Visualize code changes, data flows, and architecture decisions with minimal input.
  • Customization: Customize diagrams based on different scenarios, such as PR reviews, architecture explanations, or flow documentation.
  • Use Case: With a few steps, this Skill generates a high-quality diagram that shows the structure of your application changes for a code review.

Quick Start

Run the 'diagram-generation skill with the command: diagram generate --template my_template --input input.yaml

Frequently Asked Questions about diagram-generation

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

FAQPage Schema
How do I generate HTML architecture diagrams from textual descriptions?▼

To generate HTML architecture diagrams, you provide textual descriptions of components and relationships. The Skill automatically converts this input into self-contained HTML visualizations suitable for system documentation and team collaboration.

Can I customize architecture diagrams for different code review scenarios?▼

Yes, you can customize architecture diagrams for different scenarios. The Skill allows tailoring visualizations specifically for PR reviews, architecture explanations, or flow documentation based on your project management needs.

How does html2canvas work with architecture visualization for system documentation?▼

Html2canvas renders the generated HTML architecture diagrams into portable image formats. This dependency ensures your system documentation visualizations are easily shareable across different platforms without external rendering engines.

What is the best way to visualize code changes for a pull request review?▼

The best way to visualize code changes for a PR review is generating a self-contained HTML diagram. The Skill creates high-quality architecture visualizations showing application structure changes with minimal textual input.

Do I need to write input.yaml files to automate diagram generation?▼

Yes, you need to provide an input.yaml file to automate diagram generation. Executing the command with your specified template and YAML input allows the Skill to parse components and output the HTML architecture diagram.

Related Skills

Explore More Software Engineering Skills→
ahostbrahostbr
12

excalidraw-diagram-generator

Convert natural-language requests into executable Excalidraw diagrams.

Community
Advanced
luanmorenommacielluanmorenommaciel
231

visual-explainer

Generates HTML files for technical diagrams, data tables, and slide decks using Markdown and custom CSS.

Community
Advanced
dmitriybdmitriyb
4

fix

Resolve pull request comments via GitHub API calls.

Community
Intermediate
davpatel605-beepdavpatel605-beep

code-wiki

Generate structured wiki documentation and Mermaid architecture diagrams from source code.

Community
Advanced