بررسی عمیق سطح 3 مدل C4: تسلط بر نمودارهای مؤلفه‌ها برای نشان دادن ساختار داخلی و مسئولیت‌ها

نمودار مؤلفه C4 چیست؟

نمودار مؤلفه‌ها استسطح 3در مدل C4 سیمون براون است. این نمودار به سمتیک ظرف خاصاز نمودار ظرف سطح 2) برای نشان دادن:

• مکانیسم‌هایساختارهای منطقیکه تشکیل‌دهنده آن ظرف هستند.

• چگونه این مؤلفه‌هابا یکدیگر تعامل دارندبا یکدیگر.

• مسئولیت‌هاوفناوری‌های پیاده‌سازیدر سطح بالاتر از کلاس‌ها — به چیزهایی مانند بیان‌های سرور، ماژول‌ها، خدمات، کنترلرها، فادس‌ها و غیره فکر کنید).

• رابطه‌های کلیدیرابطه‌هایاقراردادهابین مؤلفه‌ها (اغلب از طریق روابط نهفته است).

توضیح مهم: یک «مؤلفه» در C4نهیک کلاس نیست. این یکگروه‌بندی منطقی کلاس‌هاپشت یک رابطه مشخص — چیزی که مسئولیت واضحی دارد، می‌تواند نسبتاً مستقل (در داخل ظرف) توسعه، تست و نصب شود، امانهبه صورت جداگانه قابل نصب مانند یک ظرف.

مثال‌هایی از مؤلفه‌ها:

• کنترلر REST / کنترلر وب

• سرویس / مورد استفاده / سرویس کاربردی

• انبارگاه / شیء دسترسی به داده

• مدل حوزه / موجودیت

• امنیت / ماژول احراز هویت

• فرستنده اطلاع رسانی

• Facade به سیستم خارجی

• موتور قوانین کسب و کار

• لایه کش

نمودار حفظ می‌شود منطقی / به اندازه‌ای بی‌طرف از اجرایی بودن — بدون ویژگی‌های کلاس، امضاها یا جزئیات کامل کلاس UML (این سطح ۴ کد است که اختیاری و نادر است).

زمان مناسب برای ایجاد نمودار مؤلفه

ایجاد (و نگهداری) نمودار مؤلفه فقط زمانی که:

• کانتینر انتخاب شده پیچیده به اندازه‌ای که که ساختار داخلی آن به تنهایی از نام و توضیحات آن مشخص نیست.

• اعضای تیم جدید (به ویژه توسعه‌دهندگان پشتیبان) به طور مکرر می‌پرسند: «ویژگی X در این سرویس/API به چه صورت به واقعیت پیوسته است؟»

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

• شما در حال انجام بحث‌های جزئیات بحث‌های طراحی, بررسی کدها, یا انتقال مسئولیت‌های اورگیل برای یک کانتینر خاص.

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

• شما شناسایی کرده‌اید بدهی فنی, کلاس‌های خدایی, یا اتصال شدید درون یک کانتینر و می‌خواهید وضعیت فعلی را قبل از تمیز کردن ببینید.

• شما در حال ورود به سیستم توسعه‌دهندگان ارشد/معمارانی هستید که نیاز به درک سریع ساختار ماژول دارند.

لطفاً انجام ندهید ایجاد نمودارهای مؤلفه برای:

• کانتینرهای ساده (API CRUD با یک کنترلر + یک سرویس + یک ذخیره‌سازی — ساختار واضح).

• اکثر میکروسرویس‌ها (اغلب به اندازه‌ای کوچک هستند که سطح کانتینر کافی است).

• کانتینرهای فرانت‌اند (اپلیکیشن‌های React/Vue — معمولاً بهتر با درخت مؤلفه‌ها یا storybook نشان داده می‌شوند).

• وقتی سطح 2 (کانتینر) + ساختار کد خوب/نام‌گذاری مناسب همه چیز مورد نیاز را انتقال می‌دهد.

سیمون براون پیشنهاد می‌کند: اکثر تیم‌ها می‌توانند تا سطح 1 + 2 توقف کنند. فقط به سطح 3 بروید برای پیچیده / پرریسک / اصلی / پرتاب‌شده کانتینرها.

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

• مسئولیت‌های داخلی را روشن می‌کند — نشان‌دهنده جداسازی مسائل (مثلاً کنترلرها در مقابل سرویس‌ها در مقابل دسترسی به داده‌ها در مقابل ادغام خارجی).

• اتصال و وابستگی‌ها را آشکار می‌کند — اجزای خدایی، وابستگی‌های چرخه‌ای یا وابستگی بیش از حد به کدهای زیرساخت را قابل مشاهده می‌کند.

• به ورود به سیستم و انتقال دانش بهتر کمک می‌کند — توسعه‌دهندگان مرزهای ماژول را سریع‌تر از خواندن تمام فایل‌های منبع درک می‌کنند.

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

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

• معماری به عنوان کد — هنگام ذخیره‌سازی در PlantUML → با پایگاه کد نسخه‌دار می‌شود، قابل مقایسه و بررسی در درخواست‌های ادغام (PRs) است.

• ارتباط را مقیاس‌پذیر می‌کند — توسعه‌دهندگان باتجربه به مسئولیت‌های اجزا توجه دارند؛ دانشجویان به این موضوع توجه دارند که کد جدید کجا قرار گیرد.

چگونه یک نمودار مؤثر اجزا ایجاد کنیم (مراحل گام به گام + بهترین روش‌ها)

1. یک کانتینر را انتخاب کنید — با پیچیده‌ترین یا مهم‌ترین آن شروع کنید (اغلب API اصلی یا سرویس پشتیبان).

2. متناسب با سطح 2 کپی کنید — شامل عوامل خارجی (کانتینرهای دیگر، افراد، سیستم‌های خارجی) باشد که با این کانتینر تعامل دارند.

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

4. اجزای را شناسایی کنید — بپرسید:

   • اجزای اصلی، بیانه‌های سپرینگ، بسته‌ها یا محدوده‌های محدود شده داخل آن چیستند؟

   • درخواست‌های ورودی کجا قرار می‌گیرند؟ (کنترلرها/هندلرها)

   • منطق کسب‌وکار چگونه هماهنگ می‌شود؟

   • داده‌ها از کجا دسترسی یا ذخیره می‌شوند یا اعتبارسنجی می‌شوند؟

   • نگرانی‌های عرضی چگونه مدیریت می‌شوند؟ (امنیت، لاگ‌گیری)

   • آیا فاسادها یا لایه‌های ضد فساد به سیستم‌های قدیمی/خارجی وجود دارد؟

5. فناوری و توضیح مختصر اضافه کنید — نام، فناوری (سرویس سپرینگ، هندلر .NET، ماژول گو و غیره)، هدف کوتاه (کمتر از 15 کلمه).

6. تعیین تعاملات — جهت و قصد را نشان دهید (از کاربرد، فراخوانی، خواندن از، انتشار رویداد به). معمولاً پروتکل در این سطح حذف می‌شود.

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

   • محدود کردن دامنه — حداکثر 6 تا 12 مؤلفه در هر دیاگرام. اگر بیشتر باشد → زیرنماهای متمرکز ایجاد کنید (مثلاً «برش احراز هویت»).

   • نام‌گذاری معنادار — بهتر است «سرویس قرار دادن سفارش» را نسبت به «OrderService» ترجیح دهید.

   • مسئولیت‌ها را نشان دهید، نه کلاس‌ها — از فهرست کردن هر کلاس خودداری کنید؛ به صورت منطقی گروه‌بندی کنید.

   • از آیکون‌ها به صورت محدود استفاده کنید — فقط در صورتی که فناوری را روشن کنند (آیکون‌های Spring، .NET).

   • فعال کردن ا légende — به خوانندگان جدید کمک می‌کند.

   • چیدمان را تمیز نگه دارید — LAYOUT_WITH_LEGEND(), LAYOUT_TOP_DOWN().

   • نسخه در مخزن — فایل‌های .puml کنار کد کانتینر قرار دارند.

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

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

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

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

title دیاگرام مؤلفه: سیستم بانکداری اینترنتی - برنامه کاربردی API

' بازیگران / بخش‌های خارجی از سطح کانتینر
Container(spa, "برنامه صفحه تکی", "JavaScript و Angular", "UI بانکداری اینترنتی را از طریق مرورگر ارائه می‌دهد")
Container(mobile, "اپلیکیشن موبایل", "iOS/Android", "عملکرد محدود بانکداری موبایل را ارائه می‌دهد")
ContainerDb(database, "پایگاه داده بانکی", "PostgreSQL", "ترجیحات کاربر، داده‌های کش شده و جلسات را ذخیره می‌کند")
System_Ext(mainframe, "سیستم بانکداری اصلی", "ماشین اصلی – حساب‌های اصلی و تراکنش‌ها")

' کانتینری که در حال زوم به آن هستیم
Container_Boundary(api, "برنامه کاربردی API") {
    Component(signInCtrl, "کنترلر ورود", "کنترلر REST MVC Spring", "احراز هویت و ایجاد جلسه را مدیریت می‌کند")
    Component(accountsCtrl, "کنترلر خلاصه حساب‌ها", "کنترلر REST MVC Spring", "تعادل و خلاصه حساب‌ها را ارائه می‌دهد")
    Component(resetPwdCtrl, "کنترلر بازنشانی رمز عبور", "کنترلر REST MVC Spring", "جریان بازنشانی رمز عبور را مدیریت می‌کند")
    
    Component(security, "مؤلفه امنیت", "Bean Spring", "توکن‌های JWT، هش رمز عبور، بررسی نقش‌ها")
    Component(accountService, "مؤلفه مدیریت حساب", "Bean یا سرویس Spring", "پرس‌وجوهای حساب و قوانین کسب‌وکار را هماهنگ می‌کند")
    Component(mainframeFacade, "فاساد بانکداری ماشین اصلی", "Bean Spring", "لایه ضد فساد برای ماشین اصلی قدیمی")
    Component(emailNotifier, "مؤلفه اطلاع‌رسانی ایمیل", "Bean Spring", "ایمیل تأیید و بازنشانی را ارسال می‌کند")
}

' روابط درون مرز
Rel(signInCtrl, security, "از کاربرد")
Rel(accountsCtrl, accountService, "از کاربرد")
Rel(resetPwdCtrl, security, "از کاربرد")
Rel(resetPwdCtrl, emailNotifier, "از کاربرد")
Rel(accountService, mainframeFacade, "از کاربرد")
Rel(accountService, database, "از و به داده‌ها خواندن و نوشتن", "JDBC")
Rel(mainframeFacade, mainframe, "از کاربرد", "XML/HTTPS")
Rel(emailNotifier, database, "خواندن ترجیحات کاربر", "JDBC")

' فراخوانی‌های ورودی از سمت front-ends
Rel(spa, signInCtrl, "از کاربرد", "JSON/HTTPS")
Rel(spa, accountsCtrl, "از کاربرد", "JSON/HTTPS")
Rel(spa, resetPwdCtrl, "از کاربرد", "JSON/HTTPS")
Rel(mobile, signInCtrl, "از کاربرد", "JSON/HTTPS")
Rel(mobile, accountsCtrl, "از کاربرد", "JSON/HTTPS")
Rel(mobile, resetPwdCtrl, "از کاربرد", "JSON/HTTPS")

LAYOUT_WITH_LEGEND()
LAYOUT_LEFT_RIGHT()

@enduml

این نتیجه می‌دهد:

• مرز واضحی اطراف کانتینر API

• گروه‌بندی منطقی کنترلرها، سرویس‌ها و فاسادها

• مسئولیت‌های دقیق

• تعاملات و وابستگی‌های کلیدی

• légende خودکار برای خوانایی بهتر

در PlantUML رندرر (آنلاین یا IDE) پیست کنید — نام‌ها/فناوری‌ها را برای سیستم خود سفارشی کنید.

این الگو را به عنوان الگوی شروع خود استفاده کنید. هدف همیشه ارتباط موثر تیم — نه زیبایی نمودار. مدل‌سازی خوشحال!

منبع نمودار مؤلفه C4

• راهنمای نهایی برای نمایش مدل C4 با استفاده از ابزارهای هوش مصنوعی Visual Paradigm: این راهنما توضیح می‌دهد که چگونه می‌توان از ابزارهای پشتیبانی‌شده از هوش مصنوعی برای خودکارسازی و بهبود نمایش مدل C4 برای طراحی سریع‌تر معماری نرم‌افزار استفاده کرد.
• استفاده از Studio C4 هوش مصنوعی Visual Paradigm برای مستندسازی معماری بهبودیافته: این مقاله به بررسی استفاده از یک استودیو پشتیبانی‌شده از هوش مصنوعی برای ایجاد مستندات معماری نرم‌افزار تمیز، مقیاس‌پذیر و قابل نگهداری می‌پردازد.
• راهنمای نهایی به Studio C4-PlantUML: تحول در طراحی معماری نرم‌افزار: این منبع به بررسی ترکیب خودکارسازی مبتنی بر هوش مصنوعی، شفافیت مدل C4 و انعطاف‌پذیری PlantUML در یک ابزار قدرتمند واحد می‌پردازد.
• راهنمای جامع به Studio C4 PlantUML پشتیبانی‌شده از هوش مصنوعی Visual Paradigm: این راهنما ابزاری هدفمند را توصیف می‌کند که در اوایل سال ۲۰۲۵ منتشر شده و پیامدهای زبان طبیعی را به نمودارهای لایه‌ای C4 تبدیل می‌کند.
• Studio C4-PlantUML | تولیدکننده نمودار C4 پشتیبانی‌شده از هوش مصنوعی: این مرور ویژگی‌ها ابزاری مبتنی بر هوش مصنوعی را برجسته می‌کند که برای تولید نمودارهای معماری نرم‌افزار C4 از توضیحات متن ساده طراحی شده است.
• تولید و ویرایش نمودارهای مؤلفه C4 با چت‌بات هوش مصنوعی Visual Paradigm: این آموزش نشان می‌دهد که چگونه می‌توان از یک چت‌بات پشتیبانی‌شده از هوش مصنوعی برای ایجاد و بهبود تدریجی معماری سطح مؤلفه در سیستم‌های پیچیده استفاده کرد.
• تولیدکننده نمودار C4 پشتیبانی‌شده از هوش مصنوعی: سطوح اصلی و دیدگاه‌های پشتیبان: این صفحه توضیح می‌دهد که چگونه تولیدکننده هوش مصنوعی از چهار سطح اصلی مدل C4 — زمینه، کانتینر، مؤلفه و نصب — پشتیبانی می‌کند تا مستندسازی جامع ارائه دهد.
• تولیدکننده نمودار هوش مصنوعی: انتشار پشتیبانی کامل از مدل C4: این به‌روزرسانی جزئیات ادغام ویژگی‌های پشتیبانی‌شده از هوش مصنوعی برای ایجاد خودکار نمودارهای سلسله مراتبی مدل C4 را ارائه می‌دهد.
• تولیدکننده هوش مصنوعی مدل C4: خودکارسازی کل چرخه مدل‌سازی: این منبع تأکید می‌کند که چگونه یک چت‌بات هوش مصنوعی تخصصی از پیامدهای مکالمه‌ای برای تضمین یکدستی در مستندسازی معماری برای تیم‌های DevOps استفاده می‌کند.
• بررسی جامع: چت‌بات‌های هوش مصنوعی عمومی در برابر ابزارهای C4 Visual Paradigm: این مقایسه توضیح می‌دهد که چرا ابزارهای تخصصی مانند Studio C4 PlantUML نتایج ساختاریافته‌تر و حرفه‌ای‌تری نسبت به مدل‌های زبانی عمومی ارائه می‌دهند.

This post is also available in Deutsch, English, Español, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文.