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

Ready to run

npx skills add https://github.com/jimmy071919/iiii-project --skill diagram-generation-jimmy071919

💬 Prompt for ChatGPT / Claude Chat▼

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.