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

مقدمه

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

نمودار یک فروشگاه: بردن نشانگر روی یک رابطه، افزودن یک ستون و تمرکز روی 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> بدون وابستگی به فریم‌ورک؛ نصب را ببینید
عامل‌های کدنویسی@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 را در هر جایی که نمودارها را به اشتراک می‌گذارید به‌روزرسانی کنید: نسخه‌ای که پیش از معرفی گروه‌های جدول منتشر شده است، در فایلی که نسخهٔ فعلی ذخیره کرده است هیچ نماد کلید اصلی نشان نمی‌دهد و ذخیرهٔ فایل در آنجا، گروه‌های جدول و اسکریپت‌های طرح‌واره 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، منتقل می‌کند.
  • یک طرح‌وارهٔ موجود را از json، Schema SQL، GraphQL، DBML یا AML وارد کنید. وارد کردن یا صادر کردن فایل‌ها را ببینید. فایل طرح‌واره SQL، GraphQL، DBML یا AML با جدول‌هایی وارد می‌شود که در امتداد رابطه‌هایشان چیده شده‌اند، یا اگر رابطه‌ای نداشته باشد، در چند ردیف. Import and Add فایل را به‌جای جایگزین کردن نمودار، زیر آن اضافه می‌کند.
  • نمودار را به‌صورت json صادر کنید؛ به‌صورت طرح‌واره SQL از زبانهٔ طرح‌واره SQL، که به‌صورت فایل .sql ذخیره یا کپی می‌شود؛ یا از کادر گفت‌وگوی Export image به‌شکل تصویر PNG یا SVG، یا PNG در کلیپ‌بورد.
  • طرح‌واره 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 را فشار دهید تا روی جدول‌های انتخاب‌شده و جدول‌های مرتبط با آن‌ها تمرکز کنید.
  • روی بومی بی‌مرز کار کنید: نما را به هر جایی که نمودار امتداد می‌یابد جابه‌جا کنید، سطح بزرگ‌نمایی را با 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، که در آن‌ها هر تغییر همان لحظه که رخ می‌دهد روی بوم نمایان می‌شود، یا در خود فایل.
  • در برنامهٔ وب به‌صورت بلادرنگ با هم ویرایش کنید (آزمایشی). نشست‌ها همتابه‌همتا و با رمزگذاری سرتاسری هستند، بنابراین هیچ سروری طرح‌وارهٔ شما را نگه نمی‌دارد و همتاها نشانگرهای ماوس، فوکوس و انتخاب‌های یکدیگر را می‌بینند. در صفحهٔ خودتان، getSharedStore() همان دنبالهٔ کنش‌ها را روی لایهٔ انتقالی که خودتان انتخاب می‌کنید در اختیارتان می‌گذارد.

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

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

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