skills.rest
widnyana
widnyanaCOMMUNITY
Explore all skills by this author →
Website𝕏@widnyana_GitHub

architecture-diagram

Generate architecture diagrams as HTML and PNG via headless Chrome.

4|Updated Feb 13, 2026
Search Tags:#data flow#system design#headless chrome#PNG export#architecture diagram#ui visualization#deployment diagram
One-click install
npx skills add https://github.com/widnyana/eyay-toolkits --skill architecture-diagram-widnyana
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/widnyana/eyay-toolkits/tree/main/plugins/visual-gen/skills/architecture-diagram
Command: npx skills add https://github.com/widnyana/eyay-toolkits --skill architecture-diagram-widnyana

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-chrome, google-chrome-stable, chromium, chrome headless, and includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill removes the manual, browser-driven work of drawing and exporting architecture diagrams by generating a ready-to-share PNG directly from your system description.

Core Features & Use Cases

  • End-to-end diagram generation: collects component and data-flow details, writes editable HTML markup, and renders a PNG via headless Chrome.
  • Two visual styles: dark theme (SVG-based, default) and light theme (div-based, print-friendly for slides and docs).
  • Diagram correctness & usability: supports boundaries (cloud regions, security groups, Kubernetes namespaces), labeled arrows, legends outside boundaries, and verification-driven rework.

Quick Start

Ask it to create a dark-themed architecture diagram of your system showing frontend, backend, database, and the data flow, and it will produce both the editable HTML and the rendered PNG.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I automatically generate an architecture diagram as a PNG from a system description?▼

To generate an architecture diagram as a PNG, provide your system description and data-flow details. The Skill writes editable HTML markup and renders it directly to a PNG file using headless Chrome, removing manual browser drawing and exporting.

Can I create deployment diagrams with cloud boundaries and labeled data flow arrows?▼

Yes, you can create deployment diagrams with cloud boundaries. The generation process supports boundary styling for cloud regions, security groups, and Kubernetes namespaces, alongside labeled arrows and external legends to ensure accurate system design visualization.

Does generating PNG diagrams with headless Chrome require a specific browser version?▼

Generating PNG diagrams via headless Chrome requires a local installation of Chromium, Google Chrome, or Google Chrome Stable. The Skill uses these dependencies to execute the headless rendering workflow and output the final image artifact.

What is the best way to export print-friendly architecture diagrams for slides and documentation?▼

The best way to export print-friendly architecture diagrams is using the light theme. This div-based visual style is specifically designed for slides and documentation, contrasting with the default SVG-based dark theme for digital UI visualization.

How do I update or rework an existing system design visualization if components are missing?▼

To rework a system design visualization, adjust the initial text description. The workflow includes verification-driven rework to check diagram correctness, updating the editable HTML markup and re-rendering the PNG to reflect the modified components and data flow.

Are there limitations when using HTML markup for component relationship diagrams instead of SVG?▼

Using HTML markup for component relationship diagrams means the output is div-based rather than SVG. While this works well for light themes and print-friendly exports, complex boundary layouts and semantic component color assignments are managed within the generated HTML structure.

Related Skills

Explore More Design & Creative Skills→
mcpc-techmcpc-tech
100

creating-slidev-presentations

Generate Slidev presentations from Markdown with themes, layouts, and animations.

Official
Intermediate
SomtoUgehSomtoUgeh

technical-svg-diagrams

Generate technical SVG diagrams for architecture, flow, and component views.

Community
Basic
AreebaZafarChohanAreebaZafarChohan

architecture-documentation

Convert specifications into architectural designs with components, data flows, and contracts.

Community
Advanced
freedomw1987freedomw1987
2

architecture-diagram

Generate dark-themed architecture diagrams as self-contained HTML files with inline SVG.

Community
Intermediate