skills.rest
cvenwu
cvenwuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

architecture-diagram

Generate architecture diagrams as self-contained HTML+SVG files.

Updated Aug 23, 2026
Search Tags:#architecture#html#security#cloud#svg#diagrams#design-system
One-click install
npx skills add https://github.com/cvenwu/AiFlow --skill architecture-diagram-cvenwu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/cvenwu/AiFlow/tree/main/skills/architecture-diagram
Command: npx skills add https://github.com/cvenwu/AiFlow --skill architecture-diagram-cvenwu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architects and engineers often need clear, shareable diagrams of complex architectures. This skill generates polished, self-contained architecture diagrams as HTML+SVG files, ready to export and embed.

Core Features & Use Cases

  • Generate polished diagrams as standalone HTML+SVG files with inline styling.
  • Define color semantics, typography, and layout rules to ensure consistency across diagrams.
  • Use in cloud infrastructure reviews, security topology maps, or network diagrams to communicate architecture clearly to stakeholders.

Quick Start

Tell the AI to generate a dark-themed architecture diagram for a 3-tier web app using HTML+SVG output.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I generate a self-contained HTML and SVG architecture diagram?▼

To generate a self-contained HTML and SVG architecture diagram, you prompt the AI to build a visual layout using inline SVG components and styling, producing a standalone HTML file ready for immediate export and stakeholder sharing.

What is the best way to create a cloud infrastructure topology map for a review?▼

The best way to create a cloud infrastructure topology map is to generate a semantic HTML and SVG file that visually represents your system topology, ensuring your infrastructure planning and security assessments are clearly communicated.

Can I define custom color semantics and typography for my system diagrams?▼

Yes, you can define custom color semantics, typography, and layout rules to ensure visual consistency across your system diagrams, applying design-system-driven styling directly within the generated HTML and SVG output.

Does this approach work for mapping security topologies and network architectures?▼

Yes, this approach works for mapping security topologies and network architectures by generating export-ready visuals with inline SVG components and semantic color coding, which clarifies complex security assessments across cloud and on-prem environments.

How do I export my network diagram to share with stakeholders?▼

You export your network diagram by utilizing the generated standalone HTML file, which contains all inline SVG components and styling, making it directly embeddable and shareable without external dependencies.

Related Skills

Explore More Software Engineering Skills→
yanochka11yanochka11

diagrams

Generate text-based diagrams from technical concepts and system structures.

Community
Intermediate
ToqsickToqsick

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files.

Community
Intermediate
EsdevenimentsEsdeveniments
2

design-system-conventions

Enforce semantic design tokens and UI styling rules across frontend codebases.

Official
Basic
mgajewskikmgajewskik
6

plantuml-diagrams

Generate PlantUML diagrams from .puml files using the plantuml CLI.

Community
Intermediate