Mermaid Diagrams

Mermaid کیا ہے؟

Mermaid ایک text-based diagramming زبان ہے۔ کسی visual ٹول میں shapes کھینچنے کی بجائے، آپ diagram کی مختصر description لکھتے ہیں اور Mermaid اسے visual graphic کے طور پر render کرتا ہے۔ یہ code کے ساتھ رہنے کے لیے ڈیزائن کیا گیا ہے — Markdown files، wikis، یا documentation کے اندر — اس لیے آپ کے diagrams version-controlled اور update کرنے میں آسان رہتے ہیں۔

Mermaid کئی diagram types سپورٹ کرتا ہے:

• Flowcharts — decision trees اور process flows
• Sequence diagrams — وقت کے ساتھ systems یا services ایک دوسرے کو کیسے call کرتے ہیں
• Entity-relationship (ER) diagrams — database schemas
• Architecture diagrams — components اور ان کے relationships
• Gantt charts — timelines اور project schedules

Live Diagram Rendering

IDE Strip میں کوئی بھی .md فائل کھولیں جس میں Mermaid code block ہو۔ ایک Mermaid block اس طرح نظر آتا ہے:

```mermaid graph TD A[User] --> B[API Gateway] B --> C[Auth Service] B --> D[User Service] D --> E[(Database)] ```

جب IDE Strip Mermaid block detect کرتا ہے، تو یہ source کے ساتھ ایک visual diagram پینل render کرتا ہے۔ آپ دونوں ایک ساتھ دیکھتے ہیں: بائیں طرف text description اور دائیں طرف rendered diagram۔ text edit کریں اور diagram فوری update ہوتا ہے — کوئی save-and-reload step ضروری نہیں۔

Interactive Editing

یہ وہ جگہ ہے جہاں 1DevTool کا Mermaid support معیاری renderer سے آگے جاتا ہے۔ آپ visual diagram میں nodes drag کر سکتے ہیں، اور source code خودکار طریقے سے نئی layout reflect کرنے کے لیے update ہوتا ہے۔ یہ دونوں سمتوں میں کام کرتا ہے:

• Text edit → diagram update — source میں label تبدیل کریں یا نیا connection شامل کریں اور diagram redraw ہوتے دیکھیں۔
• Node drag → source update — visual diagram میں کوئی node move کریں اور source code میں corresponding position data match کرنے کے لیے adjust ہو جائے۔

آپ nodes resize بھی کر سکتے ہیں اور ایک node کے edge سے دوسرے تک drag کر کے edges reconnect کر سکتے ہیں۔ Source پورے وقت sync میں رہتا ہے۔

یہ Mermaid diagrams کو "لکھو اور امید لگاؤ" تجربے سے کہیں کم بناتا ہے۔ آپ text میں structure roughly درست کر سکتے ہیں، پھر visually layout fine-tune کر سکتے ہیں۔

AI Agents کے ساتھ استعمال

1DevTool میں سب سے طاقتور combinations میں سے ایک یہ ہے کہ AI agent سے Mermaid diagram generate کرنے کو کہیں اور پھر result کو visually rearrange کریں۔ مثال کے طور پر، Claude Code terminal کھولیں اور یہ پوچھیں:

"Generate a Mermaid diagram showing how the main components in this codebase interact with each other."

Agent آپ کی codebase پڑھتا ہے اور Mermaid diagram پر مشتمل .md فائل لکھتا ہے۔ IDE Strip میں وہ فائل کھولیں، اور diagram visually render ہوتا ہے۔ اگر layout پڑھنا مشکل ہو، تو nodes کو واضح arrangement میں drag کریں۔ Source خودکار طریقے سے update ہوتا ہے، اس لیے آپ improved diagram Commit کر سکتے ہیں۔

یہ database schemas، API call sequences، اور deployment architecture diagrams کے لیے بھی اچھی طرح کام کرتا ہے۔

ٹپ: Claude Code سے پوچھیں: "Draw a Mermaid diagram showing how the components in this repo interact." پھر generated .md فائل کھولیں اور diagram کو visually دیکھیں اور rearrange کریں۔