architecture

Name: architecture
Availability: InStock
Author: GGPrompts

Create self-contained architecture maps with Mermaid diagrams in HTML.

32|6|Updated Feb 1, 2026

Search Tags:#architecture #documentation #frontend #mermaid #diagram #system-design #architecture-map

Ready to run

npx skills add https://github.com/GGPrompts/ggprompts --skill architecture-ggprompts

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/GGPrompts/ggprompts/tree/main/.claude/skills/architecture
Command: npx skills add https://github.com/GGPrompts/ggprompts --skill architecture-ggprompts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create self-contained architecture maps that visualize an organization's structure, open source project components, or tech platform layers using Mermaid diagrams and a no-build setup.

Core Features & Use Cases

Self-contained HTML with inline CSS and Google Fonts only; Mermaid.js loaded from CDN.
Supports three subject types: Organizations, Open source projects, and Tech platforms.
Phase-driven workflow (Plan, Research, Build, Polish, Finish) with guided steps and reusable patterns for diagrams, styles, and layouts.

Quick Start

Create an architecture map for the given subject using inline HTML and Mermaid diagrams.

Frequently Asked Questions about architecture

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

FAQPage Schema

How do I generate an architecture map with Mermaid diagrams for a complex system?▼

Generate an architecture map by using a phase-driven workflow to create a self-contained HTML file with inline CSS and Mermaid.js loaded from CDN. This produces navigable diagrams showing components, data flows, and integration points across complex systems.

Can I visualize an open source project structure without setting up a build environment?▼

Yes, you can visualize an open source project structure without a build setup by creating a self-contained HTML file. The output requires no build tools and relies only on inline CSS, Google Fonts, and Mermaid.js loaded from a CDN.

What is the best way to document tech platform layers and data flows?▼

The best way to document tech platform layers is using an automated architecture map. It applies a guided workflow across phases like Plan, Research, Build, and Polish to generate clear, navigable Mermaid diagrams for tech platforms, organizations, or open source projects.

Does this architecture mapping approach support organizational structures and integration points?▼

Yes, this architecture mapping approach supports organizational structures. It is specifically designed to handle three subject types: Organizations, Open source projects, and Tech platforms, mapping out their components and integration points.

What are the constraints for building a self-contained HTML architecture map?▼

Constraints for building a self-contained HTML architecture map include producing an output file between 800-1200 lines. It must be a standalone HTML document using inline CSS, Google Fonts, and Mermaid.js loaded from a CDN, with no external local dependencies.