architecture-diagrams

Name: architecture-diagrams
Availability: InStock
Author: caufieldz

Organize multi-system designs into a single HTML document with tabbed architecture diagrams.

4|Updated Apr 8, 2026

Search Tags:#design #architecture #templates #documentation #html #diagrams #css-grid

Ready to run

npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill architecture-diagrams-caufieldz

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture-diagrams
Source: https://github.com/CaufieldZ/pm-workspace-public/tree/main/.claude/skills/architecture-diagrams
Command: npx skills add https://github.com/CaufieldZ/pm-workspace-public --skill architecture-diagrams-caufieldz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

When architectural needs involve multi-system interactions, this skill helps produce clear, tabbed architecture diagrams in a single HTML document for reviews, planning, and risk analysis.

Core Features & Use Cases

Single-file HTML diagrams with CSS-grid layout and inlined templates.
Multi-tab navigation to present overview, accounts/flows, roadmaps, risks, and decisions.
Reusable skeletons for design reviews and technical assessments.

Quick Start

Populate arch-diagrams HTML with the provided templates and fill in the required tab content, then open the file in a browser to verify the layout.

Frequently Asked Questions about architecture-diagrams

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

FAQPage Schema

How do I generate architecture diagrams as a single HTML document?▼

You can generate architecture diagrams as a single HTML document by using a JS template that organizes multi-system designs into a self-contained file with a CSS-grid layout for clear presentation.

What is the best way to document multi-system interactions for design reviews?▼

Documenting multi-system interactions is best handled by creating tabbed HTML diagrams that separate concerns into Overview, Accounts/Flows, and Roadmap views for technical assessments.

Can I present system risks and roadmaps in one HTML file with multiple tabs?▼

Yes, you can present system risks and roadmaps in one HTML file using multi-tab navigation to display overview, accounts/flows, roadmaps, risks, and decisions within a single document.

How to create a self-contained HTML artifact with a CSS-grid layout for architecture?▼

Create a self-contained HTML artifact by populating an HTML template with inlined scripts and using a CSS-grid layout to render architecture diagrams without external dependencies.

Does the architecture diagram template support roadmapping and risk analysis?▼

Yes, the architecture diagram template supports roadmapping and risk analysis by providing reusable skeletons with specific tabs for visualizing risks, decisions, and roadmap milestones.

Do I need external libraries to render multi-tab architecture diagrams in a browser?▼

No, you do not need external libraries to render multi-tab architecture diagrams; the skill generates a self-contained HTML file with inlined templates and CSS-grid layout that opens directly in a browser.