Architecture Diagram Creator Skill for Claude
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/mhattingpete/claude-skills-marketplace --skill architecture-diagram-creatorThe instruction itself
6 sections, as written by the authorArchitecture Diagram Creator
Create comprehensive HTML architecture diagrams with data flows, business context, and system architecture.
When to Use
- "Create architecture diagram for [project]"
- "Generate high-level overview"
- "Document system architecture"
- "Show data flow and processing pipeline"
Components to Include
- Business Context: objectives, users, value, metrics
- Data Flow: sources → processing → outputs with SVG diagram
- Processing Pipeline: multi-stage visualization
- System Architecture: layered components (data/processing/services/output)
- Features: functional and non-functional requirements
- Deployment: model, prerequisites, workflows
HTML Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Project] Architecture</title>
<style>
body { font-family: system-ui; max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; }
.section { margin: 30px 0; }
svg { max-width: 100%; }
/* Use semantic colors: #4299e1 (data), #ed8936 (processing), #9f7aea (AI), #48bb78 (success) */
</style>
</head>
<body>
<h1>[Project Name] - Architecture Overview</h1>
<!-- Business Context Section -->
<!-- Data Flow Diagram (SVG) -->
<!-- Processing Pipeline (SVG) -->
<!-- System Architecture Layers -->
<!-- Features Grid -->
<!-- Deployment Info -->
</body>
</html>
SVG Pattern for Data Flow
<svg viewBox="0 0 800 400">
<!-- Data sources (left, blue) -->
<rect x="50" y="150" width="120" height="80" fill="#4299e1"/>
<!-- Processing (center, orange) -->
<rect x="340" y="150" width="120" height="80" fill="#ed8936"/>
<!-- Outputs (right, green) -->
<rect x="630" y="150" width="120" height="80" fill="#48bb78"/>
<!-- Arrows connecting -->
<path d="M170,190 L340,190" stroke="#666" stroke-width="2" marker-end="url(#arrow)"/>
</svg>
Workflow
- Analyze project (README, code structure)
- Extract: purpose, data sources, processing, tech stack, outputs
- Create HTML with all 6 sections
- Use semantic colors for visual hierarchy
- Write to
[project]-architecture.html
Keep diagrams clear, use consistent styling, include real project details.
Other skills for the same job
different authors, same section of the catalogue
Assess Kubernetes workloads and cluster configuration for AKS Automatic compatibility. Identifies incompatibilities, generates fixes, and guides migration from AKS Standard to AKS Automatic. WHEN: migrate to AKS Automatic, check AKS Automatic readiness, validate manifests for Automatic, assess cluster for Automatic compatibility, fix deployment for Automatic compatibility, identify AKS Automatic migration blockers, is my cluster ready for AKS Automatic.
Discovers available Azure OpenAI model capacity across regions and projects. Analyzes quota limits, compares availability, and recommends optimal deployment locations based on capacity requirements. USE FOR: find capacity, check quota, where can I deploy, capacity discovery, best region for capacity, multi-project capacity search, quota analysis, model availability, region comparison, check TPM availability. DO NOT USE FOR: actual deployment (hand off to preset or customize after discovery), quota increase requests (direct user to Azure Portal), listing existing deployments.
Interactive guided deployment flow for Azure OpenAI models with full customization control. Step-by-step selection of model version, SKU (GlobalStandard/Standard/ProvisionedManaged), capacity, RAI policy (content filter), and advanced options (dynamic quota, priority processing, spillover). USE FOR: custom deployment, customize model deployment, choose version, select SKU, set capacity, configure content filter, RAI policy, deployment options, detailed deployment, advanced deployment, PTU deployment, provisioned throughput. DO NOT USE FOR: quick deployment to optimal region (use preset).
Unified Azure OpenAI model deployment skill with intelligent intent-based routing. Handles quick preset deployments, fully customized deployments (version/SKU/capacity/RAI policy), and capacity discovery across regions and projects. USE FOR: deploy model, deploy gpt, create deployment, model deployment, deploy openai model, set up model, provision model, find capacity, check model availability, where can I deploy, best region for model, capacity analysis. DO NOT USE FOR: listing existing deployments (use foundry_models_deployments_list MCP tool), deleting deployments, agent creation (use agent/create), project creation (use project/create).
Intelligently deploys Azure OpenAI models to optimal regions by analyzing capacity across all available regions. Automatically checks current region first and shows alternatives if needed. USE FOR: quick deployment, optimal region, best region, automatic region selection, fast setup, multi-region capacity check, high availability deployment, deploy to best location. DO NOT USE FOR: custom SKU selection (use customize), specific version selection (use customize), custom capacity configuration (use customize), PTU deployments (use customize).
This skill should be used when working with LaminDB, an open-source data framework for biology that makes data queryable, traceable, reproducible, and FAIR. Use when managing biological datasets (scRNA-seq, spatial, flow cytometry, etc.), tracking computational workflows, curating and validating data with biological ontologies, building data lakehouses, or ensuring data lineage and reproducibility in biological research. Covers data management, annotation, ontologies (genes, cell types, diseases, tissues), schema validation, integrations with workflow managers (Nextflow, Snakemake) and MLOps platforms (W&B, MLflow), and deployment strategies.
Latch platform for bioinformatics workflows. Build pipelines with Latch SDK, @workflow/@task decorators, deploy serverless workflows, LatchFile/LatchDir, Nextflow/Snakemake integration.
Run Python code in the cloud with serverless containers, GPUs, and autoscaling. Use when deploying ML models, running batch processing jobs, scheduling compute-intensive tasks, or serving APIs that require GPU acceleration or dynamic scaling.
How to use it
Take mhattingpete/architecture-diagram-creator from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.