MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Mermaid.js Diagrams in Markdown0%
Mermaid.js Diagrams in Markdown
Beginner12 min read•Updated: Jul 11, 2026
Creating architectural diagrams, database entity-relationship models, and system sequence flows used to require external drawing tools like Visio or Figma. If the system architecture changed, the designer had to redraw and re-export the image.
Mermaid.js solves this forever by allowing developers to write diagrams as plain text code directly inside Markdown!
Click to Zoom1. The Mermaid Fenced Code Block
To create a Mermaid diagram, open a standard fenced code block and specify mermaid as the language identifier:
graph TD; Client[Web Browser] -->|HTTP Request| API[Next.js API Gateway]; API -->|Query| DB[(PostgreSQL Database)]; API -->|Cache| Cache[(Redis Cache)];
When parsed by GitHub, GitLab, Notion, or Obsidian, this plain text compiles into an interactive, vector SVG diagram!
2. Flowchart Directions & Node Shapes
Directions:
TDorTB: Top-to-BottomLR: Left-to-RightBT: Bottom-to-TopRL: Right-to-Left
Node Shapes:
graph LR;
A[Rectangle / Process]
B(Rounded Corners)
C{Diamond / Decision}
D[(Cylinder / Database)]
E((Circle / State))
3. Sequence Diagrams (API & Microservice Flows)
Sequence diagrams illustrate how processes communicate with one another over time:
sequenceDiagram autonumber actor User participant App as React Client participant Auth as Auth0 Service participant API as Backend API
User->>App: Click "Sign In" App->>Auth: Redirect to Login Auth-->>App: Return JWT Access Token App->>API: GET /api/dashboard (Bearer Token) API-->>App: 200 OK (User Data)
4. Git Graphs & State Diagrams
You can even illustrate git branching strategies directly in your documentation:
gitGraph commit commit branch feature/auth checkout feature/auth commit commit checkout main merge feature/auth commit
Interactive Quiz
Multiple Choice Questions
Question 1
Which language identifier is placed after opening triple backticks to render Mermaid diagrams in Markdown?
Question 2
In a Mermaid flowchart, what direction is specified by 'graph LR'?
Question 3
Which node shape syntax in Mermaid represents a database cylinder?
Question 4
What is the primary advantage of writing diagrams in Mermaid rather than uploading static PNG images?
Question 5
Which type of Mermaid diagram is best suited for documenting API authentication request/response interactions over time?
Next Lesson
Writing Professional GitHub READMEs & Badges
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| GitHub Alerts & Admonitions | Writing Professional GitHub READMEs & Badges |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.