# Architecture Diagram

Architecture and component diagrams as HTML/SVG (dark-themed)

- Repository: https://github.com/taracodlabs/aiden (868 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-10-19
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add taracodlabs/aiden --skill architecture-diagram -g -a claude-code -y`
Codex: `npx skills add taracodlabs/aiden --skill architecture-diagram -g -a codex -y`
Cursor: `npx skills add taracodlabs/aiden --skill architecture-diagram -g -a cursor -y`
Gemini CLI: `npx skills add taracodlabs/aiden --skill architecture-diagram -g -a gemini-cli -y`

## Description

Architecture and component diagrams as HTML/SVG (dark-themed)

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Architecture Diagram Generator

Create dark-themed, professional system architecture and component diagrams rendered as self-contained HTML+SVG files. No external tools needed, output opens in any browser.

## When to Use

- User wants a system architecture diagram
- User wants a component interaction diagram
- User wants a data flow or pipeline diagram
- User wants a network topology visualization
- User wants a diagram they can open in the browser and share

## How to Use

### 1. Plan the diagram layout

Before generating, outline:
```
- Components: what boxes/nodes exist?
- Relationships: which components talk to which? Direction?
- Groupings: are there logical layers (frontend, backend, data)?
- Key labels: service names, technologies, data formats
```

### 2. Generate a dark-themed HTML diagram (Python)

```python
import textwrap

def make_diagram(title, components, connections, output="diagram.html"):
  """
  components: list of { id, label, x, y, color }
  connections: list of { from_id, to_id, label }
  """
  box_w, box_h = 160, 50
  width  = max(c["x"] for c in components) + box_w + 80
  height = max(c["y"] for c in components) + box_h + 80

  def box(c):
    bg = c.get("color", "#1e3a5f")
    return f'''<rect x="{c['x']}" y="{c['y']}" width="{box_w}" height="{box_h}" rx="8"
      fill="{bg}" stroke="#4a9eff" stroke-width="1.5"/>
    <text x="{c['x']+box_w//2}" y="{c['y']+box_h//2+5}" text-anchor="middle"
      fill="#e0e8ff" font-family="monospace" font-size="13">{c['label']}</text>'''

The rest: https://github.com/taracodlabs/aiden/blob/HEAD/skills/architecture-diagram/SKILL.md