skills.rest
thatrebeccarae
thatrebeccaraeCOMMUNITY
Explore all skills by this author →
Website𝕏@rebeccaraeGitHub

tech-diagram

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

97|18|Updated Feb 9, 2026
Search Tags:#architecture-diagrams#design-documentation#diagram-generator#inline-svg#standalone-html#embedded-css
One-click install
npx skills add https://github.com/thatrebeccarae/claude-marketing --skill tech-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tech-diagram
Source: https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/tech-diagram
Command: npx skills add https://github.com/thatrebeccarae/claude-marketing --skill tech-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables rapid creation of technical architecture diagrams and system illustrations as standalone HTML files, eliminating the need for external diagram tools for planning and documentation.

Core Features & Use Cases

  • Pipeline flow diagrams (data pipelines, CI/CD, ETL) with embedded visuals
  • Layer/stack diagrams (tech stack, infrastructure, and OSI-like models)
  • Component diagrams (microservices, services, APIs) with inline SVG icons
  • Before/After split comparisons for architecture decisions
  • Timeline diagrams for roadmaps and migration phases
  • Self-contained output suitable for sharing in docs and slides

Quick Start

Describe your diagram requirements in plain language and run the skill to produce a standalone HTML diagram.

Frequently Asked Questions about tech-diagram

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

FAQPage Schema
How do I generate an architecture diagram from plain text?▼

To generate an architecture diagram, you provide a plain language prompt describing your system, and the skill outputs a self-contained HTML file with embedded CSS and inline SVG visuals requiring no external dependencies.

Can I create a CI/CD pipeline flow diagram as a standalone HTML file?▼

Yes, you can create CI/CD pipeline flow diagrams. The output is a standalone HTML file with embedded CSS and inline SVG, making it suitable for sharing within design reviews, documentation, and slides.

What is the best way to document a tech stack diagram for design reviews?▼

The best way to document a tech stack is generating a layer or stack diagram as a standalone HTML file. This self-contained format with inline SVG ensures your architecture documentation is easily shared without external tool dependencies.

Does this diagram generator support before and after architecture comparisons?▼

Yes, the diagram generator supports before and after split comparisons for architecture decisions. It also produces timeline diagrams for migration phases and component maps for microservices using inline SVG icons.

Do I need external libraries to render the embedded SVG in my documentation?▼

No, you do not need external libraries. The skill delivers a self-contained HTML file with embedded CSS and inline SVG, requiring no external dependencies to render your architecture diagrams.

Related Skills

Explore More Design & Creative Skills→
AgentientAgentient
2

c4-model-architecture-diagrams

Generate C4 model diagrams for context, container, component, and code views.

Official
Intermediate
Strategic-AutomationStrategic-Automation
6

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML files with inline SVG.

Official
Intermediate
ChangZhou-xjChangZhou-xj

architecture-diagram

Generate standalone HTML files with inline SVG architecture diagrams.

Community
Intermediate
jiaxiaojunQAQjiaxiaojunQAQ
75

architecture-diagram-creator

Generate architecture diagrams from natural language prompts.

Community
Intermediate