de_DEen_USes_ESfa_IRjapt_PTru_RU

تسلط بر نمودار کانتینر C4: تمرکز بر انتخاب‌های فناوری، مسئولیت‌ها و ارتباطات (با مثال‌های PlantUML)

نمودار کانتینر C4 چیست؟

نمودار کانتینر است سطح 2 در مدل C4 سیمون براون است. این نمودار به سیستم نرم‌افزاری منفردی (که در سطح 1 – زمینه سیستم تعریف شده است) نزدیک می‌شود تا نشان دهد:

The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric

  • این شکل کلی معماری درون مرز سیستم شما را نشان می‌دهد.

  • واحدهای اصلی واحدات قابل نصب/اجرا که به آنها کانتینرها.

  • انتخاب‌های فناوری برای هر کانتینر.

  • چگونه کانتینرها تعامل دارند با یکدیگر و با عوامل یا سیستم‌های خارجی.

توضیح مهم: یک «کانتینر» در C4 حتماً کانتینر داکر نیست. هر واحدی که به صورت جداگانه قابل نصب یا اجرا باشد و کد اجرا کند یا داده ذخیره کند، یک کانتینر است. مثال‌ها:

  • اپلیکیشن وب / برنامه تک‌صفحه‌ای (SPA)

  • اپلیکیشن موبایل

  • API سمت سرور / میکروسرویس

  • پایگاه داده (ساختار)

  • ذخیره‌سازی فایل (کیف سه، پوشه سیستم فایل)

  • کنتیور پیام / صف (هنگامی که به صورت صریح مدل‌سازی شود)

  • اپلیکیشن دسکتاپ / خط فرمان (CLI)

  • فرآیند دسته‌ای / کار موقت‌شده

این نمودار همچنان سطح بالا — بدون جزئیات کلاس یا کد داخلی (این مربوط به سطح 3 مؤلفه‌ها یا سطح 4 کد است).

زمان مناسب برای ایجاد نمودار کانتینر

نمودار کانتینر را ایجاد (و نگهداری) کنید هنگامی که:

  • شما تکمیل کرده‌اید (یا حداقل طرح اولیه را رسم کرده‌اید) نمودارزمینه سیستم نمودار و نیاز به پاسخ به این سؤال دارید: «بلوک‌های اصلی داخل سیستم ما چیستند؟»

  • ورود کاربران جدید، مهندسان نرم‌افزار، معماران یا کارکنان عملیات — آن‌ها نیاز دارند به سرعت بسته فناوری و مسئولیت‌های سطح بالا را درک کنند.

  • اتخاذ تصمیمات مهم فنی یا معماری (یکپارچه به سرویس‌های کوچک، افزودن برنامه موبایل، انتخاب پایگاه داده، معرفی صف‌های پیام و انتقال به ابر).

  • مستندسازی برای بازبینی‌ها، رعایت مقررات، بررسی‌های امنیتی یا پاسخ به حوادث (به نمایش دادن سطح حمله و جریان داده‌ها کمک می‌کند).

  • شما می‌خواهید «معماری به عنوان کد» که در مخزن ذخیره می‌شود و با سیستم پیشرفت می‌کند.

  • اکثر تیم‌هااینجا متوقف می‌شوند — سیمون براون خودش تأکید می‌کند کهزمینه سیستم + کانتینر نمودارها برای اکثر تیم‌های نرم‌افزار کافی هستند. فقط در صورتی که پیچیدگی داخل یک کانتینر آن را توجیه کند، به سطح عمیق‌تر (مؤلفه‌ها/کد) بروید.

در صورتی که:

  • سیستم بسیار ساده است (یک فرآیند + پایگاه داده).

  • شما در مرحله اولیه طرح‌ریزی هستید و تنها به زمینه کلی نیاز دارید.

چرا از نمودارهای کانتینر استفاده کنیم؟ (مزایای کلیدی)

  • شفافیت برای مخاطبان مختلف
    توسعه‌دهندگان فناوری‌ها و نقاط اتصال را می‌بینند.
    تیم‌های عملیات/زیرساخت، واحدهای قابل نصب و مسیرهای ارتباطی را می‌بینند.
    معماران مرزهای مسئولیت و ریسک‌های بدهی فنی را می‌بینند.
    مدیران دیدی کافی غیروابسته به فناوری اما قابل اجرا می‌بینند.

  • از مشکل «یک نمودار بزرگ» جلوگیری می‌کند
    از اینکه همه چیز (کاربران + زیرساخت + کلاس‌ها + آیکون‌های ابری) در یک تصویر بارگذاری شده و بیش از حد پر شده، جلوگیری می‌کند.

  • تصمیمات کلیدی را برجسته می‌کند
    به طور واضح انتخاب‌هایی مانند SPA + API + پایگاه داده رابطه‌ای در مقابل رندرینگ سمت سرور + NoSQL، یا هم‌زمانی در مقابل رویدادمحور را نشان می‌دهد.

  • ارتباط و همکاری
    در جلسات طراحی، بررسی حوادث، مدل‌سازی تهدیدها و برنامه‌ریزی استراتژیک به عنوان یک نقشه مشترک عمل می‌کند.

  • مستندات زنده
    وقتی به زبان PlantUML / Structurizr DSL یا مشابه آن نوشته شود → در Git نسخه‌دار می‌شود، به طور خودکار در CI بازتولید می‌شود و همیشه به‌روز است.

چگونه یک نمودار کانتینر عالی بسازیم (مراحل به صورت گام به گام + بهترین روش‌ها)

  1. از سطح 1 شروع کنید
    افراد و سیستم‌های نرم‌افزاری خارجی را از نمودار متناظر کپی کنید — این‌ها به عنوان عواملی که با کانتینرها تعامل دارند، تبدیل می‌شوند.

  2. مرز سیستم را رسم کنید
    از مرز_سیستم در PlantUML برای مشخص کردن واضح «داخل سیستم ما» استفاده کنید.

  3. کانتینرها را شناسایی کنید
    پرسش کنید: چه چیزهایی به صورت جداگانه قابل اجرا/نصب هستند که عملکرد سیستم را تأمین می‌کنند؟
    الگوهای رایج:

    • SPA وب ↔ پشتیبان API ↔ پایگاه داده

    • اپلیکیشن موبایل ↔ پشتیبان برای رابط کاربری (BFF) ↔ خدمات مشترک

    • سرویس‌های مایکروسرویسی با کنتیور پیام

    • یکپارچه قدیمی + لایه جدید API

  4. فناوری و توضیح مختصر اضافه کنید
    هر کانتینر باید نشان دهد: نام، فناوری، هدف کوتاه.
    توضیحات را کمتر از 15 کلمه نگه دارید.

  5. تعاملات (رابطه‌ها) را تعریف کنید
    جهت + پروتکل + قصد را نشان دهید (مثلاً: «JSON/HTTPS»، «از و به داده‌ها خواندن و نوشتن»، «منتشر می‌کند به»، «مصرف می‌کند از»).
    در روابط از افعال استفاده کنید.

  6. بهترین روش‌ها

    • خوانایی آن را حفظ کنید — به کمتر از 10 تا 12 کانتینر بپردازید. اگر بیشتر است → دیدگاه‌های متمرکز ایجاد کنید (مثلاً: «کانتینرها در زیرسیستم API»).

    • همگون باشید — جهت چیدمان یکسان (از بالا به پایین/از چپ به راست)، سطح جزئیات یکسان.

    • از آیکون‌ها/اسپریت‌ها استفاده کنید — جذابیت بصری افزوده شود (PlantUML از devicons، font-awesome و غیره پشتیبانی می‌کند).

    • légende و کلید — اجازه دهید اتوماتیک لégende در PlantUML فعال شود.

    • از بی‌نظمی جلوگیری کنید — اگر صف‌ها/موضوعات ارزشی ایجاد نمی‌کنند، آن‌ها را حذف کنید؛ به جای آن، پروتکل‌ها را روی فلش‌ها قرار دهید.

    • نسخه‌بندی و ذخیره به عنوان کد — فایل‌های .puml را به مخزن ارسال کنید.

    • انطباق با مخاطب — یک نسخه برای توسعه‌دهندگان (فناوری‌های دقیق)، نسخه سبک‌تری برای ذینفعان.

مثال PlantUML – سیستم بانکداری اینترنتی کلاسیک (سبک Big Bank plc)

اینجا یک مثال تمیز و تولیدی با استفاده از کتابخانه رسمی C4-PlantUML آورده شده است.

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

' اختیاری: آیکون‌های زیبا اضافه کنید (از اسپریت‌های tupadr3)
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/android.puml

title دیاگرام کانتینر: سیستم بانکداری اینترنتی

Person(customer, "مشتری بانکداری شخصی", "یک مشتری از Big Bank plc")

System_Boundary(c1, "سیستم بانکداری اینترنتی") {
    Container(spa, "اپلیکیشن صفحه تکی", "JavaScript و Angular", "تمامی قابلیت‌های بانکداری اینترنتی را از طریق مرورگر وب به مشتریان ارائه می‌کند", $sprite="angular")
    Container(mobile, "اپلیکیشن موبایل", "Android/iOS (React Native)", "قابلیت‌های محدودی در بانکداری اینترنتی", $sprite="android")
    Container(api, "اپلیکیشن API", "Java و Spring Boot", "قابلیت‌های بانکداری اینترنتی را از طریق API ارائه می‌کند", $sprite="java")
    ContainerDb_Ext(db, "پایگاه داده بانکداری", "PostgreSQL", "ترکیبی از ترجیحات کاربر، داده‌های کش شده و جلسات (حساب‌ها و تراکنش‌های اصلی در سیستم اصلی باقی می‌مانند)", $sprite="postgresql")
}

System_Ext(core, "سیستم بانکداری اصلی", "سیستم اصلی – موجود")
System_Ext(email, "سیستم ایمیل", "ایمیل‌ها را ارسال می‌کند (مثلاً AWS SES)")

Rel(customer, spa, "استفاده می‌کند از", "HTTPS")
Rel(customer, mobile, "استفاده می‌کند از", "HTTPS")

Rel(spa, api, "تماس می‌گیرد با", "JSON/HTTPS")
Rel(mobile, api, "تماس می‌گیرد با", "JSON/HTTPS")

Rel(api, db, "خواندن و نوشتن به", "JDBC/SQL")
Rel(api, core, "استفاده می‌کند از", "JSON/HTTPS")
Rel(api, email, "ایمیل را ارسال می‌کند با استفاده از", "HTTPS")

LAYOUT_WITH_LEGEND()
LAYOUT_TOP_DOWN()

@enduml

این یک دیاگرام تمیز با این ویژگی‌ها را نمایش می‌دهد:

  • مرز سیستم

  • برچسب‌های فناوری

  • اسپریت‌ها/آیکون‌ها

  • ارتباطات واضح

  • légende

شما می‌توانید آن را مستقیماً در سرور آنلاین PlantUML یا هر ویرایشگر/IDE سازگاری که دارید، قرار دهید.

این ساختار را به عنوان الگو استفاده کنید — عناصر را با نام‌ها، فناوری‌ها و جریان‌های سیستم خود جایگزین کنید. برای استایل‌های پیشرفته‌تر (تم‌ها، رنگ‌های سفارشی)، نمونه‌های GitHub C4-PlantUML را بررسی کنید.

طراحی دیاگرام خوشحال باشید — و به یاد داشته باشید: هدف این است ارتباط موثر، نه کمال UML!

منبع دیاگرام کانتینر C4

This post is also available in Deutsch, English, Español, 日本語, Portuguese and Ру́сский.