# Create Architecture Diagrams

Technical teams need clear diagrams that show systems, boundaries, and data flow. This skill helps Claude, Codex, and Claude Code produce self-contained HTML diagrams with inline SVG and consistent styling.

## Install

```bash
npx skillstore add cocoon-ai/architecture-diagram
```

## Metadata

- - Slug: cocoon-ai-architecture-diagram
- - Version: 1.0.0
- - Author: Cocoon-AI
- - GitHub username: Cocoon-AI
- - License: MIT
- - Repository: https://github.com/Cocoon-AI/architecture-diagram-generator/tree/main/architecture-diagram/
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: network
- - Quality score: 73
- - Public page: https://skillstore.pages.dev/skills/cocoon-ai-architecture-diagram
- - Manifest: https://skillstore.pages.dev/api/skills/cocoon-ai-architecture-diagram/manifest

## Capabilities

- Generates standalone HTML files with embedded CSS and inline SVG diagrams.
- Provides a dark visual system for frontend, backend, database, cloud, security, and messaging components.
- Defines reusable SVG patterns for component boxes, arrows, security groups, regions, legends, and info cards.
- Guides spacing, z-order, and legend placement to reduce diagram overlap.
- Supports architecture, infrastructure, cloud, security, and network topology diagrams.

## Use Cases

- Document a Product Architecture: Create a concise diagram for services, storage, clients, and integration points in a product design document.
- Explain Cloud Infrastructure: Show cloud regions, service boundaries, load balancers, databases, and network paths for deployment planning.
- Review Security Boundaries: Map authentication flows, security groups, protected resources, and trust boundaries before an implementation review.

## Prompt Templates

### Basic Service Diagram

```
Create a standalone HTML architecture diagram for a web app with users, a React frontend, an API service, and PostgreSQL. Use the architecture-diagram skill style.
```

### Cloud Deployment Diagram

```
Create a dark-themed HTML and SVG diagram for an AWS deployment with CloudFront, S3, an application load balancer, two backend services, RDS, and an external auth provider.
```

### Security Flow Diagram

```
Create an architecture diagram that highlights OAuth login, JWT validation, private service traffic, database access, and security group boundaries. Include a legend and three summary cards.
```

### Production System Diagram

```
Generate a self-contained HTML architecture diagram for a multi-region SaaS platform. Include clients, CDN, API tier, event bus, workers, storage, monitoring, trust boundaries, and labeled data flows.
```

## Limitations

- The template loads Google Fonts unless the user removes or localizes that dependency.
- The skill does not discover infrastructure automatically from cloud accounts or repositories.
- Complex diagrams still require user-provided system details and review for accuracy.
- The output is static HTML and SVG, not an interactive modeling tool.

## Best Practices

- Provide the component list, deployment environment, and main data flows before asking for the diagram.
- Ask for trust boundaries, protocols, and ports when the diagram will support security review.
- Review the generated labels and positions before sharing the HTML with stakeholders.

## Anti Patterns

- Do not use the skill as a source of truth for infrastructure inventory.
- Do not include secrets, private keys, tokens, or customer data in diagram labels.
- Do not publish the default Google Fonts dependency in restricted environments without approval.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T23:19:25.179\+00:00
- - Summary: Static analysis reported network access, command execution, weak cryptography, and reconnaissance patterns. Review found the command execution, weak cryptography, and reconnaissance alerts are false positives from markdown backticks, CSS/SVG examples, and placeholder text; the only confirmed issue is a Google Fonts dependency in the template.

## Stats

- - Views: 324
- - Downloads: 28
- - Favorites: 1
- - Popularity score: 0