‏Eraser Diagrams: سیستم متن‌باز دیاگرام برای LLMها

Eraser Diagrams یه سیستم متن‌باز دیاگرام‌سازی از شرکت Eraser هست که برای ساختن دیاگرام‌های حرفه‌ای و یکدست طراحی شده. تیم سازنده می‌گه با پیشرفت LLMها، کشیدن دیاگرام با دست دیگه داره منسوخ می‌شه، ولی هنوز معلوم نیست بهترین چارچوب برای این کار چیه. برای همین از صفر شروع کردن. این سیستم کامپوننت، آیکون، مسیریابی خط‌ها و ساخت PNG رو خودش داره و تو هر محیطی مثل Slackbot، CI یا داخل agent کار می‌کنه.

ایده‌ی اصلی اینه که تعریف دیاگرام از سیستم بصری جدا باشه. خود دیاگرام یه JSON هست که فقط داده و ساختار رو می‌گه. ظاهرش رو کامپوننت‌هایی تعیین می‌کنن که هر کدوم یه schema، یه markup و یه CSS دارن. هر موجودیت یه tag داره که به یه کامپوننت وصل می‌شه. به گفته‌ی تیم، این‌طوری هر دیاگرام برای LLM کوتاه و کم‌توکن می‌مونه و رعایت style guide تیم از ساختار خود سیستم میاد، نه از prompt engineering.

چندتا مفهوم هم جایگاه ویژه دارن. آیکون با اسم مشخص می‌شه، مثلاً "aws-s3"، نه با SVG کامل. گروه‌بندی و containment (یعنی اینکه یه عنصر داخل یه گروه باشه) صریح نوشته می‌شه و از روی هندسه حدس زده نمی‌شه. اتصال‌ها هم یه موجودیت جدا حساب می‌شن، نه فقط یه خط. اندازه‌ها هم اول تو مرورگر واقعاً اندازه‌گیری می‌شن، بعد مسیریابی روی ابعاد واقعی انجام می‌شه، نه روی حدس اولیه‌ی LLM.

تیم Eraser سه راه دیگه رو هم بررسی کرده. تولید مستقیم SVG یا HTML باعث می‌شه هر درخواست همه‌ی تصمیم‌های ظاهری رو از نو بگیره. فرمت‌هایی مثل draw.io XML غنی‌ان ولی برای LLM پرهزینه و پرخطان. DSLهایی مثل Mermaid و D2 کم‌توکن‌ان، ولی کنترل دقیق جای عناصر و مسیر خط‌ها رو به renderer می‌سپارن. نویسنده‌ها می‌گن این برای جایگزین کردن دیاگرام‌های دست‌ساز و حرفه‌ای قابل قبول نیست.

از نظر فنی، پروژه از چندتا پکیج تشکیل شده: @eraserlabs/diagrams برای Node API، @eraserlabs/diagrams-cli برای خط فرمان، @eraserlabs/resolve برای اعتبارسنجی، @eraserlabs/render برای اندازه‌گیری تو مرورگر و @eraserlabs/layout برای مسیریابی خط‌ها با در نظر گرفتن موانع. یه پروتکل به اسم MDP هم قراردادهای پایه رو تعریف می‌کنه. خروجی نهایی فقط عکس نیست؛ سند اصلی به همراه هندسه‌ی رندرشده برمی‌گرده، پس می‌شه دیاگرام رو جابه‌جا و ویرایش کرد و دوباره رندر گرفت.

نکات کلیدی:

• دیاگرام به شکل JSON تعریف می‌شه و ظاهرش با HTML، CSS و SVG ساخته می‌شه.
• هر موجودیت یه tag داره که به یه کامپوننت با schema، markup و CSS وصل می‌شه.
• آیکون‌ها با اسم مثل "user" یا "aws-s3" مشخص می‌شن.
• موتور قالب عمداً اجرای کد دلخواه رو پشتیبانی نمی‌کنه.
• پکیج‌های اصلی @eraserlabs/diagrams و @eraserlabs/diagrams-cli هستن و رندر با Chromium انجام می‌شه.
• خروجی قابل ویرایشه و دوباره قابل رندر گرفتنه.