skills.rest
markdown-viewer
markdown-viewerOFFICIAL
Explore all skills by this author →
GitHub

architecture

Generate layered HTML/CSS system architecture diagrams with SVG orthogonal connectors.

3.1k|179|Updated Jan 31, 2026
Search Tags:#architecture#templates#html#css#svg#diagram#system-design
One-click install
npx skills add https://github.com/markdown-viewer/skills --skill architecture-markdown-viewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/markdown-viewer/skills/tree/main/architecture
Command: npx skills add https://github.com/markdown-viewer/skills --skill architecture-markdown-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating consistent, presentation-quality system architecture diagrams inside Markdown is time-consuming and error-prone when authors must handcraft HTML/CSS, enforce layout rules, and maintain visual semantics across layers. This Skill provides copy-ready HTML/CSS templates, layout patterns, and rules so diagrams render reliably in Markdown without external rendering engines.

Core Features & Use Cases

  • Direct HTML/CSS Templates: Multiple visual styles and ready-made layout templates (single/two/three-column, pipeline, hub-and-spoke, nested containers).
  • Layered Semantics & Grids: Semantic layer classes (user, application, ai, data, infra, external) with grid helpers for consistent component placement.
  • SVG Orthogonal Connectors: SVG overlay patterns and marker defs for strictly orthogonal connectors and labeled data flows.
  • Authoring Rules & Best Practices: Critical rules (embed HTML directly in Markdown, no empty lines inside structure, incremental build approach) to avoid parsing issues.
  • Use Cases: Microservice topology diagrams, enterprise architecture overviews, CI/CD or data pipeline flows, service catalogs, and presentation-ready documentation for design reviews.

Quick Start

Create a three-column HTML architecture diagram showing User, Application, and Data layers using the steel-blue style and include orthogonal SVG connectors to indicate data flows.

Frequently Asked Questions about architecture

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

FAQPage Schema
How do I create system architecture diagrams in Markdown without external rendering engines?▼

You can create system architecture diagrams by embedding HTML and CSS directly in Markdown, using layered semantic classes and grid helpers to visualize tiers and components reliably without external rendering engines.

What is the best way to visualize a microservices topology in HTML?▼

The best way to visualize a microservices topology is using layered HTML/CSS templates with grid-based component placement and optional SVG overlays for strictly orthogonal connectors to map data flows clearly.

How do I add orthogonal connectors to an HTML system design diagram?▼

You add orthogonal connectors to an HTML system design diagram by using SVG overlay patterns and marker definitions, ensuring data flows are drawn with strictly orthogonal lines across the visualized layers.

Why does my HTML architecture diagram break when rendered in Markdown?▼

Your HTML architecture diagram breaks in Markdown if there are empty lines inside the HTML structure or if you wrap the HTML in code fences; direct embedding without empty lines is required for correct parsing.

Can I use CSS grid layouts for multi-tier application design diagrams?▼

Yes, you can use CSS grid layouts for multi-tier application design diagrams, applying semantic layer classes like user, application, and data to ensure consistent component placement and presentation-ready visual output.

Does this approach support hub-and-spoke and pipeline visual styles for technology stacks?▼

Yes, this approach supports hub-and-spoke, pipeline, nested containers, and single/two/three-column visual styles, providing ready-made layout templates for documenting complex technology stacks and enterprise architecture.

Related Skills

Explore More Software Engineering Skills→
guoliang1114-boopguoliang1114-boop
43

architecture

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

Community
Basic
BermudaLocalsBermudaLocals
1

architecture-diagram

Generate standalone HTML diagrams of software architecture as inline SVG visuals.

Community
Advanced
XCmiaowXCmiaow

architecture

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

Community
Intermediate
wukangcheng2944wukangcheng2944

architecture-diagram

Generate architecture diagrams as self-contained HTML files with inline SVG.

Community
Advanced