Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
markdown-viewer avatar

Architecture

markdown-viewer/skills

  • 3.4k installs
  • 3.1k repo stars
  • Updated May 26, 2026
  • markdown-viewer/skills

architecture is a Markdown Viewer skill for layered HTML/CSS system architecture diagrams with semantic tiers, layouts, and SVG connectors.

About

Architecture Diagram Generator produces layered system architecture visuals as direct HTML embedded in Markdown, powered by Markdown Viewer rendering. Critical rules forbid html code fences and empty lines inside the diagram block to prevent parse errors. Layouts span single column stacks, two-column sidebars, and three-column designs with left operations monitoring, central application layers, and right security governance panels. Twelve style palettes such as Steel Blue, Neon Dark, and Sage Forest pair with twelve layout patterns including pipeline, dashboard, nested containers, and connector overlays. Layers use semantic classes for user, application, AI logic, data, infrastructure, and external services with grid-based arch-box components. Incremental creation builds wrapper CSS first, adds layer containers, fills components, then highlights and SVG orthogonal connectors using path M/L segments only. Advanced features cover product groups, subgroups, user tags, KPI metrics, and dashed external service borders. Reference files under styles/ and layouts/ provide copy-ready templates. Best practices emphasize logical tier separation, consistent naming, highlight classes for criti.

  • Embeds architecture diagrams as raw HTML in Markdown without html code block fences.
  • Flexible single, two, or three-column layouts with semantic layer color coding.
  • Twelve visual styles and twelve structural layouts including pipeline and nested containers.
  • SVG connector overlay uses orthogonal path segments only, never diagonal lines.
  • Incremental four-step build: framework CSS, layer shells, components, then highlights.

Architecture by the numbers

  • 3,403 all-time installs (skills.sh)
  • +68 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #107 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

architecture capabilities & compatibility

Capabilities
direct html embedding with arch wrapper, arch la · twelve style palettes and twelve layout template · semantic layer coloring for user, application, a · advanced product groups, subgroups, kpi metrics, · svg overlay connectors with dashed external serv
Works with
chrome
Use cases
documentation · ui design · frontend
IDEs
vscode
From the docs

What architecture says it does

Do NOT add any empty lines within the HTML architecture diagram structure
SKILL.md
npx skills add https://github.com/markdown-viewer/skills --skill architecture

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3.4k
repo stars★ 3.1k
Security audit3 / 3 scanners passed
Last updatedMay 26, 2026
Repositorymarkdown-viewer/skills ↗

How do I document multi-tier system architecture in Markdown with color-coded layers, sidebars, and connector lines that render correctly?

Create layered system architecture diagrams as embedded HTML/CSS in Markdown with semantic color tiers, flexible layouts, and SVG connectors.

Who is it for?

Technical writers and engineers documenting technology stacks, microservices topology, or multi-tier application design in Markdown Viewer.

Skip if: Skip when PlantUML class diagrams suffice or the target renderer cannot embed raw HTML architecture blocks.

When should I use this skill?

User wants system architecture diagrams, layered HTML diagrams in markdown, technology stack visuals, or microservices topology docs.

What you get

Embedded HTML architecture diagram with semantic layers, chosen style palette, appropriate column layout, and optional SVG data-flow connectors.

  • layered architecture HTML diagram block
  • style and layout reference selections

By the numbers

  • Template width set to 1200px with banner plus center layout pattern

Files

SKILL.mdMarkdownGitHub ↗

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 semantic meaning for layers — the exact color palette varies by style (see examples). The standard semantic mapping:

  • User Layer — user-facing interfaces and clients
  • Application Layer — business logic and API services
  • AI/Logic Layer — intelligence, rules, processing engines
  • Data Layer — databases, caches, storage
  • Infrastructure Layer — containers, networking, DevOps
  • External Services — third-party APIs, cloud services (typically dashed border)

Style Examples

Choose a visual style that matches your project's tone and audience. Each example contains a complete, copy-ready HTML template.

#StyleFileSuitable For
1Steel Bluestyles/steel-blue.mdConsulting reports, banking/finance, government projects, RFP proposals
2Ember Warmstyles/ember-warm.mdRetail/e-commerce, education platforms, lifestyle brands, cultural institutions
3Neon Darkstyles/neon-dark.mdTech talks, developer conferences, gaming platforms, cybersecurity dashboards
4Stark Blockstyles/stark-block.mdCreative studios, education platforms, indie developers, tech blogs
5Ocean Tealstyles/ocean-teal.mdTravel platforms, logistics/shipping, green tech, weather/ocean projects
6Dusk Glowstyles/dusk-glow.mdSocial media, entertainment platforms, martech, content creation tools
7Rose Bloomstyles/rose-bloom.mdFashion/beauty, luxury brands, wedding platforms, premium memberships
8Sage Foreststyles/sage-forest.mdHealthcare, agritech, clean energy, sustainability, bioinformatics
9Frost Cleanstyles/frost-clean.mdDesign tools, developer docs, API references, minimalist SaaS
10Indigo Deepstyles/indigo-deep.mdBrand-consistent systems, enterprise white papers, internal platforms
11Pastel Mixstyles/pastel-mix.mdSaaS products, startups, general tech architecture, product docs
12Slate Darkstyles/slate-dark.mdEnterprise dark mode, internal tools, developer dashboards

Layout Examples

Choose a layout structure that fits your architecture's complexity. Layouts use wireframe style (no colors) to focus on structural patterns. Combine any layout with any style above.

#LayoutFileBest For
1Three-Columnlayouts/three-column.mdComplex systems with cross-cutting concerns and monitoring sidebars
2Single Stacklayouts/single-stack.mdSimple services, microservice detail views, focused documentation
3Left Sidebarlayouts/left-sidebar.mdSystems with operations/monitoring emphasis, DevOps-centric views
4Right Sidebarlayouts/right-sidebar.mdSystems with security/compliance emphasis, governance-focused views
5Pipelinelayouts/pipeline.mdData pipelines, CI/CD flows, ETL processes, horizontal stage-based flows
6Two-Column Splitlayouts/two-column-split.mdBefore/after comparisons, dual-system views, migration architecture
7Dashboardlayouts/dashboard.mdSystem overviews with KPIs, monitoring dashboards, executive summaries
8Grid Cataloglayouts/grid-catalog.mdService catalogs, component libraries, equal-weight microservices
9Banner + Centerlayouts/banner-center.mdGateway-centric architectures, user-facing systems with shared infrastructure
10Nested Containerslayouts/nested-containers.mdCloud deployments, VPC/network topology, environment isolation
11Layer Layoutslayouts/layer-layouts.mdPer-layer layout patterns: grid, sub-group, product group, KPI, vertical stack, zones, inline pipeline, mixed width
12Connectorslayouts/connectors.mdSVG overlay connectors between components: solid/dashed lines, arrows, labels, curved & orthogonal paths

Advanced Features

NOTE: These advanced components require additional CSS styles. Add these to your <style scoped> section:

.arch-product-group { display: flex; gap: 10px; }
.arch-product { flex: 1; border-radius: 8px; padding: 10px; background: rgba(255, 255, 255, 0.6); border: 1px dashed #d97706; }
.arch-product-title { font-size: 12px; font-weight: bold; color: #92400e; margin-bottom: 8px; text-align: center; }
.arch-subgroup { display: flex; gap: 8px; margin-top: 8px; }
.arch-subgroup-box { flex: 1; border-radius: 6px; padding: 8px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.08); }
.arch-subgroup-title { font-size: 10px; font-weight: bold; color: #374151; text-align: center; margin-bottom: 6px; }
.arch-user-types { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.arch-user-tag { font-size: 9px; padding: 2px 6px; border-radius: 10px; background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
/* SVG connector lines between components */
.arch-conn { stroke: #94a3b8; stroke-width: 1.5; fill: none; }
.arch-conn-dashed { stroke: #94a3b8; stroke-width: 1.5; fill: none; stroke-dasharray: 6 4; }
.arch-conn-label { font-size: 9px; fill: #64748b; font-family: sans-serif; }

Custom Product Groups

For complex applications with multiple products/modules:

<div class="arch-product-group">
  <div class="arch-product">
    <div class="arch-product-title">🎯 Product A</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 1<br><small>Description</small></div>
      <div class="arch-box highlight">Feature 2<br><small>Key Feature</small></div>
    </div>
  </div>
  <div class="arch-product">
    <div class="arch-product-title">📊 Product B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box">Feature 3<br><small>Description</small></div>
      <div class="arch-box">Feature 4<br><small>Description</small></div>
    </div>
  </div>
</div>

Sub-grouped Components

For detailed breakdowns within layers:

<div class="arch-subgroup">
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group A</div>
    <div class="arch-grid arch-grid-3">
      <div class="arch-box tech">Service 1<br><small>Details</small></div>
      <div class="arch-box tech">Service 2<br><small>Details</small></div>
      <div class="arch-box tech">Service 3<br><small>Details</small></div>
    </div>
  </div>
  <div class="arch-subgroup-box">
    <div class="arch-subgroup-title">Component Group B</div>
    <div class="arch-grid arch-grid-2">
      <div class="arch-box tech">Service 4<br><small>Details</small></div>
      <div class="arch-box tech">Service 5<br><small>Details</small></div>
    </div>
  </div>
</div>

User Types/Tags

<div class="arch-user-types">
  <span class="arch-user-tag">Admin Users</span>
  <span class="arch-user-tag">End Users</span>
  <span class="arch-user-tag">API Clients</span>
  <span class="arch-user-tag">Partners</span>
</div>

Metrics and KPIs

<div class="arch-sidebar-item metric">99.9% Uptime</div>
<div class="arch-sidebar-item metric">&lt;200ms Response</div>
<div class="arch-sidebar-item metric">1M+ Users</div>

SVG Connectors Between Components

Use an SVG overlay to draw orthogonal (right-angle) connectors between components. Always use `<path>` with `M`/`L` commands for strictly horizontal and vertical segments. Do NOT use `<line>`, Bézier curves, or diagonal lines. See layouts/connectors.md for full reference.

<!-- Wrap diagram content in a relative container -->
<div style="position: relative;">
  <!-- ...layers and components here... -->
  <!-- SVG overlay as last child -->
  <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;">
    <defs>
      <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
        <path d="M0,0 L8,3 L0,6" fill="none" stroke="#94a3b8" stroke-width="1"/>
      </marker>
    </defs>
    <!-- Orthogonal solid arrow (vertical → horizontal → vertical) -->
    <path d="M 200,72 L 200,90 L 400,90 L 400,108" class="arch-conn" marker-end="url(#arrowhead)"/>
    <!-- Orthogonal dashed line -->
    <path d="M 600,72 L 600,90 L 600,90 L 600,108" class="arch-conn-dashed" marker-end="url(#arrowhead)"/>
    <!-- Label -->
    <text x="420" y="86" class="arch-conn-label">data flow</text>
  </svg>
</div>

Styling Reference

Common Classes (shared across all styles)

  • .arch-wrapper — flex container for sidebar + main layout
  • .arch-sidebar — fixed-width sidebar column
  • .arch-main — flexible main content area
  • .arch-layer — layer container (add semantic class: .user, .application, .ai, .data, .infra, .external)
  • .arch-box — component box; .arch-box.highlight for key items; .arch-box.tech for smaller tech items
  • .arch-grid-2 to .arch-grid-6 — grid column layouts
  • .arch-sidebar-panel — sidebar panel container
  • .arch-sidebar-item — sidebar item; .arch-sidebar-item.metric for highlighted metrics

Best Practices

HTML Usage Guidelines

1. Direct embedding only — Always embed HTML directly in Markdown, never use `html code blocks 2. No empty lines in structure — Keep the entire HTML block continuous without any empty lines 3. Incremental development — Build diagrams step by step:

  • Start with basic framework and layout structure (single/two/three column as needed)
  • Add empty layer containers with proper CSS classes
  • Fill in content layer by layer from top to bottom
  • Refine content and add highlights last

Architecture Design

1. Keep layers logically separated — Each layer should represent a clear architectural tier 2. Use consistent naming — Follow naming conventions for components and services 3. Highlight key components — Use .highlight class for critical components 4. Add technical details — Include technology stack info in <small> tags 5. Balance information density — Don't overcrowd components with text 6. Use icons sparingly — Add emojis to titles for visual hierarchy 7. Maintain color semantics — Stick to the established color meanings 8. Consider responsive design — Grids automatically adapt to content

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

How it compares

Use architecture for styled HTML banner diagrams in docs; use C4 or Mermaid generators when you need model-driven diagrams from code structure.

FAQ

Can architecture HTML use fenced code blocks?

No. Write HTML directly in Markdown without html fences; code blocks prevent proper diagram rendering.

How should connectors between components be drawn?

Use SVG path M and L commands for orthogonal horizontal and vertical segments; do not use line elements or diagonal curves.

What is the recommended build order?

Create wrapper and CSS first, add empty layer containers, fill components layer by layer, then add highlights and connectors last.

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.

Design & UI/UXuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.