# Architecture > Create layered architecture diagrams using HTML/CSS templates with color-coded layers and grid layouts. Best for visualizing system layers (User→Application→Data→Infrastructure), microservices architecture, and enterprise application design. NOT for pixel-perfect custom diagrams (use drawio), simple flowcharts (use mermaid), or data visualization (use vega). - Skill: `ulpi-io/architecture` (Agent Skill) - Install (CLI): `npx skillmds@latest add ulpi-io/architecture` - Raw SKILL.md: https://api.skillmd.com/api/skills/ulpi-io/architecture/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: ulpi-io (https://skillmd.com/u/ulpi-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/ulpi-io/architecture --- # Architecture Diagram Generator **Quick Start:** Create HTML structure with flexible layout (single/double/triple column) → Define CSS styles for layers and grids → Add content with categorized panels → Use semantic colors for different layers. ## Critical Rules ### Rule 1: Direct HTML Embedding **IMPORTANT**: Write architecture diagrams as direct HTML in Markdown. **NEVER** use code blocks (` ```html `). The HTML should be embedded directly in the document without any fencing. ### Rule 2: No Empty Lines in HTML Structure **CRITICAL**: Do NOT add any empty lines within the HTML architecture diagram structure. Keep the entire HTML block continuous to prevent parsing errors. ### Rule 3: Incremental Creation Approach **RECOMMENDED**: Create architecture diagrams in multiple steps: 1. **First**: Create the overall framework (wrapper, sidebars, main structure) and define all CSS styles 2. **Second**: Add layer containers with titles 3. **Third**: Fill in components layer by layer 4. **Fourth**: Add detailed content and refinements ### Rule 4: Flexible Layout Structure Architecture diagrams can use flexible layouts based on complexity: - **Single Column**: Main content only (for simple architectures) - **Two Column**: Main content + one sidebar (left or right) - **Three Column**: Full layout with both sidebars (for complex systems) - **Left Sidebar**: Supporting systems (monitoring, operations, analytics) - **Main Content**: Core architecture layers (user, application, data, infrastructure) - **Right Sidebar**: Cross-cutting concerns (security, compliance, governance) ### Rule 5: Layer-Based Organization Each layer should have: - Clear semantic meaning (User, Application, AI/Logic, Data, Infrastructure) - Consistent color coding - Grid-based layout for components - Appropriate nesting for sub-components ### Rule 6: Color Semantics Use consistent colors for layer types: - **User Layer**: Blue gradient (`#dbeafe` to `#bfdbfe`) - **Application Layer**: Yellow/Orange gradient (`#fef3c7` to `#fde68a`) - **AI/Logic Layer**: Green gradient (`#dcfce7` to `#bbf7d0`) - **Data Layer**: Pink gradient (`#fce7f3` to `#fbcfe8`) - **Infrastructure Layer**: Purple gradient (`#e0e7ff` to `#c7d2fe`) - **External Services**: Gray gradient (`#f1f5f9` to `#e2e8f0`) with dashed border ## Basic Architecture Template **USAGE NOTE**: Copy the HTML below directly into your Markdown document. Do NOT wrap it in code blocks. Remove all empty lines to keep it continuous.
System Architecture Overview
📊 Monitoring
Application Metrics
Performance Tracking
Health Checks
Alert Management
📈 Analytics
User Behavior
Business KPIs
Technical Metrics
Custom Reports
🔄 Operations
CI/CD Pipeline
Deployment
Configuration
Maintenance
User Interface Layer
Web App
React/Vue
Mobile App
React Native
Desktop App
Electron
API Client
REST/GraphQL
Application Services Layer
Business Logic
Core Services
API Gateway
Routing & Auth
Background Jobs
Queue Processing
Intelligence Layer
ML Models
Inference Engine
Rule Engine
Business Rules
Data Layer
Primary DB
PostgreSQL
Cache
Redis
Search
Elasticsearch
File Storage
S3/MinIO
Infrastructure Layer
Container
Docker/K8s
Load Balancer
Nginx
Message Queue
RabbitMQ
Logging
ELK Stack
CDN
CloudFlare
External Services
Third-party APIs
Payment/Auth
Cloud Services
AWS/Azure
SaaS Tools
Analytics
Integrations
Webhooks
🔐 Security
Authentication
Authorization
Data Encryption
Network Security
📋 Compliance
Audit Logging
Data Privacy
Regulatory
Standards
💾 Backup
Data Backup
Disaster Recovery
High Availability
Failover
``` ## Advanced Features **NOTE**: These advanced components require additional CSS styles. Add these to your `