Skip to main content

Visualizing with Mermaid Charts

Transform your ideas into stunning visual diagrams using GitHub Copilot and the powerful Mermaid Chart extension.

What is Mermaid?​

Mermaid is a text-based diagramming tool that creates beautiful charts from simple markdown-like syntax. With GitHub Copilot integration, you can generate complex diagrams using natural language prompts! ✨

Quick Setup​

Installation​

  1. Go to VS Code Marketplace
  2. Install Mermaid Chart extension
  3. Ensure you have active GitHub Copilot license
  4. Restart VS Code

Basic Usage​

  1. Open Copilot Chat in VS Code
  2. Start prompts with @mermaid-chart
  3. Describe your diagram naturally
  4. Get instant live preview!

Diagram Types & Examples​

1. Flowcharts​

Perfect for process flows and decision trees.

Prompt:

@mermaid-chart create a flowchart for user authentication process

Generated Code:

```mermaid
flowchart TD
    A[User Login Request] --> B{Valid Credentials?}
    B -->|Yes| C[Generate JWT Token]
    B -->|No| D[Return Error Message]
    C --> E[Set Session Cookie]
    E --> F[Redirect to Dashboard]
    D --> G[Show Login Form]
```

Rendered Output:

2. Class Diagrams​

Visualize object-oriented design and relationships.

Prompt:

@mermaid-chart create a class diagram for an e-commerce system

Generated Code:

```mermaid
classDiagram
    class User {
        +String email
        +String password
        +String name
        +login()
        +logout()
    }

    class Product {
        +String id
        +String name
        +Float price
        +Integer stock
        +updateStock()
    }

    class Order {
        +String id
        +Date createdAt
        +Float total
        +addItem()
        +calculateTotal()
    }

    User "1" --o Order : places
    Order "1" --o Product : contains
```

Rendered Output:

3. Sequence Diagrams​

Show interactions over time between different components.

Prompt:

@mermaid-chart create a sequence diagram for API authentication

Generated Code:

```mermaid
sequenceDiagram
    participant Client
    participant API Gateway
    participant Auth Service
    participant Database
    
    Client->>API Gateway: POST /login
    API Gateway->>Auth Service: validate credentials
    Auth Service->>Database: query user
    Database-->>Auth Service: user data
    Auth Service-->>API Gateway: JWT token
    API Gateway-->>Client: 200 OK + token
```

Rendered Output:

4. Entity Relationship Diagrams​

Design database schemas and relationships.

Prompt:

@mermaid-chart create an ER diagram for a blog system

Generated Code:

```mermaid
erDiagram
    USER ||--o{ POST : writes
    USER {
        int id PK
        string email
        string name
        datetime created_at
    }
    
    POST ||--o{ COMMENT : has
    POST {
        int id PK
        string title
        text content
        int author_id FK
        datetime published_at
    }
    
    COMMENT {
        int id PK
        text content
        int post_id FK
        int user_id FK
        datetime created_at
    }
```

Rendered Output:

5. Gantt Charts​

Project timelines and task management.

Prompt:

@mermaid-chart create a Gantt chart for app development project

Generated Code:

```mermaid
gantt
    title App Development Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements Analysis    :a1, 2024-01-01, 7d
    UI/UX Design            :a2, after a1, 10d
    
    section Development
    Backend API             :b1, after a2, 14d
    Frontend Development    :b2, after a2, 21d
    Database Setup          :b3, after a2, 7d
    
    section Testing
    Unit Testing           :c1, after b1, 7d
    Integration Testing    :c2, after b2, 5d
    
    section Deployment
    Production Setup       :d1, after c2, 3d
```

Rendered Output:

Advanced Features​

Generate from Code​

Automatically create diagrams from your existing codebase!

Prompt:

@mermaid-chart analyze my TypeScript classes and create a class diagram

Mermaid Chart extension scans your code and generates accurate representations of your class structures, inheritance, and relationships.

Cloud Architecture Visualization​

Visualize your infrastructure and cloud resources.

Command:

@mermaid-chart /generate_cloud_architecture_diagram

Or use Command Palette:

MermaidChart: Generate Cloud Diagram

Features:

  • Scans configuration files (Docker, Kubernetes, Terraform)
  • Detects cloud services and dependencies
  • Creates comprehensive architecture diagrams
  • Allows file selection for focused diagrams

Database Schema Visualization​

Transform your database schemas into clear ER diagrams.

Command:

@mermaid-chart /generate_er_diagram

Capabilities:

  • Analyzes database migration files
  • Detects model relationships in code
  • Creates comprehensive entity relationship diagrams
  • Supports multiple database formats

Practical Examples​

1. API Documentation​

@mermaid-chart create a sequence diagram showing:
- Client requests product list
- API validates JWT token
- Fetches data from database
- Returns paginated results

2. Microservices Architecture​

@mermaid-chart design a microservices diagram with:
- User Service (authentication)
- Product Service (catalog)
- Order Service (transactions)
- API Gateway (routing)
- Message Queue (communication)

3. Git Workflow​

@mermaid-chart create a Git flow diagram showing:
- Feature branch creation
- Pull request process
- Code review steps
- Merge to main branch

4. CI/CD Pipeline​

@mermaid-chart visualize a CI/CD pipeline with:
- Code commit triggers
- Automated testing phases
- Security scanning
- Deployment stages
- Rollback procedures

Interactive Features​

Live Preview​

  • Real-time rendering as you type
  • Zoom and pan capabilities
  • Export options (PNG, SVG, PDF)
  • Theme customization (light/dark modes)

Collaborative Editing​

  • Share diagrams with team members
  • Version control integration
  • Comment and review capabilities
  • Export to various formats

Auto-Update​

When your code changes, Mermaid Chart can:

  • Detect changes in source files
  • Offer to update related diagrams
  • Maintain consistency between code and documentation
  • Suggest improvements to existing diagrams

Pro Tips & Tricks​

1. Be Specific with Context​

❌ Generic: "Create a flowchart"
✅ Specific: "Create a flowchart for password reset process including email verification"

2. Combine Multiple Diagram Types​

@mermaid-chart create both a sequence diagram and flowchart for the checkout process

3. Iterate and Refine​

# First: Generate basic diagram
@mermaid-chart create user registration flow

# Then: Add details
Add error handling and validation steps to the registration diagram

# Finally: Enhance
Add loading states and success/failure paths

4. Use Consistent Styling​

@mermaid-chart create an architecture diagram using consistent colors:
- Blue for services
- Green for databases  
- Orange for external APIs

Quick Reference​

Essential Commands:

  • @mermaid-chart → Start diagram generation
  • /generate_cloud_architecture_diagram → Cloud infrastructure
  • /generate_er_diagram → Database schemas
  • MermaidChart: Generate → Command palette options

Common Diagram Types:

  • Flowchart → Process flows, decision trees
  • Sequence → API interactions, user flows
  • Class → Object-oriented design
  • ER → Database relationships
  • Gantt → Project timelines
Pro Workflow
  1. Describe your diagram in natural language 🗣️
  2. Review generated code for accuracy ✅
  3. Iterate with specific requests for improvements 🔄
  4. Export in desired format for documentation 📤
  5. Keep diagrams updated with code changes 🔄

Marketplace Link: Mermaid Chart Extension

Ready to explore all Copilot features? Check out our Complete Reference guide! 📚