Architecture
Generate consistent HTML architecture diagrams (banner + centered layers) for READMEs, specs, and markdown viewers.
Install
npx skills add https://github.com/markdown-viewer/skills --skill architectureWhat is this skill?
- Banner + center layout for gateway-centric and user-facing system diagrams
- Reusable arch-grid variants from 2 through 6 columns
- Scoped CSS classes: arch-banner, arch-layer, arch-box with highlight styling
- 1200px fixed-width template suited to markdown/HTML architecture pages
- Uppercase layer titles and centered hierarchy for stakeholder-readable diagrams
Adoption & trust: 2.5k installs on skills.sh; 2.9k GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
Recommended Skills
Lark Doclarksuite/cli
Lark Wikilarksuite/cli
Opensource Guide Coachxixu-me/skills
Readme I18nxixu-me/skills
Doc Coauthoringanthropics/skills
Obsidian Markdownkepano/obsidian-skills
Journey fit
Primary fit
Visual system architecture docs are most often produced while building, but the same templates support validate and ship communication—canonical shelf is Build docs. The skill outputs documentation markup and layout patterns, not runtime code—docs subphase is the primary fit.
Common Questions / FAQ
Is Architecture safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.
SKILL.md
READMESKILL.md - Architecture
# Banner + Center Layout **Layout**: Full-width banner top/bottom + centered main layers **Best for**: Gateway-centric architectures, user-facing systems with shared infrastructure ## Template <div style="width: 1200px; box-sizing: border-box; position: relative;"> <style scoped> .arch-title { text-align: center; font-size: 20px; font-weight: 600; color: #333; margin-bottom: 16px; } .arch-banner { padding: 14px; border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; margin-bottom: 10px; } .arch-banner-title { font-size: 12px; font-weight: 600; color: #555; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .arch-center { } .arch-layer { margin: 8px 0; padding: 14px; border-radius: 4px; border: 1px solid #ccc; background: #fafafa; }.arch-layer-title { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 10px; text-align: center; text-transform: uppercase; letter-spacing: 0.5px; } .arch-grid { display: grid; gap: 6px; }.arch-grid-2 { grid-template-columns: repeat(2, 1fr); }.arch-grid-3 { grid-template-columns: repeat(3, 1fr); }.arch-grid-4 { grid-template-columns: repeat(4, 1fr); }.arch-grid-5 { grid-template-columns: repeat(5, 1fr); }.arch-grid-6 { grid-template-columns: repeat(6, 1fr); } .arch-box { border-radius: 3px; padding: 8px; text-align: center; font-size: 11px; font-weight: 500; line-height: 1.35; color: #333; background: #fff; border: 1px solid #ddd; }.arch-box.highlight { border: 2px solid #999; font-weight: 600; } </style> <div class="arch-title">API Platform Architecture</div> <div class="arch-banner"> <div class="arch-banner-title">Entry Points & Gateway</div> <div class="arch-grid arch-grid-6"><div class="arch-box">Web Client</div><div class="arch-box">Mobile SDK</div><div class="arch-box">Partner API</div><div class="arch-box highlight">API Gateway</div><div class="arch-box">Webhook Ingest</div><div class="arch-box">gRPC Endpoint</div></div> </div> <div class="arch-center"> <div class="arch-layer"> <div class="arch-layer-title">Auth & Identity</div> <div class="arch-grid arch-grid-4"><div class="arch-box">OAuth2 / OIDC</div><div class="arch-box">API Key Mgmt</div><div class="arch-box">RBAC</div><div class="arch-box">Session Store</div></div> </div> <div class="arch-layer"> <div class="arch-layer-title">Core Business Services</div> <div class="arch-grid arch-grid-5"><div class="arch-box">User Service</div><div class="arch-box">Product Service</div><div class="arch-box">Order Service</div><div class="arch-box">Payment Service</div><div class="arch-box">Notification</div></div> </div> <div class="arch-layer"> <div class="arch-layer-title">Data & Storage</div> <div class="arch-grid arch-grid-4"><div class="arch-box">Primary DB</div><div class="arch-box">Read Replicas</div><div class="arch-box">Cache Layer</div><div class="arch-box">Object Storage</div></div> </div> </div> <div class="arch-banner" style="margin-top: 10px;"> <div class="arch-banner-title">Shared Platform Services</div> <div class="arch-grid arch-grid-6"><div class="arch-box">Container Runtime</div><div class="arch-box">Service Mesh</div><div class="arch-box">CI/CD</div><div class="arch-box">Monitoring</div><div class="arch-box">Log Aggregation</div><div class="arch-box">Secret Mgmt</div></div> </div> </div> # Connectors Layout **Layout**: SVG overlay for drawing orthogonal (right-angle) lines/arrows between components **Best for**: Showing data flow, dependencies, API calls, or any relationship between architecture components ## How It Works Use an absolutely-positioned SVG element overlaid on the diagram container. Components get `id` attributes, and SVG `<path>` elements with orthogonal segments (horizontal + vertical only) connect them visually. **Key principle**: The outer container must have `position: relative`, and the SVG overlay uses `position: absolute