پرش به محتوای اصلی

مقدمه

erd-editor یک ویرایشگر نمودار موجودیت-رابطه است. این ویرایشگر به‌صورت برنامهٔ وب، برنامهٔ Google Drive، افزونهٔ VS Code، پلاگین IntelliJ، پلاگین Obsidian و نیز به‌صورت عنصر سفارشی <erd-editor> که می‌توانید آن را در صفحهٔ خودتان جاسازی کنید، در دسترس است، و <erd-viewer> در کنار آن برای نشان دادن نمودار به‌صورت فقط خواندنی. سایتی که هیچ اسکریپت خودش را بارگذاری نمی‌کند می‌تواند به‌جای آن یک نمودار فقط خواندنی را از erd-editor.io/embed در یک قاب بگذارد. ویرایشگر و قالب سند در همهٔ آن‌ها یکی است.

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

از کجا دریافت کنید​

پلتفرمنصبآنچه به دست می‌آورید
برنامهٔ وبerd-editor.ioPWA قابل نصب، کار به‌صورت آفلاین، همکاری بلادرنگ
Google DriveGoogle Workspace Marketplaceافزودن ERD Editor به منوهای Open with و New در Drive و ذخیره در همان فایل
VS CodeMarketplaceباز کردن فایل‌های .erd.json در یک ویرایشگر سفارشی
IntelliJJetBrains Marketplaceهمان ویرایشگر، برای IDEهای مبتنی بر IntelliJ
ObsidianCommunity pluginsباز کردن فایل‌های .erd و .erd.json در زبانه‌ای از خزانه، فقط روی دسکتاپ
صفحهٔ خودتانnpm install @dineug/erd-editorعنصر سفارشی <erd-editor> بدون وابستگی به فریم‌ورک، و <erd-viewer> که نمودار را فقط خواندنی نشان می‌دهد؛ نصب و ErdViewerElement را ببینید
هر سایتerd-editor.io/embedیک نمودار فقط خواندنی در یک iframe، از نشانی یک سند و بدون کد؛ جاسازی را ببینید
عامل‌های کدنویسی@dineug/erd-editor-mcpیک سرور MCP که به Claude Code، Codex یا کلاینتی دیگر امکان می‌دهد نمودار را به‌صورت زنده در VS Code، یک IDE از JetBrains یا Obsidian، یا در خود فایل ویرایش کند

برای امتحان کردن آن در یک IDE، یک فایل خالی با پسوند .erd.json ایجاد کنید و آن را باز کنید. در Obsidian، فرمان ERD Editor: Create new diagram را از پالت فرمان اجرا کنید یا گزینهٔ New ERD را از منوی زمینهٔ یک پوشه در کاوشگر فایل انتخاب کنید. هر یک از این دو، یک فایل خالی .erd ایجاد می‌کند و آن را باز می‌کند. در Google Drive، New → More → ERD Editor را انتخاب کنید و سپس با Google وارد شوید. ERD Editor فقط به فایل‌هایی دسترسی دارد که با آن ایجاد می‌کنید یا باز می‌کنید. در برنامهٔ وب، Google Drive، VS Code، یک IDE از JetBrains و Obsidian، نمودار جدید و خالی با صفحهٔ خوش‌آمد باز می‌شود که منویی از گام‌های نخست است: New Table، New Memo، Import، Command Palette و Shortcuts. پیمایش، بزرگ‌نمایی، جابه‌جایی میان زبانه‌ها و تغییر نمایش نام‌ها فایل خالی یک نمودار جدید را همان‌طور که هست باقی می‌گذارند، زیرا در نمودار جدید همهٔ قفل‌ها روشن هستند. قفل را ببینید. VS Code فایل ERD را در Source Control، Local History، Compare with Saved، بازبینی ویرایش‌های چت VS Code و عامل‌های کدنویسی مانند GitHub Copilot و Claude Code و نیز در نماهای نسخه‌ها در افزونه‌هایی مانند GitLens، GitHub Pull Requests و Git Graph به‌صورت متن JSON باز می‌کند، بنابراین تفاوت‌های هر تغییر خط به خط نمایش داده می‌شود. Reopen Editor With... نسخه‌ای ثبت‌شده در Git را به‌صورت نمودار فقط خواندنی نمایش می‌دهد.

پس از به‌روزرسانی پلاگین Obsidian، Obsidian را دوباره راه‌اندازی کنید: تا آن زمان، پنجره همان ویرایشگری را نگه می‌دارد که نسخهٔ قبلی بارگذاری کرده بود. ERD Editor و @dineug/erd-editor-mcp را در هر جایی که نمودارها را به اشتراک می‌گذارید به‌روزرسانی کنید. نسخه‌ای از پیش از زبانهٔ واژه‌نامه، یا سرور MCP قدیمی‌تری که فایلی را روی دیسک ویرایش می‌کند، نمودار را بدون نام‌های منطقی، پیوندهای دامنه و واژه‌نامه‌هایش ذخیره می‌کند. نسخه‌ای که پیش از معرفی گروه‌های جدول منتشر شده است نیز در فایلی که نسخهٔ فعلی ذخیره کرده است هیچ نماد کلید اصلی نشان نمی‌دهد و ذخیرهٔ فایل در آنجا، گروه‌های جدول و اسکریپت‌های طرح‌واره SQL آن را از بین می‌برد. فایلی که نسخه‌ای قدیمی‌تر ذخیره کرده باشد، با نخستین تغییری که در فایل ثبت می‌شود به شکل فعلی بازنویسی می‌شود؛ قفل را ببینید. این ذخیره همچنین متن‌های خالی، فهرست‌ها و مجموعه‌هایی را که نسخهٔ قدیمی‌تر نوشته بود حذف می‌کند، بنابراین بخشی بیش از آنچه ویرایش تغییر داده است از فایل را تغییر می‌دهد. تا آن زمان، هر ویرایشگر JSON که فایلی از نسخه‌ای پیش از معرفی گروه‌های جدول را با $schema آن اعتبارسنجی کند، آن را نامعتبر گزارش می‌کند.

قابلیت‌ها​

  • جدول‌ها، ستون‌ها و یادداشت‌ها را روی یک بوم بی‌کران رسم کنید و آن‌ها را با چهار نوع رابطه به هم وصل کنید: Zero One، Zero N، One Only، One N. شروع ویرایش را ببینید. شاخص‌ها در پنل ویژگی‌های جدول تعریف می‌شوند. شاخص یکتایی که روی دو ستون یا بیشتر تعریف شده باشد یک کلید جایگزین است و وقتی گزینهٔ نمایش Alternate Key روشن باشد، نمودار ستون‌های آن را با AK1.1، AK1.2 و غیره علامت‌گذاری می‌کند. شاخص‌ها و کلیدهای جایگزین را ببینید.
  • رابطه را روی ستون‌هایی که جدول از قبل دارد به پایان برسانید: هنگامی که رابطه‌ای را با ماوس یا قلم رسم می‌کنید، دکمهٔ Map to existing columns در کنار جدولی که رابطه به آن ختم می‌شود، کلید جدول والد را با ستون‌های آن جدول جفت می‌کند و Create new columns ستون‌های جدیدی اضافه می‌کند. گزینهٔ Map Columns در منوی زمینهٔ رابطه، ستون‌های آن را بعداً تغییر می‌دهد. نگاشت ستون‌ها را ببینید. رابطه می‌تواند کنش‌های ON DELETE و ON UPDATE را نیز داشته باشد. ON DELETE و ON UPDATE را ببینید.
  • سریع ویرایش کنید: Alt + N یک جدول اضافه می‌کند؛ Alt + Enter یک ستون اضافه می‌کند؛ Alt + K کلید اصلی را روی ستون دارای فوکوس، یا اگر آن ستون یکی از ستون‌های انتخاب‌شده باشد روی همهٔ ستون‌های انتخاب‌شده، روشن و خاموش می‌کند؛ و Delete یا Backspace موارد انتخاب‌شده را حذف می‌کند. هر کدام یک گام واگرد است. میان‌برها را ببینید. نوار ابزار بوم در پایین بوم نیز با یک کلیک یک جدول یا یک یادداشت اضافه می‌کند.
  • یک جدول، یادداشت یا گروه جدول را با انتخابگر رنگی که رنگ‌های آماده و رنگ‌هایی را که نمودار از قبل به کار می‌برد در خود دارد، رنگ کنید و رنگ را با No color یا Remove color حذف کنید. تعیین رنگ جدول و یادداشت را ببینید.
  • جدول‌های مرتبط را در گروه‌های جدول گرد آورید: کادری پشت آن‌ها که می‌توانید برایش نام و رنگ تعیین کنید. گروه را با Alt + G یا با New Table Group از منوی زمینهٔ بوم، نوار ابزار بوم یا جست‌وجوی سریع رسم کنید، یا با T و سپس G یا با Group selected tables در منوی زمینهٔ جدول‌های انتخاب‌شده، از آن‌ها یک گروه بسازید. وقتی جدولی را درون گروه رها کنید به آن می‌پیوندد و وقتی آن را بیرون از گروه رها کنید از آن خارج می‌شود، و کشیدن گروه از نوار عنوانش، جدول‌های آن را همراه با آن جابه‌جا می‌کند. DBML گروه‌ها را در هر دو جهت، به‌صورت بلوک‌های TableGroup، منتقل می‌کند.
  • به جدول‌ها و ستون‌ها نام‌های منطقی بدهید، یعنی نام‌هایی که افراد می‌خوانند، مانند Customer Name برای CUST_NM، در کنار نام‌های فیزیکی‌ای که طرح‌واره SQL و مولد کد می‌نویسند. نمایش نام‌ها (Physical Names، Logical Names یا Both Names) تعیین می‌کند که بوم کدام یک را نشان دهد، و بیشتر جاهای دیگری که یک جدول یا ستون را نام می‌برند، مانند ردیف‌های جدول و ستون در کاوشگر، حالت جریان و تصویر صادرشده، از آن پیروی می‌کنند. آن را از دکمهٔ Name View در نوار ابزار بوم، منوی زمینهٔ بوم، نوار ابزار مصورسازی در حالت Flow یا جست‌وجوی سریع انتخاب کنید.
  • استاندارد نام‌گذاری نمودار را در زبانهٔ واژه‌نامه نگه دارید. برگه‌های Domains، Words و Terms آن مانند یک صفحه‌گسترده جست‌وجو، مرتب و ویرایش می‌شوند و هر کدام تاریخچهٔ واگرد جداگانهٔ خود را دارند. برگه‌ها CSV را وارد و صادر می‌کنند: وارد کردن، قالب خود ویرایشگر یا قالب استاندارد داده‌های عمومی کره را با UTF-8 یا EUC-KR می‌خواند، و صادر کردن قالب خود ویرایشگر را می‌نویسد. خانهٔ نام منطقی نام اصطلاحات را تکمیل می‌کند. یک نام منطقی، تا وقتی که خودتان نام را ننوشته‌اید، از اصطلاح منطبق، یا از اختصارهای واژه‌هایی که به آن‌ها تقسیم می‌شود، به جدول یا ستون خود یک نام فیزیکی می‌دهد. پس از تغییر یک واژه یا اصطلاح، Derive Physical Names Again نام‌ها را دوباره استخراج می‌کند، از جمله نام‌هایی که خودتان نوشته‌اید. ستونی که دستی یا از طریق اصطلاحش به یک دامنه پیوند خورده است، نوع دادهٔ دامنه را می‌گیرد و از تغییرات آن پیروی می‌کند، و گزینهٔ نمایش Domain دامنهٔ هر ستون را نشان می‌دهد. برگهٔ Checks واژه‌های ممنوع، ثبت‌نشده و مترادف، نام‌های تکراری، دامنه‌های ناشناخته، نام‌های فیزیکی‌ای که با نام اصطلاحشان متفاوت‌اند و انواع ستونی را که با نوع دامنه‌شان متفاوت‌اند فهرست می‌کند. بوم نام‌های منطقی و فیزیکی‌ای را که بررسی‌های واژه و اصطلاح نشانه‌گذاری می‌کنند رنگی می‌کند.
  • یک طرح‌وارهٔ موجود را از json، Schema SQL، GraphQL، DBML یا AML وارد کنید. وارد کردن یا صادر کردن فایل‌ها را ببینید. فایل طرح‌واره SQL، GraphQL، DBML یا AML با جدول‌هایی وارد می‌شود که در امتداد رابطه‌هایشان چیده شده‌اند، یا اگر رابطه‌ای نداشته باشد، در چند ردیف. Import and Add فایل را به‌جای جایگزین کردن نمودار، زیر آن اضافه می‌کند.
  • نمودار را به‌صورت json صادر کنید؛ به‌صورت طرح‌واره SQL از زبانهٔ طرح‌واره SQL، که به‌صورت فایل .sql ذخیره یا کپی می‌شود؛ یا از کادر گفت‌وگوی Export image به‌شکل تصویر PNG یا SVG، یا PNG در کلیپ‌بورد.
  • یک نمودار را در سایتی دیگر فقط خواندنی نشان دهید: erd-editor.io/embed را با نشانی یک فایل، از جمله فایلی در GitHub، در یک قاب بگذارید، یا عنصر <erd-viewer> را در صفحهٔ خودتان بارگذاری کنید. خواننده نمودار را جابه‌جا می‌کند، بزرگ‌نمایی می‌کند، جست‌وجو می‌کند و رابطه‌ها را روشن می‌کند، و هیچ‌چیز نمودار را ویرایش نمی‌کند.
  • طرح‌واره SQL را با نحو هشت سامانهٔ پایگاه داده بنویسید: Databricks، MSSQL، MariaDB، MySQL، Oracle، PostgreSQL، Snowflake و SQLite. قابلیت‌های مربوط به جدول را ببینید. پنل گزینه‌های زبانهٔ طرح‌واره SQL دستورها، سرآیند و گروه‌های جدولی را که باید نوشته شوند انتخاب می‌کند، می‌تواند نام‌های منطقی را در توضیحات خالی بنویسد و SQL خودتان را، که در نمودار ذخیره می‌شود، برای نوشتن پیش و پس از جدول‌ها نگه می‌دارد.
  • برای بیست‌ودو هدف کد تولید کنید: زبان‌های C#، Go، Java، Kotlin، PHP، Rust، Scala، Swift و TypeScript؛ ابزارهای ORM یعنی Doctrine، Drizzle، JPA، SeaORM، Sequelize، SQLAlchemy و TypeORM؛ و AML، DBML، GraphQL، JSON Schema، Mermaid و Zod. پنل گزینه‌های زبانهٔ مولد کد، زبان کد، پایگاه داده و شیوه‌های نگارش نام را انتخاب می‌کند و کد به‌صورت فایلی با پسوند آن زبان ذخیره یا کپی می‌شود. مولد کد را ببینید.
  • طرح‌واره را در مصورسازی بخوانید، به‌صورت Graph نیرومحور یا به‌صورت Flow از کارت‌های جدول که در امتداد رابطه‌هایشان چیده شده‌اند؛ در آنجا بردن نشانگر روی یک جدول، هر چیزی را که به آن متصل است برجسته می‌کند. در زبانهٔ ERD، Alt + F را فشار دهید تا روی جدول‌های انتخاب‌شده و جدول‌های مرتبط با آن‌ها تمرکز کنید. در حالت Flow، Previous table و Next table در میان آنچه حالت جریان به آن محدود شده است گام به عقب و گام به جلو برمی‌دارند، همان‌طور که کلیدهای واگرد و ازنو در آنجا چنین می‌کنند.
  • روی بومی بی‌مرز کار کنید: نما را به هر جایی که نمودار امتداد می‌یابد جابه‌جا کنید، سطح بزرگ‌نمایی را با Ctrl + Wheel (⌘ + Wheel در Mac)، صفحه‌کلید یا حرکت دوانگشتی از 10% تا 150% تغییر دهید و با حالت ذن همه چیز جز نمودار را پنهان کنید. کشیدن با دکمهٔ میانی ماوس، نما را از هر جای بوم، حتی روی یک جدول، جابه‌جا می‌کند. حرکت در بوم را ببینید.
  • کل نمودار را در یک گام با چیدمان خودکار مرتب کنید: شبیه‌سازی نیرو، جریان چپ‌به‌راست یا درختی در هر یک از دو جهت، در حالی که هر گروه جدول یکجا نگه داشته می‌شود.
  • با جست‌وجوی سریع از هر جایی یک فرمان اجرا کنید، یا جست‌وجو را با #، @ یا : آغاز کنید تا به یک جدول، به یک ستون یا به یک توضیح یا یادداشت بروید؛ # و @ با نام‌های منطقی نیز تطبیق می‌یابند. با واگرد، ازنو گام‌به‌گام در تاریخچهٔ ویرایش حرکت کنید، با سفر در زمان تاریخچهٔ این نشست را روی بوم بازپخش کنید یا نمودار را در نمایشگر تفاوت‌ها با یک فایل .json دیگر مقایسه کنید. درخت آن، در کنار دو نسخه، جدول‌ها، ستون‌ها، شاخص‌ها، کلیدهای خارجی، یادداشت‌ها و گروه‌های جدولی را فهرست می‌کند که افزوده شده‌اند، تغییر کرده‌اند، حذف شده‌اند یا تغییر نام یافته‌اند.
  • نمودار را در کاوشگر مرور کنید، درختی که در سمت چپ بوم جای گرفته است: جدول‌ها، هر یک با ستون‌ها، شاخص‌ها و کلیدهای خارجی‌اش، سپس گروه‌های جدول و یادداشت‌ها. روی یک ردیف کلیک کنید تا به چیزی بروید که آن ردیف روی بوم نشان می‌دهد؛ ردیف کلید خارجی، رابطهٔ خود را نیز برجسته می‌کند. دکمهٔ Explorer در نوار ابزار، کنار Search، آن را باز و بسته می‌کند.
  • با یافتن و جایگزینی در بالای کاوشگر، متن را بیابید. این قابلیت نام جدول‌ها، ستون‌ها، شاخص‌ها و گروه‌های جدول، نام‌های منطقی جدول‌ها و ستون‌ها و نیز، پس از روشن کردنشان، توضیحات و یادداشت‌ها را جست‌وجو می‌کند و موارد منطبق را در درخت کاوشگر نشان می‌دهد. یک مورد منطبق یا همهٔ آن‌ها را جایگزین کنید؛ Preserve Case به هر جایگزینی، بزرگی و کوچکی حروف متنی را می‌دهد که جایگزین آن می‌شود. Ctrl + F (⌘ + F در Mac) کاوشگر را با مکان‌نما در فیلد یافتن باز می‌کند و فشار دادن دوبارهٔ آن، کاوشگر را می‌بندد.
  • از ویرایشگر به 25 زبان استفاده کنید که از دکمهٔ Display Language در نوار ابزار یا از جست‌وجوی سریع انتخاب می‌شوند. System از زبان مرورگر یا برنامهٔ میزبان پیروی می‌کند و در عربی، عبری و فارسی، چیدمان ویرایشگر راست‌به‌چپ می‌شود، در حالی که نمودار چپ‌به‌راست می‌ماند. فقط متن خود ویرایشگر تغییر می‌کند: نام‌ها، SQL و کد تولیدشده همان‌طور که نوشته شده‌اند می‌مانند. سازندهٔ طرح زمینه در نوار ابزار، ظاهر (System، Light یا Dark)، یک رنگ خاکستری و یک رنگ تأکیدی را انتخاب می‌کند. زبان و طرح زمینه را ببینید.
  • تفاوت‌ها را تمیز نگه دارید: موقعیت پیمایش و بزرگ‌نمایی، زبانهٔ باز، زبان کد و شیوه‌های نگارش نام در مولد کد، نوع علامت نقل‌قول و نمایش نام‌ها به‌طور پیش‌فرض قفل‌شده هستند، بنابراین فایل مقادیری را نگه می‌دارد که این موارد هنگام قفل شدن داشتند و پیمایش، بزرگ‌نمایی، جابه‌جایی میان زبانه‌ها یا تغییر نمایش نام‌ها هرگز آن را تغییر نمی‌دهد. فایل با ترتیبی ثابت، با یک خط برای هر ردیف واژه‌نامه، نوشته می‌شود و عرض‌های اندازه‌گیری‌شده، ترتیب لایه‌ها، نقاط لنگر خط‌های اتصال، موارد حذف‌شده، متن خالی هر مورد و فهرست‌ها و مجموعه‌های نوعی را که نمودار هیچ موردی از آن ندارد در خود ندارد، بنابراین باز کردن نمودار و بستن آن بدون ویرایش، فایل را همان‌طور که بود باقی می‌گذارد.
  • بگذارید یک عامل کدنویسی مانند Claude Code یا Codex نمودار را از طریق سرور MCP ویرایش کند: به‌صورت زنده در VS Code، Obsidian یا یک IDE از JetBrains، که در آن‌ها هر تغییر همان لحظه که رخ می‌دهد روی بوم نمایان می‌شود، یا در خود فایل. این عامل همچنین می‌تواند نام‌های منطقی و دامنه‌های ستون‌ها را تنظیم کند، واژه‌نامه‌ها را ویرایش کند، نام‌های فیزیکی را دوباره استخراج کند و آنچه را برگهٔ Checks می‌یابد فهرست کند.
  • در برنامهٔ وب به‌صورت بلادرنگ با هم ویرایش کنید (آزمایشی). نشست‌ها همتابه‌همتا و با رمزگذاری سرتاسری هستند، بنابراین هیچ سروری طرح‌وارهٔ شما را نگه نمی‌دارد و همتاها نشانگرهای ماوس، فوکوس و انتخاب‌های یکدیگر را می‌بینند. در صفحهٔ خودتان، getSharedStore() همان دنبالهٔ کنش‌ها را روی لایهٔ انتقالی که خودتان انتخاب می‌کنید در اختیارتان می‌گذارد، و @dineug/erd-editor-yjs نمودار را از طریق یک سند Yjs و هر فراهم‌کننده‌ای که آن را حمل کند همگام نگه می‌دارد، از جمله ویرایش‌های آفلاین و حضور.

از راهنمای ویرایش شروع کنید.

انگیزهٔ این پروژه​

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