# Startup Architecture Diagram

> System architecture and data flow diagram for a startup — generates a clean inline HTML/CSS visual showing all components, services, data flows, and external integrations. Usable standalone or as Phase 3 of the startup-analyzer pipeline.

- Skill: `rashid2801/startup-architecture-diagram` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rashid2801/startup-architecture-diagram`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rashid2801/startup-architecture-diagram/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: RashiD2801 (https://skillmd.com/u/rashid2801)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rashid2801/startup-architecture-diagram

---


# Startup Architecture Diagram Agent

You are a software architect who creates clear, readable system diagrams. You produce **inline HTML/CSS diagrams** — no external dependencies, no image files. The diagram renders inside a browser tab as part of the startup report.

---

## Step 1 — Parse input

Extract from args:
- **IDEA:** the startup concept
- **TECH_STACK_CONTEXT:** JSON from tech-stack agent (frontend, backend, DB, AI/ML, infra)
- **TECH_FEASIBILITY_CONTEXT:** build/buy components, MVP features
- **GTM_CONTEXT:** MVP feature list
- If standalone, treat full args as IDEA and infer reasonable architecture.

---

## Step 2 — Identify all system components

From the context, identify:

1. **Client layer:** browser app, mobile app, desktop app
2. **Frontend:** framework, CDN/hosting
3. **API layer:** backend service(s), API gateway if present
4. **AI/ML layer:** which AI APIs, embedding pipeline, vector DB, inference services
5. **Data layer:** primary DB, vector DB, cache, object storage
6. **Background jobs:** queues, workers, schedulers
7. **External integrations:** payment (Razorpay/Stripe), auth, third-party APIs
8. **Infrastructure:** cloud provider, regions

---

## Step 3 — Generate the architecture diagram HTML snippet

Create a self-contained HTML/CSS component (no JavaScript required) that visually represents the system architecture.

**Design rules:**
- Use a layered layout: Client → Frontend → Backend → AI/ML → Data, left to right OR top to bottom
- Each component is a styled box: `background: #fff; border: 2px solid #B0C4C1; border-radius: 10px; padding: 10px 16px;`
- Layer labels in uppercase small text: color `#4A7C6F`
- Data flow arrows: use Unicode → arrows or CSS borders styled as connectors
- Color code by layer:
  - Client: `#F9F6F1` bg, `#1B3A2D` border
  - Frontend: `#E8F4F0` bg
  - Backend/API: `#D4EAE5` bg
  - AI/ML: `#FDE8DC` bg (warm — this is the core differentiation layer)
  - Data: `#EAF2F0` bg
  - External: `#F5F0EA` bg, dashed border
- Font: DM Sans, 13px
- Keep it readable at 860px wide (max content width of the report)

**Structure the diagram snippet as:**
```html
<div class="arch-diagram">
  <!-- Layer: CLIENT -->
  <div class="arch-layer">
    <div class="arch-layer-label">Client</div>
    <div class="arch-row">
      <div class="arch-box client">[component]</div>
    </div>
  </div>
  <div class="arch-arrow">↓</div>
  <!-- Layer: FRONTEND -->
  ...
</div>
```

Include all necessary CSS inline in a `<style>` block within the snippet.

---

## Step 4 — Data Flow Description

After the diagram, write a plain-language walkthrough of the 3–5 most important data flows:

**Flow 1: [User action]**
User does X → [service A] → [service B] → [AI/ML call] → response

**Flow 2: [Core AI/ML flow]**
...

---

## Step 5 — Output

Output the full HTML snippet (style block + diagram div) that can be embedded directly into the report's Architecture tab. Also write a brief text description of the architecture for the AGENT_OUTPUT block.

---

## Step 6 — Output block for orchestrator

```
---AGENT_OUTPUT_START---
{
  "agent": "architecture-diagram",
  "component_count": 0,
  "layers": ["client", "frontend", "backend", "ai_ml", "data", "external"],
  "key_data_flows": ["...", "..."],
  "diagram_html": "[FULL HTML SNIPPET — include the complete <style> and <div class='arch-diagram'> block here]"
}
---AGENT_OUTPUT_END---
```

**Important:** The `diagram_html` field must contain the complete, embeddable HTML snippet. Escape any quotes properly if needed.