مقایسه استایل‌های نمودار

این صفحه برای تست و مقایسه نحوه نمایش نمودارها در سناریوهای مختلف ایجاد شده است. هدف این است که ببینیم کدام حالت برای مقالات شما مناسب‌تر و تمیزتر است.

۱. حالت فعلی (Manual Wrapper)

در این حالت شما به صورت دستی از <div className="flex justify-center my-6"> استفاده کرده‌اید.

• مشکل: اگر نمودار بزرگ باشد، به دلیل ویژگی‌های Flexbox ممکن است بی‌دلیل کوچک شود.
• کدنویسی: شلوغ و تکراری.

graph TD
    A[آغاز] --> B{تصمیم گیری}
    B -- بله --> C[پایان موفق]
    B -- خیر --> D[بازگشت]
    D --> A

۲. حالت پیشنهادی (Clean System - Automatic)

در این حالت هیچ تگ اضافی دور نمودار نیست. سیستم به طور خودکار آن را مرکزچین کرده و فواصل (Margins) را رعایت می‌کند.

• مزیت: کد بسیار تمیز، نمایش پایدار در موبایل، و استفاده حداکثری از فضای مقاله.
• کدنویسی: فقط بلاک کد معمولی.

graph TD
    A[آغاز] --> B{تصمیم گیری}
    B -- بله --> C[پایان موفق]
    B -- خیر --> D[بازگشت]
    D --> A

۳. تست نمودار پیچیده و تعاملی

نمودارهایی که عرض زیادی دارند (مثل Timeline) اکنون با تولبار جدید ما قابل کنترل هستند. می‌توانید روی آن‌ها زوم کنید یا جابجا شوید.

timeline
    title تحول تکنولوژی‌های وب
    1990 : HTML : پیدایش وب
    2000 : CSS & JS : استایل‌دهی و تعامل
    2010 : React & Tailwind : عصر فریمورک‌های مدرن
    2020 : AI & Agents : هوش مصنوعی در توسعه

graph TD
    subgraph "روسیه 1917"
        A1["امپراتوری تزاری"] --> B1["جنگ جهانی اول"]
        B1 --> C1["فروپاشی"]
    end

    subgraph "ایران 1979"
        A2["سلطنت پهلوی"] --> B2["انقلاب اسلامی"]
        B2 --> C2["جمهوری اسلامی"]
    end

    style C1 fill:#ff0000,color:#fff
    style C2 fill:#0000ff,color:#fff

نتیجه‌گیری

پیشنهاد من استفاده از حالت ۲ است. این حالت باعث می‌شود مقالات شما در آینده اگر تم یا ساختار سایت عوض شود، بدون تغییر کد، همیشه درست نمایش داده شوند.