skills.rest
XCmiaow
XCmiaowCOMMUNITY
Explore all skills by this author →
GitHub

architecture

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

Updated May 5, 2026
Search Tags:#data flow#system design#microservices#architecture diagrams#html css#diagram styling#layered layout
One-click install
npx skills add https://github.com/XCmiaow/cc-deploy --skill architecture-xcmiaow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/XCmiaow/cc-deploy/tree/main/skills/architecture
Command: npx skills add https://github.com/XCmiaow/cc-deploy --skill architecture-xcmiaow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of producing clear, consistent architecture diagrams without spending hours manually formatting layout, layers, colors, and grid structure.

Core Features & Use Cases

  • Layered architecture diagrams: Builds multi-tier layouts (User, Application, AI/Logic, Data, Infrastructure, and External Services) with consistent semantics and color-coded tiers for faster comprehension.
  • HTML/CSS diagram templates: Generates diagrams as direct embedded HTML (no HTML code fences) so the output renders reliably in Markdown viewers that support HTML.
  • Reusable layout and styling variants: Supports multiple layout patterns (e.g., banner+center, dashboards, sidebars, pipelines) and style themes (e.g., steel-blue, neon-dark, frost-clean) for different audiences and contexts, from internal docs to tech talks.

Quick Start

Create a layered system architecture diagram for a microservices platform using the HTML/CSS template, with a three-column layout that includes a left monitoring sidebar and a right security sidebar, and ensure all layers are color-coded and arranged using grid-based component boxes.

Frequently Asked Questions about architecture

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

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

You can generate microservices topology diagrams using embedded HTML and scoped CSS with semantic tier organization and grid-based component placement, producing color-coded layers for user, application, data, and infrastructure tiers.

What is the best way to create multi-tier application design diagrams that render reliably in Markdown viewers?▼

Creating multi-tier application design diagrams using direct embedded HTML without code fences ensures reliable rendering in Markdown viewers, applying consistent color-coded tiers and grid-based layout for clear visual semantics.

Can I draw data flow and dependency relationships in HTML CSS architecture diagrams?▼

Yes, you can draw data flow and dependency relationships in HTML CSS architecture diagrams by using an SVG overlay requirement, which enables orthogonal connector drawing across grid-based component boxes.

Does this approach support different layout patterns and style themes for documentation needs?▼

Yes, this approach supports multiple layout patterns including banner, dashboards, sidebars, and pipelines, alongside style themes such as steel-blue, neon-dark, and frost-clean for different documentation needs and audiences.

Why do my HTML architecture diagrams not render correctly in Markdown viewers?▼

HTML architecture diagrams fail to render correctly in Markdown viewers when wrapped in HTML code fences; applying strict HTML embedding rules without code fences ensures the output renders reliably across Markdown viewers.

Related Skills

Explore More Design & Creative Skills→
aryanshrai03aryanshrai03

architecture

Generate layered system architecture diagrams as embedded HTML in Markdown.

Community
Intermediate
sukeun1997sukeun1997

arch-diagram

Generate interactive five-perspective architecture diagrams with Mermaid runtime flows and custom HTML/CSS.

Community
Advanced
guoliang1114-boopguoliang1114-boop
43

architecture

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

Community
Basic
cameronraysmithcameronraysmith
14

preferences-architecture-diagramming

Create architecture diagrams using C4 zoom hierarchy and Richards/Ford conventions.

Community
Advanced