Drawgent: عامل کدنویسی روی بوم زنده Excalidraw

drawgent کلود کد، کدکس یا opencode شما (نصب، لاگین، پیکربندی و مخزن شما) را به تخته سفید Excalidraw متصل می کند. یک نمودار در پانل چت بخواهید، یا بنویسید AGENT: … در کنار بخشی از طراحی که می‌خواهید تغییر کند. نماینده به بوم نگاه می کند (عکس از صفحه + صحنه)، آن را به صورت زنده ویرایش می کند، نتیجه را بررسی می کند و یادداشت انجام شده را علامت گذاری می کند.

پیش نیاز: یکی از claude، codex یا opencode نصب شده و وارد شده است. پل های Claude و Codex همچنین به Node.js ≥ 22 با npm نیاز دارند (آداپتور Claude به آن نیاز دارد؛ راه اندازی در زیر آن هشدار می دهد).

همه چیز را یک بار بررسی می‌کند، وقتی چیزی از دست می‌رود، با رفع دقیق مشکل مواجه می‌شود و ~/.config/drawgent/config.toml را می‌نویسد:

عامل CLI. کلود / کدکس / کد باز شما در PATH.

وارد شوید. وضعیت کلود احراز هویت، وضعیت ورود به کدکس یا فهرست احراز هویت opencode.

ابزارهای بوم برای جلسات پیوست شده. فقط Codex نیاز به تغییر دارد: codex mcp add drawgent -- drawgent mcp . Claude و opencode ابزارها را در زمان پیوست دریافت می کنند.

کروم بدون سر برای رندر. اگر Chrome/Chromium دارید، راه‌اندازی از Chrome/Chromium شما استفاده می‌کند. در غیر این صورت پیشنهاد می کند:

غیر تعاملی: دانلود --chrome | سیستم | /path/to/chrome .

drawgent up تا زمانی که راه‌اندازی برای آن عامل موفقیت‌آمیز نباشد، یا اگر تنظیمات ضبط‌شده ناپدید شود، از شروع کردن خودداری می‌کند.

در دایرکتوری فعلی (فضای کاری) اجرا می شود:

صحنه زنده و حالت همگام سازی آن در .drawgent/scene.json نگهداری می شود که به طور خودکار git نادیده گرفته می شود.

اشکال می توانند به کدی که نشان می دهند اشاره کنند: یک فایل، یک محدوده خط و یک نماد (تابع، نوع، کلاس ...).

پیوند دادن: عامل هنگامی که مخزن شما را ترسیم می کند، اشکال را پیوند می دهد. می‌توانید یکی را خودتان از برگه کد پیوند دهید: یک فایل را باز کنید، روی خطوط کلیک کنید (یا شیفت کلیک کنید)، یک شکل را روی بوم انتخاب کنید، سپس شکل انتخاب‌شده را پیوند دهید. نماد روی اولین خط انتخاب شده شناسایی می شود.

هنگامی که پیوندها شکسته می شوند، چک کشش با 1 خارج می شود. از --json برای ابزارسازی استفاده کنید.

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

نمودار را تغییر دهید، سپس به عامل اجازه دهید کد را برای مطابقت با آن تغییر دهد.

خط پایه: تعداد تغییرات از فایل نمودار متعهد (git HEAD)، یا از زمانی که drawgent برای اولین بار تخته را دید، و هر ساخت، خط پایه را به جلو می برد. علامت گذاری به عنوان ساخته شده زمانی که کد از قبل مطابقت داشته باشد آن را بازنشانی می کند. نشانگرهای پیشرفت از فایل .excalidraw متعهد خارج می شوند. نشانگرهای شفاف آنها را حذف می کند.

یک فضای کاری می تواند چندین تخته را در خود جای دهد، برای عادت "یک تخته سفید بزرگ با نمودارهای زیاد" بدون آشفتگی:

بردهای جدید فایل ها را ایجاد می کنند و با تغییر نام برد، نام فایل آن تغییر می کند.

فایلی که در پوشه ظاهر می شود (مثلا بعد از git pull ) به یک برد تبدیل می شود.

آنچه نوشته شده است: یک فایل استاندارد .excalidraw (در excalidraw.com باز می شود) که بوم را دنبال می کند. این فقط طراحی زنده (بدون عناصر حذف شده، بدون ردیابی لیزری)، چاپ زیبا و بدون فیلدهای همگام‌سازی در هر ویرایش را در خود نگه می‌دارد، بنابراین کاملا متفاوت است و تنها زمانی که نقاشی تغییر می‌کند بازنویسی می‌شود. آن را مانند هر فایل منبع دیگری commit کنید.

تغییرات از git: اگر فایل خارج از drawgent تغییر کند (git pull، پرداخت، ویرایش دستی)، برنده می شود. به‌روزرسانی‌های بوم به‌صورت زنده، حذف‌ها گنجانده شده است، و فایلی که در ابتدا روی دیسک وجود دارد نیز اعمال می‌شود. فایلی که تجزیه نمی شود (مثلا نشانگرهای ادغام-تعارض) در پانل چت گزارش می شود و تا زمانی که رفع نشود نادیده گرفته می شود.

انتخاب فایل: یک drawgent.excalidraw در ریشه فضای کاری به طور خودکار استفاده می شود، بنابراین یک کلون تازه نیازی به پرچم ندارد.

اتاق‌ها: --نمودار را نمی‌توان با --room ترکیب کرد، جایی که excalidraw.com نقشه را نگه می‌دارد.

بوم را به جلسه ای که قبلا اجرا کرده اید متصل می کند. بدون شناسه، جلساتی را که پیدا می کند فهرست می کند (اول دایرکتوری فعلی) و به شما امکان می دهد یکی را انتخاب کنید:

پانل چت (سمت راست): درخواست ارسال کنید، پاسخ‌ها و تماس‌های ابزار را مشاهده کنید، درخواست‌های مجوز را تأیید کنید، برای لغو یک نوبت، Stop را فشار دهید. در هر نوبت: نشانه‌هایی که استفاده می‌کند (ورودی، که در حافظه پنهان و خروجی ذخیره می‌شود)، چقدر پنجره زمینه عامل پر است، و هزینه نوبت، زمانی که عامل آنها را گزارش می‌دهد (کلود انجام می‌دهد) چقدر است.

روی بوم: متنی بنویسید که با AGENT شروع می شود: در کنار یا داخل یک شکل، یا یک فلش از یادداشت به شکل بکشید. حدود 2.5 ثانیه پس از توقف تایپ، با موقعیت خود، نقطه‌ای که به آن اشاره می‌کند و آنچه در نزدیکی است، فعال می‌شود. عامل آن را به رنگ سبز DONE حل می کند: ... توجه داشته باشید. آن را دوباره به AGENT ویرایش کنید تا دوباره ارسال شود.

مناطق لیزری: لیزر Excalidraw (K) را انتخاب کنید و قسمتی از نمودار را دایره یا خط بکشید. ردیابی روی بوم به‌عنوان یک طرح کلی قرمز رنگ باقی می‌ماند، و پانل چت آماده برای آموزش شما باز می‌شود، با یک تراشه فهرستی از آنچه در زیر منطقه وجود دارد ( 🔴 ناحیه لیزری · API، Redis × ). پیام بعدی شما به همراه زون (محدوده ها و عناصر پوشانده شده) به عامل می رود و پس از اتمام کار، ردیابی ناپدید می شود. سکته مغزی در 4 ثانیه از یکدیگر یک منطقه را تشکیل می دهند. × آن را دور می اندازد.

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

واگرد : عامل روی پشته واگرد ویرایشگر ویرایش می کند، بنابراین Ctrl+Z آنها را یکبار ویرایش می کند. نوبتی که بوم را تغییر داده است دارای ↶ Undo N canvas در زیر آن در چت است و عامل دارای undo_changes (آخرین ویرایش یا یک نوبت کامل) است. عناصری که انسان از آن زمان تغییر کرده است به همان شکلی که هستند حفظ می شوند.

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

docker compose up --build یک سرور بوم را اجرا می کند (Drawgent + Chromium، بدون عامل)، به عنوان مثال. برای میزبانی یک بوم مشترک یا یک پل اتاق روی یک سرور. عوامل هرگز باندل نمی شوند: آنها همیشه با تنظیمات خود شما اجرا می شوند.

نسخه‌های آزاد (nix develop -c make … زنجیره ابزار یا rustup + cargo-zigbuild را فراهم می‌کند):

drawing_guide (رنگ‌ها بر اساس نقش، اندازه‌ها، طرح‌بندی، اشتباهات رایج؛ اقتباس شده از راهنمای رسمی excalidraw-mcp، MIT)، get_scene (پس از اولین خواندن: فقط آنچه از آن زمان تغییر کرده است، منهای ویرایش‌های خود عامل؛ کامل برای همه)، check_layout (پرزهای هندسی: همپوشانی‌ها، قاب‌ها یا شکل‌های شکسته در میان متن با کنتراست کم، تقریبا نامناسب، ازدحام به‌عنوان وصله‌های به‌روزرسانی، مشکلاتی را که معرفی می‌کنند، اضافه می‌کنند (گره‌ها، لبه‌ها، گروه‌ها → لایه‌بندی خودکار با فریم)، make_space (فضا را از هم جدا می‌کنیم)، واگرد.

_changes (برگرداندن آخرین ویرایش یا نوبت عامل)، get_screenshot (دید، 1000 پیکسل به طور پیش‌فرض؛ عنصر_ids برش به منطقه، حداکثر_اندازه)، لینک_کد، check_links، get_diagram_changes، mark_progress، map_repo، list_boards، moveelements، استفاده از تابلو، (اسکلت‌های Excalidraw؛ فلش‌ها با شناسه متصل می‌شوند و لبه به لبه هدایت می‌شوند)، add_mermaid (طرح‌بندی خودکار)، update_elements (برچسب‌ها از شکل‌ها پیروی می‌کنند، فلش‌های محدود دوباره مسیر را تغییر می‌دهند، frameId)، delete_elements (دوباره اتصال: فلش‌های پیوست را رها کنید و جریان را پل کنید)، clear_instructions .

GET /api/health · GET /api/scene · GET /api/screenshot?ids=&padding=&max= · POST|PATCH|DELETE /api/elements · POST /api/mermaid · POST /api/graph · GET /api/lint?ids= ·POST?piaST POST /api/undo {scope|turn} · POST /api/clear · GET /api/instructions · POST /api/instructions/{id}/resolve · POST /api/status · POST /api/chat {agent?, text} · WS /ws (همگام سازی مرورگر + رویدادهای چت)

src/ (Rust)، یک پوشه برای هر نقش. وابستگی ها فقط به پایین لیست اشاره می کنند:

web/ : ویرایشگر ( main.jsx , chat.jsx , boards.jsx , code.jsx , cards.jsx , build.jsx , laser.js , laserpoint.jsx ) و صفحه رندر ( render.jsx ).