موقعیت‌های نسبی در برابر مختصات پیکسلی در طراحی نمودارهای AI

تصور کنید یک عامل هوش مصنوعی می‌خواهد یک نمودار فنی را ویرایش کند، اما بین دو بن‌بست گیر کرده است: یا باید با چیدمان‌های خودکار و غیرقابل‌پیش‌بینی دست‌وپنجه نرم کند یا با مختصات پیکسلی سخت و انعطاف‌ناپذیر. طبق اعلام توسعه‌دهندگان، ابزار reladraw که در ۲۶ سپتامبر ۲۰۲۶ منتشر شد، این شکاف را با معرفی زبانی پر می‌کند که در آن موقعیت هر المان نسبت به المان دیگر تعریف می‌شود.

بسیاری از برنامه‌نویسان در حال حاضر از ابزارهایی مثل Mermaid، Graphviz یا D2 استفاده می‌کنند که چیدمان را به‌صورت خودکار انجام می‌دهند. این ابزارها به شما اجازه می‌دهند موجودیت‌ها و اتصالات را تعریف کنید و سپس سیستم هر چیز را هر کجا که بخواهد قرار می‌دهد. این قابلیت برای نمودارهای ساده عالی است، اما وقتی تصویر خاصی در ذهن دارید و جای هر المان برایتان مهم است، دیگر کارساز نیست. در این زبان‌ها راهی وجود ندارد تا بگویید یک ماژول خاص باید دقیقاً در سمت راست ماژول دیگر باشد و اتصالات آن دقیقاً به شکلی خاص قرار گیرند.

در نقطه مقابل، ابزارهایی مثل draw.io، Excalidraw یا Figma کنترل کامل روی جای‌گذاری را به شما می‌دهند، اما به قیمت این‌که هر ویرایش کوچک در یک نمودار پیچیده، به ساعت‌ها کار دستی تبدیل شود. این فرآیند نه‌تنها برای انسان‌ها کند است، بلکه برای یک عامل (Agent) — شبیه دستیاری که باید تمام نقشه را در ذهن داشته باشد تا یک نقطه را جابه‌جا کند — بسیار هزینه‌بر است؛ چون عامل باید ابتدا تصویر را از روی مختصات پیکسلی تحلیل کند تا بتواند تصمیم بگیرد کدام اعداد را تغییر دهد.

فرض کنید در حال ترسیم یک سیستم برای درک بهتر آن هستید و می‌خواهید یک گره پایگاه‌داده دقیقاً زیر درگاه API قرار بگیرد. در ابزارهای چیدمان خودکار، شما نمی‌توانید این دستور را بدهید و فقط امیدوارید الگوریتم همین تصمیم را بگیرد. در ابزارهای مختصات‌محور، جابه‌جایی یک گره یعنی محاسبه مجدد X و Y تمام المان‌های اطراف. همان‌طور که در تحلیل‌های قبلی ما درباره‌ی چالش‌های تعامل عامل‌ها با رابط‌های گرافیکی اشاره کردیم، حذف وابستگی به پیکسل‌ها کلید افزایش دقت است.

سازوکار جای‌گذاری نسبی

reladraw در نقطه تعادل این دو رویکرد قرار دارد. در این ابزار، هیچ موقعیتی با مختصات تعریف نمی‌شود و هر چیز نسبت به چیز دیگری بیان می‌شود. این سیستم از یک حل‌کننده (Resolver) قطعی استفاده می‌کند که بر اساس حداقل فاصله‌ها، فشرده‌ترین چیدمان ممکن را محاسبه می‌کند.

به نقل از مستندات پروژه، یک فایل reladraw می‌تواند شامل جملاتی مانند این‌ها باشد:

• node app "Web app"
• node app.ui "Interface"
• node app.api "API" below app.ui
• node store "Database" right of app level with app
• edge app.api -> store "queries" from: right to: left

در این زبان هیچ تودرفتی (Nesting) وجود ندارد؛ یعنی هیچ خطی به موقعیت یا تورفتگی خط دیگر وابسته نیست. این رویکرد تضمین می‌کند که چیدمان به‌طور صریح در فایل منبع نوشته شده است. در یک مورد آزمایشی با استفاده از فایل examples/arch.reladraw مشاهده شد که نموداری متشکل از ۴۴ دستور، بدون داشتن حتی یک مختصات در هیچ کجای فایل، تمام فاصله‌ها را از طریق جملاتی مثل «بالا-چپِ خوشه hub» یا «بین دسکتاپ ۱ و لپ‌تاپ ۱» به‌درستی محاسبه کرد.

حل‌کننده چگونه کار می‌کند؟

برخلاف موتورهای چیدمان که از روش‌های جست‌وجو یا آزمون و خطا استفاده می‌کنند، reladraw هر فاصله را به عنوان «حداقل فاصله» می‌بیند، نه یک عدد دقیق. اگر دو المان کنار هم باشند و المان سومی بین آن‌ها قرار بگیرد، دو المان اول دقیقاً به اندازه نیازِ المان سوم از هم فاصله می‌گیرند. اگر المان سوم حذف شود، آن‌ها دوباره به هم نزدیک می‌شوند. این سازوکار نیاز به «هل دادن» یا «کشیدن» دستی المان‌ها را که انسان‌ها برای جلوگیری از ایجاد حفره در نمودار انجام می‌دهند، از بین می‌برد و تضمین می‌کند که با رشد متن، هیچ عددی قدیمی و نامعتبر نشود.

هر محور به عنوان مجموعه‌ای از حداقل فاصله‌ها پردازش می‌شود. موتور با استفاده از «طولانی‌ترین مسیرها»، فشرده‌ترین چیدمان ممکن را که تمام این محدودیت‌ها را برآورده کند، می‌یابد. این یعنی یک پاسخ واحد بدون نیاز به جست‌وجو یا رد کردن چیدمان‌های احتمالی.

برای جلوگیری از هم‌پوشانی، ابزار جهت جداسازی را از چیدمان ذکرشده استخراج می‌کند. اگر فایلی ترتیب دو المان را در هیچ‌یک از محورها مشخص نکند، ابزار به‌جای حدس زدن، آن‌ها را نام‌گذاری می‌کند. اگر ترتیب آن‌ها در هر دو محور مشخص شده باشد، گره‌گشایی به نفع محوری انجام می‌شود که کمترین هم‌پوشانی (کوچک‌ترین جابه‌جایی) را دارد. این تنها جایی است که ابزار تصمیمی می‌گیرد که در منبع نوشته نشده است. هیچ چیزی به‌صورت تصادفی «تکان» نمی‌خورد؛ در هر دور، جداسازی‌های ضمنی استخراج شده، به عنوان حداقل فاصله اضافه می‌شوند و کل سیستم از ابتدا حل می‌شود.

چرا این موضوع برای عامل‌های هوش مصنوعی حیاتی است؟

برای یک عامل، مورد رایج این نیست که از صفر نمودار بکشد، بلکه باید یکی از نمودارهای موجود را تغییر دهد؛ مثلاً سرویس احراز هویت را به چپ منتقل کند و یک صف (Queue) پشت آن قرار دهد.

• در مختصات پیکسلی: عامل باید ابتدا تصویر را از روی اعداد بازسازی کند تا بفهمد کدام عدد را تغییر دهد.
• در چیدمان خودکار: چیزی برای خواندن وجود ندارد چون چیدمان هرگز نوشته نشده است؛ عامل فقط می‌تواند متن منبع را تغییر دهد و دوباره رندر کند.
• در reladraw: چیدمان به‌صورت جملات در فایل است. تغییر تصویر یعنی تغییر جمله‌ای که می‌گوید آن المان کجا قرار دارد.

نوشتن کد نیز همین ساختار را دارد. عاملی که با Mermaid کد می‌زند، در واقع در حال حدس زدن چیدمانی است که بعداً یک الگوریتم آن را تعیین می‌کند. تنها راه تأیید نتیجه، رندر کردن و دیدن تصویر است — مسیری طولانی که به‌جای لیست خطاها، یک عکس برمی‌گرداند. اما در reladraw، قصد کاربر قابل تأیید است. عامل می‌تواند فایل را بازخوانی کند و بدون نیاز به یک مدل بینایی (Vision Model)، بفهمد که پایگاه‌داده زیر API قرار دارد و هر چهار ماشین به هاب همگام‌سازی متصل هستند.

پیاده‌سازی فنی و ابزارها

این پروژه در حال حاضر در نسخه ۰.۴.۰ است و با زبان TypeScript به‌عنوان یک تجزیه‌کننده (Parser)، حل‌کننده و رندرساز SVG پیاده شده است و هیچ وابستگی در زمان اجرا (Runtime) ندارد. این ابزار یک رابط خط فرمان (CLI) دارد که فایل متنی را گرفته و یک SVG مستقل تولید می‌کند. مقایسه‌ای که در بالای صفحه پروژه آمده، نتیجه اجرای این خط لوله روی فایل examples/arch.reladraw است، جایی که تنها مشکلات باقی‌مانده مربوط به تایپوگرافی است و نه جای‌گذاری.

کاربران می‌توانند ابزار را از طریق npm نصب کنند:
npm install -g reladraw
reladraw diagram.reladraw -o diagram.svg

یا از طریق کلون کردن مخزن:
npm install && npm run build
node dist/cli.js examples/arch.reladraw -o out.svg

برای پر کردن شکاف دانش مدل‌های زبانی بزرگ (LLM) — مثل کتابخانه‌داری که میلیاردها صفحه را خوانده و حالا با همان لحن جواب می‌دهد — این مخزن یک «مهارت عامل» (Agent Skill) ارائه می‌دهد. چون reladraw برای داده‌های آموزشی مدل‌ها بسیار جدید است، این مهارت دستور زبان، زمان استفاده از زبان و مواردی که عامل می‌تواند یا نمی‌تواند با خواندن منبع تأیید کند را ارائه می‌دهد. این مهارت برای عامل‌هایی مثل Claude Code، Codex، Cursor و Copilot قابل نصب است:

• نصب سراسری: npx skills add reladraw/reladraw -g
• نصب برای پروژه: npx skills add reladraw/reladraw
• نصب برای عامل خاص: npx skills add reladraw/reladraw -g -a claude-code

از آنجایی که این مهارت در زمان نصب کپی می‌شود و لینک زنده نیست، کاربران باید پس از انتشار نسخه‌هایی که دستور زبان را تغییر می‌دهند، دستور را دوباره اجرا کنند. این مهارت یک فایل Markdown ساده به همراه مرجع دستور زبان است، بنابراین کپی دستی پوشه نیز به همان اندازه مؤثر است.

محدودیت‌های فعلی و نقشه راه

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

گزارش تشخیص (Diagnostics): در حال حاضر ابزار یا رندر می‌کند یا شکست می‌خورد. سیستم تشخیص در حال طراحی است تا گزارش‌های ماشین‌خوان از هندسه حل‌شده ارائه دهد. از آنجایی که هر چیزی که منبع نمی‌تواند بگوید، پس از حل هندسه قابل محاسبه است، ابزار موارد زیر را گزارش خواهد کرد:

• گره‌های هم‌پوشان (مثلاً: "hub overlaps laptop1")
• لبه‌های متقاطع (مثلاً: "edge auth->db crosses 4 edges")
• متنی که از ظرف خود بزرگتر شده است
• المان‌های خارج از کادر یا مناطق خالی بزرگ

این اجازه می‌دهد عامل بدون محاسبات پیکسلی یا مدل‌های بینایی، گزارش را بخواند و فایل متنی را ویرایش کند. طراحی سیستم به‌طور اکید مانع از این می‌شود که بررسی‌کننده گره‌ها را «تکان» دهد، زیرا این یک استراتژی جست‌وجوی بد است. در عوض، ابزار علامت را گزارش می‌کند و نویسنده (یا عامل) منبع را ویرایش می‌کند. ابزار دقیقاً نام جمله‌ای که باعث بروز مشکل شده را ذکر خواهد کرد.

مسیریابی لبه‌ها و دارایی‌ها:

• مسیریابی لبه‌ها: در حال حاضر لبه‌ها خطوط مستقیمی هستند که بین مراکز گره‌ها رسم می‌شوند و ممکن است از روی گره‌ها رد شوند. نسخه‌های آینده مسیریابی متعامد (Orthogonal Routing) با حداقل تداخل با گره‌ها را پشتیبانی خواهند کرد. این قابلیت اجازه می‌دهد مشخص شود لبه از کدام سمت گره خارج یا وارد شود و در کدام فاصله حرکت کند. مسیریابی و تشخیص مکمل یکدیگرند: مسیریابی آنچه را که می‌تواند اصلاح می‌کند و تشخیص‌ها مواردی را که اصلاح نشده گزارش می‌دهند.
• کتابخانه دارایی‌ها: آیکون‌ها و اشکال در حال حاضر مجموعه‌های بسته‌ای هستند که از داده‌های مسیر داخلی رسم می‌شوند. اگر نموداری به شکلی نیاز داشته باشد که در ابزار موجود نیست، در حال حاضر راهی برای افزودن آن وجود ندارد.

فلسفه طراحی و مقایسه

هدف نسخه اول، یک حل‌کننده قطعی (ورودی حداقل فاصله‌ها، خروجی فشرده‌ترین چیدمان)، یک رندرساز SVG استاتیک و یک گرامر جای‌گذاری است که قادر به بیان نیازهای دنیای واقعی باشد، مانند چندین جای‌گذاری روی یک گره یا تراز دقیق کنار-به-کنار.

سه مسئله طراحی هدایت‌کننده توسعه هستند:
۱. بیان کافی: هدف افزودن دستورات به گرامر است تا تضمین شود هیچ گرهی فارغ از نحوه نوشتن فایل، در جای اشتباه قرار نگیرد. بیانگری تشویق می‌شود، به شرطی که موتور چیدمان را انتخاب نکند.
۲. تصمیم‌گیری موتور: چیدمان خودکار رد شده است زیرا پیش‌بینی‌پذیری هدف اصلی است. آزادی موتور ممکن است بر فاصله‌ها تأثیر بگذارد، اما هرگز نباید بر روابط تأثیر بگذارد. اگر یک مقدار پیش‌فرض بتواند سمت قرارگیری یک گره را تغییر دهد، ابزار باید به‌جای حدس زدن، گزارش فقدان دستور را ارائه دهد.
۳. هم‌پوشانی و مسیریابی: جای‌گذاری نسبی با فاصله‌گذاری پیش‌فرض، با رشد خوشه‌ها ناگزیر منجر به تداخل می‌شود. به همین دلیل مسیریابی متعامد اولویت نسخه اول است.

در مقایسه با ابزارهای دیگر، reladraw تفاوت‌های بنیادی دارد:

• Archify: برای عامل‌ها با استفاده از JSON تایپ‌شده و یک اعتبارسنج ساخته شده است. به‌طور قطعی به HTML کامپایل می‌شود و گره‌ها به خطوط منبع تأیید شده در git متصل هستند. اما از مختصات گرید یا آزاد استفاده می‌کند. چون یک قالب JSON چیزی درباره جای نهایی تصویر نمی‌گوید، همچنان به چرخه «تولید، رندر، مشاهده، اصلاح» نیاز دارد.
• PIC و pikchr: یک فرمت متنی بدون موتور چیدمان است. از «گرافیک لاک‌پشتی» (یک مکان‌نمای متحرک که اشکال را رها می‌کند) استفاده می‌کند، به این معنی که نمودارها توالی حرکت قلم هستند نه روابط بین موجودات نام‌گذاری شده. همچنین فاقد گروه‌هایی است که با افزودن اعضا بازتنظیم شوند.
• Graphviz (rank/cluster): این‌ها محدودیت‌هایی روی یک موتور چیدمان خودکار هستند، نه جایگزینی برای آن. خروجی همچنان نوظهور و غیرقابل‌پیش‌بینی است.
• Structurizr: چیدمان دستی ارائه می‌دهد اما به مدل C4 وابسته است و بیشتر یک نماد مدل‌سازی است تا یک زبان جای‌گذاری عمومی.

مجوز و مشارکت

این پروژه تحت مجوز Apache-2.0 منتشر شده تا پذیرش آن به عنوان یک ابزار اولیه تشویق شود. این مجوز کد را پوشش می‌دهد اما هیچ حقی برای استفاده از نام "reladraw"، لوگو یا سایر علائم تجاری اعطا نمی‌کند. فورک‌ها (Forks) مورد استقبال هستند به شرطی که نام متفاوتی داشته باشند.

مشارکت‌ها از طریق Issueها مدیریت می‌شوند، با علاقه ویژه به نمودارهایی که کاربران سعی در نوشتن آن‌ها داشته‌اند اما نتوانسته‌اند. درخواست‌های ادغام (Pull Requests) بررسی می‌شوند اما بلافاصله ادغام نمی‌شوند، همان‌طور که در فایل CONTRIBUTING.md پروژه ذکر شده است.

با حذف جست‌وجو برای چیدمان «بهینه» و جایگزینی آن با حل قطعی حداقل فاصله‌ها، reladraw تضمین می‌کند که فایل منبع، تنها منبع حقیقت برای نتیجه بصری است. این تغییر به این معنی است که یک عامل می‌تواند خطای چیدمان را با خواندن یک گزارش متنی و ویرایش یک فایل متنی حل کند و کاملاً از محاسبات پیکسلی یا حلقه‌های بازخورد بینایی بی‌نیاز شود.

گام بعدی شما

• اگر از Claude Code یا Cursor استفاده می‌کنید، مهارت reladraw را نصب کنید تا بتوانید نمودارهای سیستمی را به‌صورت متنی و دقیق مدیریت کنید.
• برای پروژه‌هایی که مستندات بصری آن‌ها مدام تغییر می‌کند، به‌جای ابزارهای GUI، از این زبان برای تعریف ساختارها استفاده کنید تا نسخه‌بندی (Versioning) در Git راحت‌تر شود.
• در صورت مواجهه با تداخل المان‌ها، به‌جای جابه‌جایی تصادفی، از دستورات below یا right of برای تعریف روابط صریح استفاده کنید.

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