skills.rest
guoliang1114-boop
guoliang1114-boopCOMMUNITY
Explore all skills by this author →
GitHub

architecture

Create layered system architecture diagrams from HTML/CSS templates with optional SVG connectors.

43|2|Updated Mar 26, 2026
Search Tags:#html#system design#microservices#architecture diagrams#svg connectors#css templates#layered visualization
One-click install
npx skills add https://github.com/guoliang1114-boop/AriaAI --skill architecture-guoliang1114-boop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/guoliang1114-boop/AriaAI/tree/main/skills/architecture
Command: npx skills add https://github.com/guoliang1114-boop/AriaAI --skill architecture-guoliang1114-boop

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns architecture design into clear, reusable layered diagrams so you can communicate system structure fast and consistently instead of drafting visuals manually.

Core Features & Use Cases

  • Layered system diagrams: Build diagrams with semantic tiers (User, Application, AI/Logic, Data, Infrastructure, External) using consistent visual meaning and grid layouts.
  • Flexible layouts: Choose single-column, two-column, three-column, and specialized arrangements such as dashboard, pipeline, grid catalog, and nested containers.
  • Copy-ready HTML/CSS templates: Produce ready-to-paste HTML diagrams with color-coded tiers and structured component panels for technology stack and topology documentation.
  • Connector diagrams (optional): Use an SVG overlay to draw orthogonal (right-angle) dependency/data-flow connectors with solid or dashed lines and labeled arrows.

Use it when you need to document a microservices topology for a consulting deliverable, map data + infrastructure boundaries for an internal architecture review, or produce consistent technical visuals for product/RFP materials.

Quick Start

Generate an architecture diagram by embedding the HTML structure directly in your Markdown, selecting a layout and style, and filling each layer with your components and technologies.

Frequently Asked Questions about architecture

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

FAQPage Schema
How do I generate layered architecture diagrams for microservices topology mapping?▼

Layered architecture diagrams for microservices topology mapping are generated by embedding inline HTML and CSS templates with semantic tiers directly into Markdown. This produces copy-ready, color-coded visual structures for your system topology documentation.

Can I draw orthogonal connectors with labeled arrows in an HTML architecture diagram?▼

You can draw orthogonal connectors with labeled arrows in an HTML architecture diagram by applying an optional SVG overlay. This overlay supports solid or dashed right-angle lines to map dependency and data-flow paths across grid-based components.

What is the best way to document a multi-tier application design with consistent visual meaning?▼

The best way to document a multi-tier application design with consistent visual meaning is using predefined semantic tiers like User, Application, AI/Logic, Data, and Infrastructure in a grid layout. This ensures structured component panels across technology stack documentation.

Does the architecture diagram template support dashboard and pipeline layouts?▼

Architecture diagram templates support single-column, two-column, three-column, dashboard, pipeline, grid catalog, and nested container layouts. These flexible arrangements allow you to produce specialized stage-based or dashboard-style technical overviews.

Why does my HTML architecture diagram break when I use fenced code blocks or empty lines?▼

Your HTML architecture diagram breaks when using fenced code blocks or empty lines because the template requires continuous diagram structure without empty lines inside the HTML. You must provide inline HTML directly to maintain the grid-based component placement.

Related Skills

Explore More Design & Creative Skills→
aryanshrai03aryanshrai03

architecture

Generate layered system architecture diagrams as embedded HTML in Markdown.

Community
Intermediate
rm2thaddeusrm2thaddeus
4

technical-doc-creator

Generate HTML technical documentation with code blocks, API references, and architecture diagrams.

Community
Intermediate
XCmiaowXCmiaow

architecture

Create layered system architecture diagrams with embedded HTML and scoped CSS.

Community
Intermediate
rnbenrnben

architecture-diagram

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

Community
Intermediate