Mermaid Diagrams

Mermaid क्या है?

Mermaid एक text-based diagramming language है। Visual tool में shapes drag करने की बजाय, diagram का short description लिखते हैं और Mermaid उसे visual graphic के रूप में render करता है। यह code के साथ रहने के लिए design किया गया है — Markdown files, wikis, या documentation के अंदर — ताकि diagrams version-controlled और update करने में आसान रहें।

Mermaid कई diagram types support करता है:

• 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 file खोलें जिसमें 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 panel render करता है। दोनों एक साथ दिखते हैं: left पर text description और right पर rendered diagram। Text edit करें और diagram तुरंत update होता है — कोई save-and-reload step नहीं।

Interactive Editing

यहीं पर 1DevTool का Mermaid support standard renderer से आगे जाता है। Visual diagram में nodes drag कर सकते हैं, और source code automatically update होता है। यह दोनों directions में काम करता है:

• Text edit करें → diagram update होता है — source में label बदलें या नया connection जोड़ें और diagram redraw होते देखें।
• Node drag करें → source update होता है — visual diagram में node move करें और source code में corresponding position data adjust होता है।

Nodes resize कर सकते हैं और edges drag करके एक node के edge से दूसरे तक reconnect कर सकते हैं। Source पूरे समय sync में रहता है।

इससे Mermaid diagrams "लिखो और hope करो" experience की बजाय बहुत कम frustrating लगते हैं। Text में rough structure ठीक कर सकते हैं, फिर visually layout fine-tune कर सकते हैं।

AI Agents के साथ Use करें

1DevTool में सबसे powerful combinations में से एक है AI agent से Mermaid diagram generate करवाना और फिर visually result rearrange करना। उदाहरण के लिए Claude Code terminal खोलें और पूछें:

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

Agent codebase पढ़ता है और Mermaid diagram containing .md file लिखता है। IDE Strip में वो file खोलें, और diagram visually render होता है। Layout पढ़ना मुश्किल हो तो nodes drag करके clearer arrangement में लाएं। Source automatically update होता है, इसलिए improved diagram commit कर सकते हैं।

यह database schemas, API call sequences, और deployment architecture diagrams के लिए भी अच्छे से काम करता है।

Tip: Claude Code से पूछें: "Draw a Mermaid diagram showing how the components in this repo interact." फिर generated .md file खोलें diagram visually देखने और rearrange करने के लिए।