تسلط بر Mermaid.js: نمودار، نمودارها و تجسم داده ها

سرفصل ها و درس ها

مقدمه Introduction

• به دوره آموزشی Mermaid.js خوش آمدید Welcome to Mermaid.js Course

• معرفی Mermaid.js Introduction to Mermaid.js

• معرفی ویرایشگر زنده Introducing the Live Editor

• کار با Vscode Working with Vscode

• کار با HTML - Javascript Working with HTML - Javascript

• کار با نوت بوک Jupyter Working With Jupyter Notebook

• چرا از Mermaid.js استفاده کنیم؟ Why Use Mermaid.js

نمودار فلوچارت Flowchart Diagram

• مقدمه ای بر فلوچارت Introduction to Flowchart

• مبانی فلوچارت Flowchart Basics

• جهت گیری و مدیریت خطا Orientation and Error Handling

• کار با گره ها - متن گره Working with Nodes - Node Text

• کار با لینک ها Working with Links

• بیشتر در مورد کار با پیوندها More on Working with Links

• کار با Subgraph Working with Subgraph

• تعامل گره فلوچارت Flowchart Node Interactivity

• فلوچارت - خطوط و گره های یک ظاهر طراحی شده Flowchart - Styling Lines and Nodes

نمودار توالی Sequence Diagram

• مقدمه ای بر نمودار توالی Introduction to Sequence Diagram

• کاربردهای نمودار توالی Sequence Diagram Uses

• ایجاد و اتصال شرکت کنندگان Creating and Connecting Participants

• کار با پیام ها، یادداشت ها و نظرات Working with Messages, Notes and Comments

• بیشتر در مورد اشیاء دنباله More on Sequence Objects

• جعبه فعال سازی Activation Box

• فریم جایگزین 1 (Alt) Alternative Frame 1 (Alt)

• تمرین (بازیگران، شرکت کنندگان، پیام ها، Alt) Exercise (Actors, participants, Messages,Alt)

• قاب جایگزین 2 (موازی) Alternative Frame 2 (Parallel)

• قاب جایگزین 3 (منطقه بحرانی) Alternative Frame 3 (Critical Region)

• فریم های بیشتر (حلقه، شکست) More frames (loop, break)

• گروه بندی و رنگ آمیزی Grouping and Coloring

• تنظیمات پیکربندی برای نمودار توالی Configuration Settings for Sequence Diagram

نمودار کلاس Class Diagram

• مقدمه ای بر نمودار کلاس Introduction to Class Diagram

• تعریف نمودار کلاس .mp4 Defining a class Diagram .mp4

• مشاهده کلاس و انواع Class Visibility and Types

• رابطه طبقاتی Class Relationship

• عناوین، برچسب یادداشت ها و نظرات Titles, Notes Label and comments

• کاردینالیته - کثرت Cardinality - Multiplicity

• حاشیه نویسی کلاس Class Annotation

• فضای نام و استایل Namespace and Styling

• سبک دادن به HTML و CSS Styling HTML and CSS

• تعامل گره Node Interactivity

نمودار حالت State Diagram

• مقدمه ای بر نمودار حالت Introduction to State Diagram

• اولین نمودار ما Our First Diagram

• نمودار توصیف و برچسب گذاری Describing and Labeling diagram

• حالت مرکب Composite State

• کار با انتخاب Working with Choice

• چنگال و پیوستن Fork and Join

• نمودار حالت یک ظاهر طراحی شده Styling State Diagram

نمودار رابطه موجودیت Entity Relationship Diagram

• مقدمه ای بر نمودار روابط موجودیت Introduction to Entity Relationship Diagram

• نهادهای ERD ERD Entities

• رابطه 1 Relationship 1

• رابطه 2 Relationship 2

• یک ظاهر طراحی شده نمودار ER Styling ER Diagram

سفر کاربر User Journey

• مقدمه ای بر نمودار سفر کاربر Introduction to User Journey Diagram

• Jounrey کاربر در Mermaid.js User Jounrey in Mermaid.js

• تمرین 2- شام مایک و سفر Exercise 2- Mike and journey Dinner

• تمرین 3- بازخورد کسب و کار دندانپزشکی Exercise 3- Dental Business Feedback

نمودار گانت نمودار Gantt Chart Diagram

• مقدمه ای بر گانت چارت Introduction to Gantt Chart

• نمودار گانت ساده Simple Gantt Chart

• افزودن وابستگی ها و وضعیت Adding Dependencies and Status

• کار با Date-Time 1 Working with Date-Time 1

• کار با Date-Time 2 Working with Date-Time 2

• اضافه کردن Milestone و Compact Adding Milestone and Compact

• نمودار گانت یک ظاهر طراحی شده Styling Gant Chart

• تعامل با گانت نمودار Interating with Gantt Chart

نمودار دایره ای Pie Chart Diagram

• مقدمه ای بر نمودار دایره ای و نمودار نمونه Introduction to Pie Chart and Sample Diagram

• پیکربندی نمودار دایره ای Pie Chart Configurations

نمودار نمودار چهارگانه Quadrant Chart Diagram

• مقدمه ای بر نمودار چهارگانه Introduction to Quadrant Chart Diagram

• بررسی نمودار ربع 1 Exploring Quadrant Chart 1

• بررسی نمودار ربع 2 Exploring Quadrant Chart 2

• ربع یک ظاهر طراحی شده Styling Quadrants

• تنظیمات پیکربندی Configuration Settings

نمودار مورد نیاز Requirement Diagram

• مقدمه ای بر نمودار نیازمندی ها Introduction to Requirement Diagram

• کاوش نمودار مورد نیاز Exploring Requirement Diagram

• نمودار مورد نیاز برنامه وب Web App Requirement Diagram

• ویژگی کامل نمودار مورد نیاز Requirement Diagram Full Feature

نمودار GitGraph GitGraph Diagram

• مقدمه ای بر نمودار GitGraph Introduction to GitGraph Diagram

• GitGraph در Mermaid Live GitGraph in Mermaid Live

• کار با شعبه 1 Working with Branch 1

• کار با شعبه 2 Working with Branch 2

• تنظیمات پیکربندی 1 Configuration Settings 1

• تنظیمات پیکربندی 2 Configuration Settings 2

• سبک سازی Gitgraph 1 Styling Gitgraph 1

• سبک سازی Gitgraph 2 Styling Gitgraph 2

نمودار C4 C4 Diagram

• مقدمه ای بر نمودار C4 Introduction to C4 Diagram

• نمودار زمینه Context Diagram

• نمودار ظرف Container Diagram

• نمودار مؤلفه Component Diagram

• نمودار کد Code Diagram

• نمودار دینامیک Dynamic Diagram

• نمودار استقرار Deployment Diagram

نمودار نقشه ذهنی Mindmap Diagram

• مقدمه ای بر نمودار نقشه ذهنی Introduction to Mindmap Diagram

• با نمودار Mindmap شروع کنید Starting with Mindmap diagram

• اشکال گره Node shapes

• اضافه کردن آیکون ها و کاراکترهای خاص Adding Icons and Special Characters

نمودار جدول زمانی Timeline Diagram

• مقدمه ای بر نمودار جدول زمانی Introduction to Timeline Diagram

• شروع به کار Getting Started

• جدول زمانی را توصیف و گروه بندی کنید Describe and Group Timelines

• پیکربندی یک ظاهر طراحی شده Styling Configuration

نمودار ZenUML ZenUML Diagram

• مقدمه ای بر نمودار ZenUML Introduction to ZenUML Diagram

• شروع کار با نمودار ZenUML Getting Started with ZenUML Diagram

• Annotators ZenUML ZenUML Annotators

• بیشتر در مورد ZenUML-شرایط More on ZenUML- Conditions

• اطلاعات بیشتر در مورد ZenUML- Sync Messages More on ZenUML- Sync Messages

نمودار سانکی Sankey Diagram

• مقدمه ای بر نمودار سانکی Introduction to Sankey Diagram

• Sankey در عمل Sankey In Action

• سانکی بیشتر More Sankey

نمودار XYChart XYChart Diagram

• مقدمه ای بر نمودار XYChart Introduction to XYChart Diagram

• کار با نوار و نمودار Working with Bar and Chart

• پیکربندی Sankey Sankey Configuration