برنامه نویسی

نمودارهای ارتباط موجودیت مبتنی بر متن با Mermaid.js

نمودارهای رابطه موجودیت (ERD) روش های ساده و موثری برای برقراری ارتباط با طراحی پایگاه داده رابطه ای هستند.

در این مقاله بررسی خواهیم کرد که نمودارهای رابطه موجودیت چیست و چگونه Mermaid.js ایجاد و نگهداری ERD برای برنامه های شما را با هزینه صفر آسان می کند.

ERD ساخته شده در Visual Paradigm Online

در حالی که ابزارهای زیادی وجود دارد که به شما کمک می کند یک نمودار روابط موجودیت زیبا و صیقلی ایجاد کنید، مانند آنچه در بالا با استفاده از Visual Paradigm Online ایجاد کردم، این ابزارها معمولاً چند مشکل دارند:

  • ابزارهای ERD اغلب نیاز به پرداخت یا تشویق به پرداخت به صورت یکباره یا اشتراکی دارند
  • کار با ابزارهای ERD گاهی اوقات می تواند مانند یک مبارزه برای تنظیم نمودار کامل و درک قراردادهای ابزار به نظر برسد.
  • کنترل نسخه‌های ERD سخت است، معمولاً باید تصویر و فایل‌های به‌دست‌آمده را مجزا کنید و از دیگر توسعه‌دهندگان می‌خواهد به ابزارهایی که در ابتدا برای ایجاد نمودار استفاده کرده‌اید دسترسی داشته باشند.

خوشبختانه، Mermaid.js به ما امکان می دهد نمودارهای رابطه موجودیت را در فایل های متنی قابل خواندن توسط انسان ایجاد و نسخه کنیم.

Mermaid.js چیست؟

قبل از اینکه جلوتر برویم، بیایید در مورد اینکه Mermaid.js چیست و چگونه به آن دسترسی دارید صحبت کنیم.

Mermaid.js یک کتابخانه جاوا اسکریپت منبع باز است که به شما امکان می دهد انواع مختلفی از نمودارها را از متن فرمت شده خاص تولید کنید.

در حالی که می توانید جاوا اسکریپت را برای پشتیبانی از نمودارهای Mermaid در هر وب سایتی اضافه کنید، Mermaid همچنین در انواع ابزارهای موجود از جمله:

ساده ترین راه برای آزمایش mermaid احتمالاً ایجاد یک فایل md. در GitHub و سپس اضافه کردن یک بلوک پری دریایی به سند خود مانند شکل زیر است:

ERD ساده در GitHub

همچنین می‌توانید Mermaid را در هر زمانی با رفتن به Mermaid.live و ایجاد سند بدون نیاز به ورود امتحان کنید.

این بدان معنی است که Mermaid در بسیاری از ابزارهایی که قبلاً در اکوسیستم خود استفاده می کنید بسیار در دسترس است، اما همچنین به اندازه کافی انعطاف پذیر است تا به وبلاگ یا وب سایت شما اضافه شود.

ایجاد یک نمودار رابطه موجودیت با Mermaid.js

بیایید یک نمودار رابطه موجودیت ساده ایجاد کنیم که شهرهای ایالت ها یا استان های مختلف را در کشورهای مختلف جهان ردیابی می کند.

ما این کار را با کار در چهار مرحله انجام خواهیم داد:

  1. تعریف نهادهای ما
  2. افزودن روابط بین موجودیت ها
  3. افزودن ویژگی ها / فیلدها به موجودیت های ما
  4. افزودن کلیدهای اصلی و خارجی به نهادهای ما

ایجاد موجودیت ها

ابتدا، می‌توانیم با شناسایی موجودیت‌های خود، یک نمودار رابطه موجودیت ساده ایجاد کنیم. در مورد ما، شهر، ایالت، و نهادهای کشور را مشخص می کنیم. این موجودیت ها بعداً به جداول در پایگاه داده رابطه ای ما تبدیل خواهند شد.

ما با اضافه کردن یک نمودار رابطه موجودیت در علامت گذاری شروع می کنیم:

erDiagram
    CITY
    STATE
    COUNTRY
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این یک نمودار نسبتاً ساده با سه موجودیت جداگانه به عنوان جعبه ایجاد می کند:

نمودار پری دریایی با 3 جعبه

افزودن روابط بین موجودیت ها

بعد، روابط بین سه جدول خود را تعریف می کنیم.

ما این کار را با نماد “پای کلاغ” انجام می دهیم. با پای کلاغی، نحوه ارتباط موجودیت ها با یکدیگر را از نظر روابط یک به یک و یک به چند توضیح می دهید.

به عنوان مثال، نمودار زیر رابطه بین کشورها و ایالت ها یا استان ها را نشان می دهد:

رابطه ساده

در اینجا، یک کشور حداقل یک ایالت یا استان دارد و یک ایالت دارای یک و تنها یک استان است.

هنگام خواندن نماد “پای کلاغ” از یک موجود شروع می کنید و سپس خط آن را تا موجودیت دیگر دنبال می کنید و به جفت خطوط نزدیک موجودیت دیگر نگاه می کنید.

برای مثال، وقتی از COUNTRY شروع می‌کنیم، از این دو می‌گذریم || خطوط و به جای آن نگاه کنید |{ خطوط نزدیک ایالت. این سطور می گوید که یک کشور حداقل یک ایالت در داخل خود دارد، اما احتمالاً بسیاری از آنها.

اگر بجای آن بخواهیم بگوییم که یک کشور ممکن است بدون هیچ دولتی در آن وجود داشته باشد، این یک است O{ نوع پایان و به شکل زیر است:

نمودار رابطه ساده

در Mermaid.js، ما می توانیم روابط خود را با خطوطی مانند این شرح دهیم: COUNTRY ||--|{ STATE اینکه بگوییم یک کشور یک یا چند ایالت دارد و یک ایالت یک و تنها یک کشور دارد.

پایان های پشتیبانی شده ما برای خطوط خود به شرح زیر است:

  • O| – صفر یا یک
  • || – یک و تنها یکی
  • O{ – صفر یا زیاد
  • |{ – یکی یا چندتا

همچنین می‌توانیم یک : و سپس یک رشته که رابطه ما را بعد از هر رابطه توصیف می‌کند اضافه کنیم تا آن را در نمودار توصیف کنیم.

نمودار روابط موجودیت ما برای ایالت ها و کشورها به شرح زیر است:

erDiagram
    COUNTRY
    STATE
    CITY
    COUNTRY ||--|{ STATE : "Has"
    STATE ||--|{ CITY : "Has"
    CITY ||--o| STATE : "Is capital of"
    CITY ||--o| COUNTRY : "Is capital of"
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

موجودیت های دارای روابط

با آن ما یک نمودار رابطه موجودیت در حال کار داریم!

توجه: از نظر فنی، اکنون که موجودیت‌های خود را با روابط توصیف می‌کنیم، دیگر نیازی نیست که موجودیت‌ها را در خطوط خود فهرست کنیم تا در نمودار گنجانده شوند. من آنها را در اینجا برای کامل بودن و برای اینکه مرحله بعدی منطقی تر باشد، درج می کنم.

افزودن فیلدها به نمودار رابطه موجودیت ما

اگر تنها چیزی که می‌خواستیم مدل‌سازی کنیم، موجودیت‌های موجود در سیستم‌مان بود، می‌توانستیم اعلام پیروزی کنیم و ادامه دهیم. با این حال، اغلب می خواهید فیلدها / ستون ها / ویژگی های جداول پایگاه داده خود را در نمودارهای رابطه موجودیت خود نشان دهید.

کد اضافه کردن فیلدها به ERD شما نسبتاً ساده است. به جای اینکه نام نهاد را به تنهایی فهرست کنیم، اضافه می کنیم { } بعد از آن و سپس صفات فردی آن موجودیت را در خطوط جداگانه به همراه انواع داده آنها فهرست کنید.

برای مثال، CITY ممکن است به صورت زیر نمایش داده شود:

    CITY {
        int city_id
        string name
        string state_abbreviation
    }
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا ما موجودیت مورد نظر خود را اعلام می کنیم، سپس ویژگی های موجود در آن موجودیت را با نوع آن ویژگی قبل از نام آن لیست می کنیم.

کد نمودار رابطه کامل موجودیت اکنون تبدیل به:

erDiagram
    CITY {
        int city_id
        string name
        string state_abbreviation
    }
    STATE {
        string state_abbreviation
        string name
        int country_id
    }
    COUNTRY {
        int country_id
        string name
    }
    COUNTRY ||--|{ STATE : "Has"
    STATE ||--|{ CITY : "Has"
    CITY ||--o| STATE : "Is capital of"
    CITY ||--o| COUNTRY : "Is capital of"
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ERD با ویژگی ها

و دقیقاً مانند آن، ما داده ها را در موجودیت های خود تعریف کرده ایم!

افزودن کلیدهای اصلی و خارجی به ERD ما

آخرین مرحله در سفر ما اضافه کردن کلیدهای اولیه و خارجی به نمودار روابط موجودیت است.

به عنوان یک بررسی، یک کلید اولیه به طور منحصر به فرد هر ردیف را در یک جدول پایگاه داده شناسایی می کند در حالی که یک کلید خارجی به یک کلید اصلی در جدول دیگر ارجاع می دهد و به پایگاه داده کمک می کند یکپارچگی ارجاعی را در درج ها، به روز رسانی ها و حذف ها حفظ کند.

می‌توانیم کلیدهای اصلی و کلیدهای خارجی را با افزودن یک PK یا FK بعد از نام ستون در کد ERD Mermaid.js به صورت زیر نشان دهیم:

erDiagram
    CITY {
        int city_id PK
        string name
        string state_abbreviation FK
    }
    STATE {
        string state_abbreviation PK
        string name
        int country_id FK
    }
    COUNTRY {
        int country_id PK
        string name
    }
    COUNTRY ||--|{ STATE : "Has"
    STATE ||--|{ CITY : "Has"
    CITY ||--o| STATE : "Is capital of"
    CITY ||--o| COUNTRY : "Is capital of"
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمودار رابطه موجودیت با PK / FKs

و با آن تغییر جزئی، اکنون نشانگرهای PK و FK را در نمودار رابطه موجودیت خود داریم.

توجه: اگر تا به حال به ستونی نیاز داشتید که بخشی از کلید اصلی و ثانویه باشد، می توانید هر دو را با کاما فهرست کنید. ردیف شما چیزی شبیه به زیر خواهد بود:

int some_id PK,FK

مراحل بعدی

برای برخی از ویژگی‌های اضافی، اطلاعات در مورد استایل‌سازی این نمودارها و هر به‌روزرسانی که پس از انتشار این مقاله اتفاق می‌افتد، اسناد کامل Mermaid.js Entity Relationship Diagrams را بررسی کنید.

من شخصاً قصد دارم از Mermaid.js برای نمودارهای ارتباط موجودیت خود در پروژه های شخصی آینده استفاده کنم و حتی ممکن است آنها را برای برخی از پروژه های بزرگتر شامل تیم ها در نظر بگیرم.

به نظر من ERD های Mermaid.js بصری و سبک هستند. نمودارهای ایجاد شده ممکن است به اندازه چیزی که من در ابزار دیگری بسازم زیبا نباشند، اما نگهداری آنها در طول زمان و به اشتراک گذاری با دیگران نیز بسیار آسان تر است. همچنین احساس می‌کنم که نیازی به نگرانی در مورد داشتن یک نمودار “عالی” تا حدودی آزاد نیست و این باعث آزاد شدن زمان من برای ساخت برنامه به جای ساختن اسناد زیبا می شود که به سرعت قدیمی و فراموش می شوند.

منتظر مطالب بیشتر در مورد دیگر ویژگی های Mermaid.js باشید!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا