---
name: zzafergok/technical-diagram-expert
source: https://app.decimal.ai/s/zzafergok-technical-diagram-expert@1/SKILL.md
source_sha256: eab8615d9412
---

# Technical Diagram Expert Skill

Modern yazılım platformlarının mimari dokümantasyonu ve teknik görselleştirme için tek kaynak skill. C4 model diyagramları ve tüm Mermaid diagram tipleri dahil.

## When to use this skill

- Sistem mimarisi veya component yapısı dokümante edilirken
- Feature flow'ları veya API sequence'ları görselleştirilirken
- ERD veya data model diyagramı oluştururken
- Proje planı veya sprint timeline'ı için Gantt chart'a ihtiyaç duyulurken
- PR veya teknik dokümana diagram eklenirken
- Yeni geliştirici onboarding'i için mimari açıklanırken

## How to use it

- Her zaman içsel olarak İngilizce düşün
- Her zaman kullanıcıya Türkçe yanıt ver
- Kod veya konfigürasyon dosyalarına comment satırı yazma

---

## 1. Diagram Tipi Seçimi

### C4 Model — Mimari Dokümantasyon

| Level | Tip              | Kitle          | Gösterir                   |
| ----- | ---------------- | -------------- | -------------------------- |
| 1     | **C4Context**    | Herkes         | Sistem + dış aktörler      |
| 2     | **C4Container**  | Teknik ekip    | App'lar, DB'ler, servisler |
| 3     | **C4Component**  | Geliştiriciler | İç component'ler           |
| 4     | **C4Deployment** | DevOps         | Altyapı node'ları          |
| —     | **C4Dynamic**    | Teknik ekip    | Numaralı istek akışları    |

**Kural**: Context + Container diyagramları çoğu ekip için yeterli. Component/Code diyagramlarını yalnızca gerçek değer kattığında oluştur.

### Mermaid — Genel Görselleştirme

| Durum                              | Diagram Tipi        |
| ---------------------------------- | ------------------- |
| Adım adım süreç, karar ağacı       | `graph` (flowchart) |
| API etkileşimleri, servisler arası | `sequenceDiagram`   |
| Veri modeli, ilişkiler             | `erDiagram`         |
| Nesne hiyerarşisi                  | `classDiagram`      |
| State machine, lifecycle           | `stateDiagram-v2`   |
| Sprint/release planı               | `gantt`             |
| Oranlar                            | `pie`               |
| Kullanıcı yolculuğu                | `journey`           |
| Git branch stratejisi              | `gitGraph`          |

---

## 2. C4 Diyagram Örnekleri

### Örnek Platform — System Context (Level 1)

```mermaid
C4Context
  title System Context — Modern Web Platform
  
  Person(user, "Kullanıcı", "Sistemi kullanan son kullanıcı")
  Person(admin, "Admin", "Kullanıcıları ve sistemi yönetir")

  System(system, "Software System", "Ana uygulama platformu")

  System_Ext(auth, "Auth Provider", "Kimlik doğrulama servisi")
  System_Ext(db, "Database", "Veri saklama servisi")
  System_Ext(ai, "AI Provider", "Yapay zeka modelleri")
  System_Ext(email, "Email Service", "Bildirim gönderimi")

  Rel(user, system, "Kullanır", "HTTPS")
  Rel(admin, system, "Yönetir", "HTTPS")
  Rel(system, auth, "Auth kontrolü", "OAuth/SDK")
  Rel(system, db, "Veri okuma/yazma", "SDK/SQL")
  Rel(system, ai, "AI tamamlama", "REST API")
  Rel(system, email, "Email gönderir", "REST API")
```

[... internal examples simplified for brevity but maintaining structure ...]
---
## 8. Best Practices

### C4 İçin

- Her element için: Ad + Tip + Teknoloji + Açıklama (kısa, ≤50 karakter)
- Tek yönlü oklar — çift yönlü oklar belirsizlik yaratır
- Ok etiketi eylem fiiliyle başlamalı: "Okur", "Yazar", "Gönderir"
- Teknoloji etiketi ekle: "JSON/HTTPS", "SDK"
- Diyagram başına ≤20 element
- Her diyagram tek bir dosya

### Output Locations

Mimari dokümantasyonu şuraya yaz:

```
docs/architecture/
  c4-context.md        — System context diyagramı
  c4-containers.md     — Container diyagramı
  c4-deployment.md     — Deployment diyagramı
  c4-dynamic-{flow}.md — Özel akış diyagramları
  c4-components-{feature}.md — Feature bazlı component diyagramları
```