C4 Diyagram Görüntüleyici ve Düzenleyici

Yazarlar
  • C4 Diyagram Görüntüleyici ve Düzenleyici
Seri: UML and Software Architecture
Bölümler: (2/7)

C4 Diyagram Görüntüleyici ve Düzenleyici: MassiveDiag Playground

MassiveDiag ile C4 Model Diyagramlamaya Giriş

MassiveDiag Playground, metin tabanlı diyagram kodlarını gerçek zamanlı olarak profesyonel sistem mimarisi görselleştirmelerine dönüştüren güçlü bir C4 diyagram görüntüleyici ve düzenleyici sunar. Bu araç, canlı C4 model düzenleyici olarak öne çıkar; yazılım mimarisi diyagramlarınızı geliştirirken anında görebilir ve ince ayar yapabilirsiniz.

İhtiyacınız ne olursa olsun:

  • Web belgeleri için C4 diyagram kodunu SVG’ye çevirin
  • Teknik dokümantasyon için C4 diyagram kodunu Word dosyasına aktarın
  • Sunumlar için C4 model kodunu PNG’ye dönüştürün
  • Resmi belgeler için C4 modelini PDF olarak dışa aktarın

MassiveDiag Playground, tüm bu işlemleri sade bir akışla sunar.

my Image

MassiveDiag’ın C4 Diyagram Düzenleyicisini Hemen Deneyin →

C4 Modeli Nedir?

C4 modeli, yazılım mimarisini katmanlı bir şekilde görselleştirmeye yarayan, Simon Brown tarafından geliştirilen bir yaklaşımdır. Yazılım sistemlerini dört düzeyde diyagramlarla standart bir biçimde belgelemenizi sağlar:

  1. Bağlam (Context) diyagramları – Sistemin dış dünya ile etkileşimini gösterir
  2. Kapsayıcı (Container) diyagramları – Teknoloji ve bileşen seviyesindeki kararları yansıtır
  3. Bileşen (Component) diyagramları – Her kapsayıcının içindeki mantıksal parçaları tanımlar
  4. Kod diyagramları – Detaylı uygulama düzeyinde görselleştirme (isteğe bağlıdır)

MassiveDiag, güçlü bir C4 model kod diyagram üreticisi olarak geliştiriciler ve yazılım mimarları için erişilebilir bir çözüm sunar.

C4 Diyagram Koduyla Başlarken

Bağlam Diyagramı Örneği

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Internet Bankacılık Sistemi için Sistem Bağlamı Diyagramı

Person(customer, "Banka Müşterisi", "Banka müşterisi ve bireysel hesap sahibi.")
System(banking_system, "İnternet Bankacılığı Sistemi", "Müşterilerin hesap bilgilerini görüntülemesini ve ödeme yapmasını sağlar.")
System_Ext(mail_system, "E-posta Sistemi", "Kurumsal Microsoft Exchange e-posta sistemi.")
System_Ext(mainframe, "Ana Bilgisayar Bankacılık Sistemi", "Tüm müşteri, hesap, işlem bilgilerini barındırır.")

Rel(customer, banking_system, "Kullanır")
Rel(banking_system, mail_system, "E-posta gönderir")
Rel(banking_system, mainframe, "Kullanır")
@enduml

my Image

Kapsayıcı Diyagramı Örneği

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Internet Bankacılığı Sistemi için Kapsayıcı Diyagramı

Person(customer, "Banka Müşterisi", "Banka müşterisi ve bireysel hesap sahibi.")

System_Boundary(c1, "İnternet Bankacılığı Sistemi") {
    Container(web_app, "Web Uygulaması", "Java ve Spring MVC", "Statik içerik ve tek sayfa uygulamayı sunar.")
    Container(spa, "Tek Sayfa Uygulama", "JavaScript ve Angular", "Tüm bankacılık işlevlerini sağlar.")
    Container(mobile_app, "Mobil Uygulama", "Xamarin", "Sınırlı bankacılık işlevleri sunar.")
    Container(api, "API Uygulaması", "Java ve Spring MVC", "JSON/HTTPS ile işlevsellik sunar.")
    Container(database, "Veritabanı", "Oracle", "Kullanıcı verileri, kimlik doğrulama ve günlükleri saklar.")
}

System_Ext(mainframe, "Ana Bilgisayar", "Tüm çekirdek bankacılık verilerini tutar.")
System_Ext(email, "E-posta Sistemi", "Microsoft Exchange e-posta altyapısı.")

Rel(customer, web_app, "Kullanır", "HTTPS")
Rel(customer, spa, "Kullanır", "HTTPS")
Rel(customer, mobile_app, "Kullanır")
Rel(web_app, spa, "Tarayıcıya iletir")
Rel(spa, api, "API çağrısı yapar", "JSON/HTTPS")
Rel(mobile_app, api, "API çağrısı yapar", "JSON/HTTPS")
Rel(api, database, "Okur/yazar", "JDBC")
Rel(api, mainframe, "API çağrısı yapar", "XML/HTTPS")
Rel(api, email, "E-posta gönderir")
@enduml

my Image

MassiveDiag ile C4 Diyagramları Nasıl Kullanılır?

1. C4 Model Kodunuzu Hazırlayın

Kendi C4 model kodunuzu yazabilir veya ChatGPT gibi yapay zekâ araçlarından yardım alabilirsiniz.

@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Yönetici", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "Örnek Sistem", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Web Uygulama", "C#, ASP.NET Core 2.1 MVC", $descr="Kullanıcıların birden çok Twitter zaman çizelgesini karşılaştırmasını sağlar", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "Kullanır", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "Tweetleri çeker", "HTTPS", $link="https://plantuml.com/link")
@enduml

2. MassiveDiag Playground’a Kodunuzu Yapıştırın

MassiveDiag Playground'a gidin – kurulum veya üyelik gerekmez. Kodunuzu yapıştırın veya yükleyin.

my Image

3. Diyagram Türünü Seçin

Playground otomatik olarak diyagram türünü algılar, gerekirse elle “C4 PlantUML” seçebilirsiniz.

my Image

4. Diyagramınızı Oluşturun

“Create Diagram” butonuna tıklayarak kodunuzu görsel C4 diyagramına dönüştürün.

my Image

5. Düzenleyin ve İnce Ayar Yapın

Çift bölmeli arayüzü kullanarak:

  • Kodu düzenleyip gerçek zamanlı olarak güncellemeleri görebilirsiniz
  • Canlı SVG editörü ile görsel ayarlar yapabilirsiniz

6. Tercih Ettiğiniz Formatta Dışa Aktarın

Şu formatlarda dışa aktarabilirsiniz:

  • SVG – Web kullanımı için
  • PNG – Sunumlar için
  • PDF – Belgeler için
  • Word – Teknik dökümanlar için
  • React JSX – Web bileşenleri için

my Image

İlk C4 Diyagramınızı Hemen Oluşturun →

C4 Diyagramları için Pratik Kullanım Alanları

Yazılım Mimarisi Dokümantasyonu

Farklı seviyelerde sistem tasarımını belgelemek için kullanılır:

  • Bağlam diyagramları – Paydaşlar için
  • Kapsayıcı diyagramlar – Geliştirme ekipleri için
  • Bileşen diyagramları – Uygulama planlaması için

Teknik Belgeler

Şu amaçlarla mimari diyagramlar oluşturun:

  • Sistem öneri belgeleri
  • Mimari Karar Kayıtları (ADR)
  • Teknik gereksinim belgeleri

Oryantasyon ve Bilgi Aktarımı

Yeni ekip üyelerine sistem hakkında genel bilgi sunmak için:

  • Sistem sınırlarını ve etkileşimlerini açıklayın
  • Teknoloji yığınını görselleştirin
  • Bileşen görevlerini ve ilişkilerini gösterin

C4 Diyagramları ve MassiveDiag Hakkında SSS

C4, diğer diyagramlama yaklaşımlarından nasıl farklıdır?

C4, standart ve katmanlı bir mimari belgeleme yaklaşımı sunar.

C4 diyagram görüntüleyiciyi kullanmak için kod bilgisi şart mı?

Kod sözdizimine temel düzeyde aşinalık yardımcı olur ama şart değildir.

C4 diyagramlarımı başkalarıyla paylaşabilir miyim?

Evet, C4 kodunu paylaşabilir veya diyagramları dışa aktararak iş birliği yapabilirsiniz.

C4 diyagramlarını belgelerime nasıl eklerim?

  • Web ve sunumlar için SVG/PNG
  • Resmi belgeler için PDF/Word

Profesyonel C4 Diyagramları Oluşturun →

Paylaş