de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

تسلط بر نمودار کانتینر 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, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文.