MIPIBOY
Loading...
آماده‌سازی تجربه0%
آشنایی کامل با زبان نمودارنویسی Mermaid، توانایی‌ها و محدودیت‌های AI در تولید دیاگرام، و روش‌های عملی برای چت با هوش مصنوعی و دریافت خروجی Mermaid آماده.
اگر تا به حال خواسته‌اید یک نمودار جریان، دیاگرام توالی یا مدل کلاس‌ها را از هوش مصنوعی بخواهید و به‌جای یک نمودار تصویری، یک پاراگراف طولانی متن جواب گرفته‌اید، یا برای انتقال مفهوم خود به هوش مصنوعی مجبور به توضیحات متنی طولانی و بی‌کیفیت شده‌اید، این مقاله دقیقاً برای شماست.
Mermaid این دردسر را برای همیشه رفع کرده است. اما وقتی پای هوش مصنوعی به میان می‌آید، قدرت این ابزار چند برابر می‌شود. در این مقاله، ابتدا با Mermaid آشنا می‌شویم، سپس نقش هوش مصنوعی در تولید دیاگرام را بررسی می‌کنیم و در نهایت یاد می‌گیریم که چگونه با چت‌بات‌ها برای دریافت بهترین خروجی Mermaid گفتگو کنیم.
پیش‌نیاز این مقاله
این مقاله برای تمام کسانی که با مستندسازی فنی، تحلیل سیستم‌ها یا تولید محتوای تصویری سروکار دارند مفید است. آشنایی اولیه با Markdown کمک کننده است، اما الزامی نیست.
Mermaid یک زبان نشانه‌گذاری ساده و مبتنی بر متن (Markdown-like) است که به شما امکان می‌دهد انواع دیاگرام‌ها را با کدنویسی ساده تولید کنید. این دیاگرام‌ها در محیط‌های مختلفی مانند Markdown، GitHub، Notion، Obsidian و بسیاری از پلتفرم‌های دیگر پشتیبانی می‌شوند. به جای کشیدن اشکال با ماوس، فقط کافی است متن ساده‌ای بنویسید و Mermaid آن را به یک نمودار زیبا و مقیاس‌پذیر تبدیل کند.
نکته کلیدی
Mermaid پلی بین تفکر بصری و نوشتار متنی است. این ویژگی آن را به ابزاری ایده‌آل برای همکاری با هوش مصنوعی تبدیل کرده است.
پیش از آنکه سراغ هوش مصنوعی برویم، بهتر است با انواع دیاگرام‌هایی که Mermaid پشتیبانی می‌کند آشنا شویم. این آشنایی به شما کمک می‌کند تا درخواست‌های دقیق‌تری از AI داشته باشید.
| نوع دیاگرام | کاربرد اصلی |
|---|---|
| Flowchart | نمایش فرایندها، الگوریتم‌ها و جریان کاری |
| Sequence Diagram | تعامل بین اشیاء یا سرویس‌ها در طول زمان |
| Class Diagram | مدل‌سازی ساختار کلاس‌ها در برنامه‌نویسی شیءگرا |
| State Diagram | نمایش وضعیت‌های مختلف یک موجودیت و تغییرات آن |
| ER Diagram | طراحی پایگاه داده و روابط بین جداول |
| GitGraph | نمایش شاخه‌ها و کامیت‌های مخزن گیت |
| Timeline | نمایش رویدادهای مهم در یک بازه زمانی |
| Gantt Chart | برنامه‌ریزی پروژه و زمان‌بندی وظایف |
Mermaid تنها به این لیست محدود نیست. در پایان مقاله فهرست کامل انواع دیاگرام‌هایی که Mermaid پشتیبانی می‌کند آمده است.
امروزه مدل‌های زبانی بزرگ مانند GPT-4، Claude و Gemini به خوبی می‌توانند کد Mermaid را از توضیحات متنی تولید کنند. این یعنی شما فقط کافی است دیاگرام مورد نظرتان را به زبان ساده توصیف کنید و AI کد دقیق آن را برای شما بنویسد و به نمایش بگذارد. اما این فرایند هم مانند هر ابزار دیگری محدودیت‌هایی دارد.
quadrantChart یا sankey پیچیده‌تر هستند و AI ممکن است داده‌های عددی آن را درست تشخیص ندهد مگر اینکه دقیقاً ساختار را توضیح دهید.هشدار
همیشه خروجی AI را در یک ویرایشگر Mermaid تست کنید. حتی مدل‌های پیشرفته نیز گاهی خطاهای سینتکسی کوچک دارند که به‌راحتی قابل اصلاح هستند.
برای اینکه بهترین نتیجه را از چت‌بات‌ها بگیرید، باید درخواست پرامپت (Prompt) خود را بهینه کنید. در ادامه یک الگوی مؤثر برای مکالمه با AI ارائه می‌دهم.
نوع دیاگرام را مشخص کنید
واضح بگویید که به چه نوع دیاگرامی نیاز دارید. مثال:
«من به یک فلوچارت برای فرایند ثبت‌نام کاربری نیاز دارم.»
نودها و گام‌های اصلی را لیست کنید
ترتیب و محتوای گام‌ها را توضیح دهید. مثال:
«گام‌ها عبارتند از: شروع، وارد کردن ایمیل و رمز، بررسی اعتبار، اگر معتبر بود به داشبورد برود و اگر نه خطا نمایش دهد.»
روابط و شاخه‌ها را مشخص کنید
اگر شرطی وجود دارد، آن را دقیقاً بگویید. مثال:
«اگر اعتبارسنجی موفق بود، به صفحه اصلی هدایت شود، در غیر این صورت به فرم بازگردد.»
از AI بخواهید کد را به شما تحویل دهد
در نهایت، دستور نهایی:
«لطفاً کد Mermaid این فلوچارت را برایم بنویس.»
تست و بازخورد
مدل‌های جدید معمولاً مستقیم پس از تولید دیاگرام، آن را به نمایش می‌گذارند. در غیر این صورت کد دریافتی را در یک ویرایشگر Mermaid تست کنید. اگر خطایی دیدید، خطا را به AI بگویید تا اصلاح کند.
در ادامه، ۱۱ نمونه دیاگرام کاربردی را آورده‌ام که همگی با راهنمایی AI تولید شده‌اند. برای هر مثال، پرامپت دقیق و کد Mermaid را به همراه خروجی بصری مشاهده می‌کنید.
پرامپت:
«یک فلوچارت برای معماری میکروسرویس‌های یک فروشگاه اینترنتی رسم کن. کاربر از طریق API Gateway وارد می‌شود. احراز هویت انجام می‌شود. اگر معتبر بود، درخواست به یکی از دو سرویس سفارشات یا محصولات هدایت شود. سرویس سفارشات به پایگاه داده اصلی متصل است و سرویس محصولات از Redis Cache استفاده می‌کند. در نهایت نتیجه به کاربر نمایش داده شود. اگر احراز هویت نامعتبر بود، خطای ۴۰۳ برگردانده شود.»
کد Mermaid:
نکته
این دیاگرام برای مستندسازی معماری سیستم‌های توزیع‌شده بسیار مناسب است و به‌خوبی جریان درخواست را از ورودی تا خروجی نشان می‌دهد.
پرامپت:
«یک دیاگرام توالی (Sequence Diagram) برای فرایند خرید اینترنتی رسم کن. بازیگران: کاربر، فرانت‌اند، بک‌اند، درگاه پرداخت و انبار. مراحل: ۱. کاربر کالا را به سبد خرید اضافه می‌کند. ۲. فرانت‌اند درخواست تسویه را به بک‌اند می‌فرستد. ۳. بک‌اند مبلغ و توکن را به درگاه پرداخت ارسال می‌کند. ۴. درگاه پرداخت تایید پرداخت را برمی‌گرداند. ۵. بک‌اند به انبار درخواست کاهش موجودی می‌دهد. ۶. انبار تایید ثبت را برمی‌گرداند. ۷. بک‌اند رسید را به فرانت‌اند می‌فرستد. ۸. فرانت‌اند پیام موفقیت را به کاربر نشان می‌دهد.»
کد Mermaid:
پرامپت:
«یک دیاگرام کلاس برای مدل داده‌های یک وبلاگ ساده رسم کن. سه کلاس داریم: User با مشخصات id، username، email و متدهای login() و logout(). کلاس Post با id، title، content، created_at و متد publish(). کلاس Comment با id، body، created_at و متد approve(). روابط: هر User می‌تواند چندین Post بنویسد (نویسنده) و چندین Comment بدهد. هر Post شامل چندین Comment است. روابط را با کاردینالیتی مشخص کن.»
کد Mermaid:
پرامپت:
«یک دیاگرام وضعیت (State Diagram) برای چرخه حیات یک تیکت پشتیبانی رسم کن. وضعیت‌ها: جدید، در حال بررسی، پاسخ داده شده، بسته شده، بازگشایی شده. انتقال‌ها: از جدید به در حال بررسی با تخصیص به کارشناس. از در حال بررسی به پاسخ داده شده با ارسال پاسخ موقت. از پاسخ داده شده به در حال بررسی اگر کاربر پاسخ جدید داد. از در حال بررسی به بسته شده اگر مشکل حل شد. از بسته شده به بازگشایی شده اگر کاربر مجدداً پاسخ داد. از بازگشایی شده به در حال بررسی. همچنین از بسته شده به حالت نهایی [*].»
کد Mermaid:
پرامپت:
«یک نمودار GitGraph برای نمایش استراتژی برنچینگ یک پروژه نرم‌افزاری رسم کن. ابتدا کامیت اولیه روی main. سپس برنچ develop ایجاد می‌شود. روی develop یک کامیت برای آماده‌سازی اسپرینت. از develop یک برنچ feature/add-login ایجاد می‌کنیم. روی این برنچ دو کامیت: تکمیل UI ورود و اتصال به API. سپس feature/add-login را به develop ادغام (merge) می‌کنیم. در نهایت develop را به main ادغام کرده و با تگ v2.0.0 منتشر می‌کنیم.»
کد Mermaid:
پرامپت:
«یک تایم‌لاین برای نقشه راه توسعه یک پلتفرم دیجیتال رسم کن. عنوان: نقشه راه توسعه پلتفرم. رویدادها: Q1 ۲۰۲۵: تحقیق و تحلیل بازار. Q2 ۲۰۲۵: طراحی تجربه کاربری (UI/UX). Q3 ۲۰۲۵: توسعه نسخه آلفا (MVP). Q4 ۲۰۲۵: آزمایش امنیتی و رفع باگ. Q1 ۲۰۲۶: انتشار نسخه عمومی (Public Launch).»
کد Mermaid:
پرامپت:
«یک نقشه ذهنی (Mindmap) برای دسته‌بندی ایده‌های محتوایی وبلاگ برنامه‌نویسی من بساز. ریشه: محتوای وبلاگ. شاخه‌های اصلی: فرانت‌اند (با زیرشاخه‌های React، Vue، CSS پیشرفته)، بک‌اند (با زیرشاخه‌های Node.js، پایگاه داده، API Design)، DevOps (با زیرشاخه‌های Docker، CI/CD)، هوش مصنوعی (با زیرشاخه‌های Mermaid، Prompt Engineering).»
کد Mermaid:
پرامپت:
«یک برد کانبان با سینتکس Mermaid بساز با سه ستون: To Do، In Progress، Done. در ستون To Do: تسک‌های «طراحی UI» و «نوشتن تست». در ستون In Progress: تسک «پیاده‌سازی API». در ستون Done: تسک «تنظیم دیتابیس».»
کد Mermaid:
پرامپت:
«یک نمودار رادار (Radar Chart) با Mermaid بساز که سه نامزد را در پنج معیار (React، CSS، تست‌نویسی، بهینه‌سازی، کار تیمی) از ۰ تا ۱۰۰ مقایسه کند. نامزد الف در همه معیارها ۸۰. نامزد ب در تست‌نویسی ۹۰ و بقیه ۶۰. نامزد ج در CSS و React ۹۵ و بقیه ۵۰.»
کد Mermaid:
پرامپت:
«یک نقشه درختی (Treemap) با سینتکس Mermaid بساز که فروش کل فروشگاه را به سه دسته الکترونیک (۵۰٪)، پوشاک (۳۰٪) و خانه‌وآشپزخانه (۲۰٪) تقسیم کند و الکترونیک را به موبایل (۳۰) و لپ‌تاپ (۲۰) زیرتقسیم کند.»
کد Mermaid:
پرامپت:
«یک دیاگرام پکت (Packet Diagram) با سینتکس
packet-betaدر Mermaid بساز که فیلدهای ساده‌شده یک هدر شبکه شامل: پورت مبدا (۱۶ بیت)، پورت مقصد (۱۶ بیت)، شماره ترتیب (۳۲ بیت) و پرچم‌ها (۸ بیت) را نشان دهد.»
کد Mermaid:
به AI بگویید که «تو یک متخصص طراحی دیاگرام Mermaid هستی.» این کار دقت خروجی را بالا می‌برد.
به جای یک درخواست طولانی، ابتدا ساختار کلی را بگیرید و سپس جزئیات را اضافه کنید. مثال: «حالا یک زیرگراف به نام "لایه امنیتی" به این flowchart اضافه کن.»
به‌جای «نمودار»، بگویید «flowchart»، «sequence diagram»، «mindmap» یا «sankey diagram». هرچه اسم دقیق‌تر باشد، خروجی سینتکسی صحیح‌تر است.
اگر نمونه مشابهی دارید، آن را به AI نشان دهید تا سبک و ساختار را بهتر درک کند.
نکته طلایی
همیشه از AI بخواهید کد را در یک بلوک کد با برچسب mermaid قرار دهد تا بتوانید به‌راحتی آن را کپی و در محیط خود تست کنید.
Mermaid دیگر فقط ابزار فلوچارت و دیاگرام توالی نیست؛ با بیش از ۲۰ نوع دیاگرام مختلف، از نقشه ذهنی و کانبان تا معماری ابری و دیاگرام پکت شبکه، تقریباً هر نوع داده‌ای را می‌توان به‌صورت بصری نمایش داد.
ترکیب Mermaid و هوش مصنوعی یک تحول واقعی در مستندسازی فنی و طراحی سیستم‌ها ایجاد کرده است. با یادگیری نحوه درست درخواست دادن از چت‌بات‌ها، می‌توانید در زمانی بسیار کوتاه، دیاگرام‌های پیچیده و حرفه‌ای تولید کنید و آن‌ها را به‌راحتی در تحلیل‌ها، مستندات، مقالات و ارائه‌های خود به کار ببرید.
فراموش نکنید که Mermaid یک ابزار متن‌باز و در حال رشد است و هر روز قابلیت‌های جدیدی به آن اضافه می‌شود. پس همین حالا یک چت‌بات را باز کنید و اولین دیاگرام خود را با کمک AI رسم کنید!
| نوع دیاگرام | کاربرد اصلی | سینتکس شروع |
|---|---|---|
| Flowchart | فرایندها، الگوریتم‌ها، جریان کاری | flowchart TD |
| Sequence Diagram | تعامل بین اجزا در طول زمان | sequenceDiagram |
| Class Diagram | مدل‌سازی شیءگرا | classDiagram |
| State Diagram | وضعیت‌ها و انتقال بین آن‌ها | stateDiagram-v2 |
| ER Diagram | طراحی پایگاه داده | erDiagram |
| User Journey | تجربه کاربری و نقاط تماس | journey |
| Gantt Chart | زمان‌بندی پروژه | gantt |
| Pie Chart | نسبت‌های آماری | pie |
| Quadrant Chart | اولویت‌بندی و ماتریس تصمیم | quadrantChart |
| Requirement Diagram | مهندسی نیازمندی‌ها | requirementDiagram |
| Gitgraph | شاخه‌بندی و تاریخچه Git | gitGraph |
| C4 Diagram | معماری نرم‌افزار در سطوح مختلف | C4Context |
| Mindmap | نقشه ذهنی و ایده‌پردازی | mindmap |
| Timeline | رویدادهای زمانی و نقشه راه | timeline |
| ZenUML | دیاگرام توالی به سبک کد | zenuml |
| Sankey Diagram | جریان داده یا انرژی بین گره‌ها | sankey-beta |
| XY Chart | نمودارهای خطی و ستونی داده‌محور | xychart-beta |
| Block Diagram | بلوک‌های سیستمی و روابط ساده | block-beta |
| Packet Diagram | ساختار بایتی پروتکل‌های شبکه | packet-beta |
| Kanban | مدیریت وظایف و برد کانبان | kanban |
| Architecture Diagram | معماری ابری و زیرساخت | architecture-beta |
| Radar Chart | مقایسه چندبعدی (مهارت، عملکرد) | radar-beta |
| Treemap | داده‌های سلسله‌مراتبی و سهم‌بندی | treemap-beta |
مستندات کامل و به‌روز Mermaid
ویرایشگر تعاملی Mermaid Live
کد منبع و مشارکت در توسعه Mermaid
کلمات کلیدی اصلی: Mermaid, هوش مصنوعی, AI, دیاگرام, فلوچارت, مستندسازی, نمودار, پرامپت‌نویسی, ChatGPT, Claude, Gemini
کلمات کلیدی فرعی: نمودار جریان, دیاگرام توالی, مدل کلاس, نقشه ذهنی, کانبان, گیت‌گراف, تایم‌لاین, معماری میکروسرویس, آموزش Mermaid
