skills.rest
GGPrompts
GGPromptsCOMMUNITY
Explore all skills by this author →
GitHub

architecture

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
One-click install
npx skills add https://github.com/GGPrompts/ggprompts --skill architecture-ggprompts
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dha201dha201

architecture-documentation

Generate technical architecture documentation with C4 diagrams from codebases.

Community
Advanced
isaac-scarrottisaac-scarrott

understand-codebase-architecture

Generate an interactive HTML architecture map from a model.json file.

Community
Advanced
snake-dev-teamsnake-dev-team

ck:mermaidjs-v11

Create and render diagrams using Mermaid.js v11 syntax.

Official
Intermediate
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate