### Run Starlight Demo Locally

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Install dependencies and start the development server for the Starlight demo site.

```bash
cd starlight-demo
npm install
npm run dev
```

--------------------------------

### Install Dependencies and Run Demos

Source: https://github.com/joesaby/astro-mermaid/blob/main/AGENTS.md

Commands to install project dependencies, run tests, and start the local development servers for both the Starlight and standalone Astro demos.

```bash
# Install dependencies
npm install

# Run tests
npm test

# Run starlight demo locally
cd starlight-demo && npm install && npm run dev

# Run standalone demo locally
cd astro-demo && npm install && npm run dev
```

--------------------------------

### Clone and Install Project Dependencies

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Clone the repository and install the necessary Node.js dependencies to get started.

```bash
git clone https://github.com/joesaby/astro-mermaid.git
cd astro-mermaid
npm install
```

--------------------------------

### Run Standalone Astro Demo Locally

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Install dependencies and start the development server for the standalone Astro demo site.

```bash
cd astro-demo
npm install
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/README.md

Install the `astro-mermaid` integration and the `mermaid` library using npm.

```bash
npm install astro-mermaid mermaid
```

--------------------------------

### Install Packages with Yarn

Source: https://github.com/joesaby/astro-mermaid/blob/main/starlight-demo/src/content/docs/installation.md

Alternative installation command using Yarn.

```bash
yarn add astro-mermaid mermaid
```

--------------------------------

### Install Packages with pnpm

Source: https://github.com/joesaby/astro-mermaid/blob/main/starlight-demo/src/content/docs/installation.md

Alternative installation command using pnpm.

```bash
pnpm add astro-mermaid mermaid
```

--------------------------------

### Install astro-mermaid and mermaid

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/installation.md

Install the necessary packages using npm, yarn, or pnpm.

```bash
npm install astro-mermaid mermaid
```

```bash
# yarn
yarn add astro-mermaid mermaid
```

```bash
# pnpm
pnpm add astro-mermaid mermaid
```

--------------------------------

### Interface and Implementation Example

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/class.md

Demonstrates how to define interfaces and show which classes implement them, useful for defining contracts.

```mermaid
classDiagram
    class IFlyable {
        <<interface>>
        +void fly()
        +void land()
    }
    
    class Bird {
        +String species
        +int wingspan
        +void eat()
    }
    
    class Airplane {
        +String model
        +int passengers
        +void takeOff()
    }
    
    IFlyable <|.. Bird : implements
    IFlyable <|.. Airplane : implements
    
    class Pilot {
        +String name
        +String certification
        +void navigate()
    }
    
    Pilot --> Airplane : operates
```

--------------------------------

### Simple Example with Title

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/git.md

A basic Git graph example with a custom title defined within the Mermaid syntax.

```mermaid
---
title: Example Git diagram
---
gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit
```

--------------------------------

### Conventional Commits Examples

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Illustrative examples of valid commit messages following the Conventional Commits specification.

```text
fix: resolve theme flicker on initial page load
feat: add quadrant chart diagram support
feat(icons): support custom icon packs in architecture diagrams
chore: update dev dependencies
docs: add migration guide for Astro 6
feat!: require Astro 6 as minimum version
```

--------------------------------

### Simple State Machine Example

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/state.md

A basic state diagram showing transitions between Idle, Running, and Error states.

```mermaid
[*] --> Idle
Idle --> Running : start
Running --> Idle : stop
Running --> Error : failure
Error --> Idle : reset
Idle --> [*] : shutdown
```

--------------------------------

### Player State Machine Example

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/state.md

A state diagram for a media player, showing states like Stopped, Playing, Paused, and Loading, with nested states for playback details.

```mermaid
[*] --> Stopped
Stopped --> Playing : play
Playing --> Paused : pause
Paused --> Playing : resume
Playing --> Stopped : stop
Paused --> Stopped : stop

state Playing {
    [*] --> Loading
    Loading --> Buffering : data_needed
    Buffering --> Streaming : buffer_full
    Streaming --> Buffering : buffer_low
    Loading --> Streaming : ready
}

note right of Playing : Audio/Video playback state
note left of Stopped : Initial and final state
```

--------------------------------

### Architecture Diagram with Iconoir Icons

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/test-icons.md

This example demonstrates using the 'iconoir:' prefix to integrate Iconoir icons for elements like laptops, clients, servers, and databases within an architecture diagram.

```mermaid
architecture-beta
  group host(iconoir:laptop)[Host]

  service client1(iconoir:app-window)[Client] in host
  service server1(iconoir:server)[Server]
  service tool1(iconoir:tools)[Tool]
  client1:B -- T:server1
  server1:B -- T:tool1
  
  service client2(iconoir:app-window)[Client] in host
  service server2(iconoir:server)[Server]
  service tool2(iconoir:tools)[Tool]
  service db2(iconoir:database)[RAG]
  client2:B -- T:server2
  server2:B -- T:tool2
  server2:R -- L:db2

```

--------------------------------

### Mobile App Onboarding Journey Diagram

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/journey.md

Details the typical steps a user goes through when downloading, launching, setting up an account, and starting to use a mobile application. Ideal for visualizing the initial user experience.

```mermaid
journey
    title Mobile App Onboarding
    section Download
      Discover app        : 4: User
      Read description    : 3: User
      Check reviews       : 4: User
      Download app        : 5: User
    section First Launch
      Open app           : 5: User
      Grant permissions  : 3: User
      View welcome       : 4: User
      Skip tutorial      : 2: User
    section Account Setup
      Create account     : 3: User
      Verify email       : 4: User
      Setup profile      : 4: User
      Import contacts    : 3: User
    section First Use
      Explore features   : 5: User
      Complete first task: 5: User
      Invite friends     : 4: User
      Rate app          : 4: User
```

--------------------------------

### Render a Mindmap with Astro Mermaid

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/index.mdx

This example demonstrates creating a mindmap diagram using Mermaid syntax. It's useful for visualizing hierarchical information.

```mermaid
mindmap
  root((Mermaid))
    Flowcharts
      Basic Flow
      Decision Trees
      Process Maps
    Sequence
      API Calls
      User Interactions
      System Flow
    Class Diagrams
      OOP Design
      Architecture
    State Diagrams
      FSM
      Workflows
    ER Diagrams
      Database Design
      Relationships
    Gantt Charts
      Project Planning
      Timelines
    More
      Git Graphs
      User Journey
      Pie Charts
      C4 Diagrams
```

--------------------------------

### Install ELK layout for Mermaid

Source: https://github.com/joesaby/astro-mermaid/blob/main/README.md

Install the @mermaid-js/layout-elk package to enable the ELK layout for Mermaid diagrams. This is an optional step for advanced layout control.

```bash
npm install @mermaid-js/layout-elk
```

--------------------------------

### Minimal Astro Mermaid Setup

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/configuration.md

Basic integration of astro-mermaid into an Astro project. No specific options are provided, using all defaults.

```javascript
import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [mermaid()]
});
```

--------------------------------

### Theme Switching Logic

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/README.md

Example of how theme switching is handled by updating the body's data-theme attribute.

```javascript
// Theme switching works with mermaid auto-theme
body.setAttribute('data-theme', newTheme);
```

--------------------------------

### Basic astro-mermaid Integration Setup

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/installation.md

Add the astro-mermaid integration to your Astro project's configuration file (`astro.config.mjs`).

```javascript
import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid()
  ]
});
```

--------------------------------

### Game Character States with ELK layout

Source: https://github.com/joesaby/astro-mermaid/blob/main/starlight-demo/src/content/docs/examples/state.md

Same game character states as the previous example, but configured to use the ELK layout for rendering.

```mermaid
---
config:
  layout: elk
---
stateDiagram-v2
    [*] --> Idle
    
    Idle --> Walking : move
    Walking --> Running : sprint
    Running --> Walking : release_sprint
    Walking --> Idle : stop
    Running --> Idle : stop
    
    Idle --> Jumping : jump
    Walking --> Jumping : jump
    Running --> Jumping : jump
    Jumping --> Idle : land
    
    Idle --> Attacking : attack
    Walking --> Attacking : attack
    Running --> Attacking : attack
    Attacking --> Idle : attack_complete
    
    state Attacking {
        [*] --> WindUp
        WindUp --> Strike : wind_up_complete
        Strike --> Recovery : strike_complete
        Recovery --> [*] : recovery_complete
    }
    
    Idle --> Dead : health_zero
    Walking --> Dead : health_zero
    Running --> Dead : health_zero
    Jumping --> Dead : health_zero
    Attacking --> Dead : health_zero
    
    Dead --> [*] : respawn
```

--------------------------------

### Standalone Astro Demo Directory

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Directory containing the demo site that uses a standalone Astro setup.

```directory
astro-demo/
```

--------------------------------

### Configure Astro Mermaid Integration

Source: https://github.com/joesaby/astro-mermaid/blob/main/CLAUDE.md

Add the astro-mermaid integration to your Astro project's configuration file. Ensure mermaid is installed as a peer dependency.

```javascript
// astro.config.mjs
import mermaid from 'astro-mermaid';
export default defineConfig({
  integrations: [mermaid()]
});
```

--------------------------------

### ATM State Machine Example

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/state.md

Illustrates the states and transitions of an Automated Teller Machine (ATM), including card insertion, PIN verification, transaction selection, and completion.

```mermaid
[*] --> WaitingCard
WaitingCard --> CardInserted : insert_card
CardInserted --> WaitingPIN : card_valid
CardInserted --> WaitingCard : card_invalid

WaitingPIN --> Authenticated : correct_pin
WaitingPIN --> WaitingCard : wrong_pin_3_times
WaitingPIN --> WaitingPIN : wrong_pin

Authenticated --> SelectTransaction : authenticated
SelectTransaction --> Balance : check_balance
SelectTransaction --> Withdraw : withdraw_money
SelectTransaction --> Deposit : deposit_money

Balance --> SelectTransaction : continue
Withdraw --> SelectTransaction : transaction_complete
Deposit --> SelectTransaction : transaction_complete

SelectTransaction --> EjectCard : finish
Balance --> EjectCard : finish
Withdraw --> EjectCard : finish
Deposit --> EjectCard : finish

EjectCard --> [*] : card_ejected
```

--------------------------------

### Game Character States Example

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/state.md

A state diagram for a game character, showing states like Idle, Walking, Running, Jumping, Attacking, and Dead, with nested states for attack phases.

```mermaid
[*] --> Idle

Idle --> Walking : move
Walking --> Running : sprint
Running --> Walking : release_sprint
Walking --> Idle : stop
Running --> Idle : stop

Idle --> Jumping : jump
Walking --> Jumping : jump
Running --> Jumping : jump
Jumping --> Idle : land

Idle --> Attacking : attack
Walking --> Attacking : attack
Running --> Attacking : attack
Attacking --> Idle : attack_complete

state Attacking {
    [*] --> WindUp
    WindUp --> Strike : wind_up_complete
    Strike --> Recovery : strike_complete
    Recovery --> [*] : recovery_complete
}

Idle --> Dead : health_zero
Walking --> Dead : health_zero
Running --> Dead : health_zero
Jumping --> Dead : health_zero
Attacking --> Dead : health_zero

Dead --> [*] : respawn
```

--------------------------------

### Astro Configuration with Mermaid Integration

Source: https://github.com/joesaby/astro-mermaid/blob/main/CLAUDE.md

Ensure the mermaid integration is placed before Starlight in the integrations array for correct rehype plugin functionality. This setup configures basic theme and mermaid options.

```javascript
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid({
      theme: "forest",
      autoTheme: true,
      mermaidConfig: {
        flowchart: { curve: "basis" }
      }
    }),
    starlight({ /* config */ })  // AFTER mermaid
  ]
});

```

--------------------------------

### Configuration Options

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/README.md

Illustrates various configuration options for the `astro-mermaid` integration, including themes, auto-theming, Mermaid.js settings, and icon packs.

```javascript
mermaid({
  theme: 'forest',           // Default theme
  autoTheme: true,          // Auto light/dark switching
  mermaidConfig: {          // Mermaid.js config
    flowchart: { curve: 'basis' }
  },
  iconPacks: [             // Optional icon packs
    {
      name: 'logos',
      loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
    }
  ]
})
```

--------------------------------

### Netlify Deploy Preview Build Command

Source: https://github.com/joesaby/astro-mermaid/blob/main/AGENTS.md

The build command pattern used for Netlify deploy previews. It ensures correct dependency resolution for the local `astro-mermaid` package.

```bash
cd .. && npm install && cd <demo-dir> && npm install && npm run build
```

--------------------------------

### Authentication Flow with Alternatives

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/sequence.md

Shows an authentication process with conditional logic for valid and invalid credentials.

```mermaid
sequenceDiagram
    actor User
    participant App
    participant Auth as Auth Service
    participant DB as Database
    
    User->>App: Login (email, password)
    App->>Auth: Validate Credentials
    Auth->>DB: Check User
    DB-->>Auth: User Data
    
    alt Valid Credentials
        Auth-->>App: JWT Token
        App-->>User: Login Success
        App->>App: Store Token
    else Invalid Credentials
        Auth-->>App: Error
        App-->>User: Login Failed
    end
```

--------------------------------

### Basic Git Flow

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/git.md

Illustrates a simple Git branching and merging sequence.

```mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
```

--------------------------------

### Conventional Commits Breaking Change Footer

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Example of using the BREAKING CHANGE footer to indicate a breaking change in a commit message.

```text
feat: require Astro 6 content config format

BREAKING CHANGE: Content config must now use src/content.config.ts with loaders
```

--------------------------------

### Run Project Tests

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

Execute tests using npm scripts. Options include running all tests, tests with a UI, or tests with coverage reporting.

```bash
npm test              # Run tests
npm run test:ui       # Run tests with UI
npm run test:coverage # Run tests with coverage
```

--------------------------------

### Basic Sequence Diagram

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/sequence.md

Illustrates a simple user interaction flow with a browser, server, and database.

```mermaid
sequenceDiagram
    participant User
    participant Browser
    participant Server
    participant Database
    
    User->>Browser: Enter URL
    Browser->>Server: HTTP Request
    Server->>Database: Query Data
    Database-->>Server: Return Results
    Server-->>Browser: HTTP Response
    Browser-->>User: Display Page
```

--------------------------------

### Main Integration File

Source: https://github.com/joesaby/astro-mermaid/blob/main/CONTRIBUTING.md

The primary integration file for astro-mermaid, containing remark and rehype plugins, and the client-side script.

```javascript
astro-mermaid-integration.js
```

--------------------------------

### Product Launch Campaign Timeline

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/timeline.md

Details the phases and activities of a product launch campaign, including pre-launch, launch week, and post-launch.

```mermaid
timeline
    title Product Launch Campaign
    
    section Pre-launch (8 weeks)
        Week 1-2  : Market research
                  : Competitor analysis
        Week 3-4  : Content creation
                  : Landing page
        Week 5-6  : Beta testing
                  : Feedback collection
        Week 7-8  : Marketing material
                  : Press kit preparation
    
    section Launch Week
        Day 1     : Soft launch
                  : Internal team
        Day 3     : Beta user access
                  : Early feedback
        Day 5     : Public announcement
                  : Media outreach
        Day 7     : Full public launch
                  : Social media campaign
    
    section Post-launch (4 weeks)
        Week 1    : Monitor metrics
                  : Customer support
        Week 2    : Gather feedback
                  : Feature requests
        Week 3    : Quick fixes
                  : Performance optimization
        Week 4    : Success analysis
                  : Next phase planning
```

--------------------------------

### Loops and Cache Checks

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/sequence.md

Illustrates a data retrieval process that first checks a cache before querying the database.

```mermaid
sequenceDiagram
    participant Client
    participant Server
    participant Cache
    participant DB
    
    Client->>Server: Request Data
    
    loop Check Cache First
        Server->>Cache: Get from Cache
        alt Cache Hit
            Cache-->>Server: Cached Data
            Server-->>Client: Return Data
        else Cache Miss
            Server->>DB: Query Database
            DB-->>Server: Fresh Data
            Server->>Cache: Update Cache
            Server-->>Client: Return Data
        end
    end
```

--------------------------------

### Software Release Cycle Timeline

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/timeline.md

Outlines the stages and dates for software versions, from initial development to major updates.

```mermaid
timeline
    title Software Release Timeline
    
    section Version 1.0
        Jan 2024  : Development start
                  : Core features
        Mar 2024  : Alpha release
                  : Internal testing
        May 2024  : Beta release
                  : User feedback
        Jul 2024  : Version 1.0 release
                  : Public launch
    
    section Version 2.0
        Aug 2024  : Planning v2.0
                  : New features design
        Oct 2024  : Development phase
                  : Advanced features
        Dec 2024  : Testing phase
                  : Performance optimization
        Feb 2025  : Version 2.0 release
                  : Major update
```

--------------------------------

### Project Development Timeline

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/timeline.md

Illustrates a project's development phases chronologically, from planning to deployment.

```mermaid
timeline
    title Project Development Timeline
    
    section Planning Phase
        Week 1    : Requirements gathering
                  : Stakeholder meetings
        Week 2    : Technical specification
                  : Architecture design
        Week 3    : Project planning
                  : Resource allocation
    
    section Development Phase
        Month 1   : Core backend development
                  : Database setup
        Month 2   : Frontend development
                  : UI/UX implementation
        Month 3   : Integration
                  : API development
        Month 4   : Testing
                  : Bug fixes
    
    section Deployment Phase
        Week 1    : Production setup
                  : Final testing
        Week 2    : Launch
                  : Monitoring setup
```

--------------------------------

### Register Icon Packs for Mermaid Diagrams

Source: https://github.com/joesaby/astro-mermaid/blob/main/README.md

Register custom icon packs to use in your Mermaid diagrams. The loader function should fetch and return an Iconify JSON object. This example shows how to register the 'logos' icon pack.

```javascript
iconPacks: [
  {
    name: 'logos',
    loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
  }
]
```

--------------------------------

### Basic Class Diagram

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/class.md

Illustrates a simple class structure with attributes and methods, showing inheritance relationships.

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +void eat()
        +void sleep()
    }
    
    class Dog {
        +String breed
        +void bark()
    }
    
    class Cat {
        +String furColor
        +void meow()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
```

--------------------------------

### C4 System Context Diagram for E-Commerce Platform

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/c4.md

Visualizes the high-level system context of an e-commerce platform, showing its interactions with users and external systems. Use this to define the scope and boundaries of a system.

```mermaid
C4Context
    title E-Commerce Platform System Context
    
    Person(customer, "Customer", "Person who shops online")
    Person(admin, "Administrator", "Manages the platform")
    Person(vendor, "Vendor", "Sells products on platform")
    
    System(ecommerce, "E-Commerce Platform", "Online shopping platform with multiple services")
    
    System_Ext(payment, "Payment Gateway", "Processes payments")
    System_Ext(shipping, "Shipping Service", "Handles logistics")
    System_Ext(email, "Email Service", "Sends notifications")
    System_Ext(analytics, "Analytics Platform", "Tracks user behavior")
    
    Rel(customer, ecommerce, "Shops using")
    Rel(admin, ecommerce, "Manages")
    Rel(vendor, ecommerce, "Sells through")
    
    Rel(ecommerce, payment, "Processes payments via")
    Rel(ecommerce, shipping, "Arranges shipping via")
    Rel(ecommerce, email, "Sends emails via")
    Rel(ecommerce, analytics, "Sends data to")
```

--------------------------------

### Learning Programming Mindmap

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/mindmap.md

An organizational structure for learning programming, covering fundamentals, languages, frameworks, and tools.

```mermaid
mindmap
  root((Programming))
    Fundamentals
      Variables
      Data Types
      Control Structures
      Functions
    Languages
      JavaScript
        Frontend
        Backend (Node.js)
      Python
        Web Development
        Data Science
        AI/ML
      Java
        Enterprise Apps
        Android
    Frameworks
      Web
        React
        Vue
        Angular
      Mobile
        React Native
        Flutter
    Tools
      IDEs
        VS Code
        IntelliJ
      Version Control
        Git
        GitHub
      Databases
        SQL
        NoSQL
```

--------------------------------

### Programming Learning Journey Timeline

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/timeline.md

Maps out a structured path for learning programming skills, from beginner to advanced levels.

```mermaid
timeline
    title Programming Learning Journey
    
    section Beginner
        Month 1   : HTML & CSS basics
                  : First webpage
        Month 2   : JavaScript fundamentals
                  : DOM manipulation
        Month 3   : Basic projects
                  : Portfolio website
    
    section Intermediate
        Month 4   : React framework
                  : Component development
        Month 5   : Backend with Node.js
                  : Database integration
        Month 6   : Full-stack project
                  : CRUD application
    
    section Advanced
        Month 7   : Advanced React patterns
                  : State management
        Month 8   : DevOps & deployment
                  : CI/CD pipelines
        Month 9   : System design
                  : Scalable applications
```

--------------------------------

### Project Timeline Gantt Chart

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/gantt.md

Define a project timeline with tasks, their statuses, and durations. Use 'after' to specify dependencies.

```mermaid
gantt
    title A Simple Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements gathering    :done,    des1, 2024-01-01, 2024-01-07
    Design phase             :active,  des2, 2024-01-08, 10d
    Review and approval      :         des3, after des2, 5d
    
    section Development
    Backend development      :         dev1, after des3, 20d
    Frontend development     :         dev2, after des3, 15d
    Integration             :         dev3, after dev2, 10d
    
    section Testing
    Unit testing            :         test1, after dev1, 5d
    Integration testing     :         test2, after dev3, 7d
    User acceptance testing :         test3, after test2, 5d
```

--------------------------------

### Software Development Process Mindmap

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/mindmap.md

Use this mindmap to visualize the stages and key activities involved in a typical software development lifecycle.

```mermaid
mindmap
  root((Software Development))
    Planning
      Requirements Gathering
      Project Scope
      Timeline
      Resource Allocation
    Design
      Architecture
      UI/UX Design
      Database Design
      API Design
    Development
      Frontend
        HTML/CSS
        JavaScript
        Frameworks
      Backend
        Server Logic
        APIs
        Database
      Testing
        Unit Tests
        Integration Tests
        E2E Tests
    Deployment
      CI/CD
      Cloud Services
      Monitoring
      Maintenance
```

--------------------------------

### Detailed Class Diagram with Abstract Class and Composition

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/class.md

Shows a more complex diagram with an abstract class, composition, and inheritance, suitable for detailed system modeling.

```mermaid
classDiagram
    class Vehicle {
        <<abstract>>
        +String licensePlate
        +int year
        +String manufacturer
        +void start()
        +void stop()
        +void getInfo()
    }
    
    class Car {
        +int numberOfDoors
        +String fuelType
        +void honkHorn()
    }
    
    class Motorcycle {
        +String engineType
        +boolean hasSidecar
        +void wheelie()
    }
    
    class Engine {
        +int horsepower
        +String type
        +void start()
        +void stop()
    }
    
    Vehicle <|-- Car
    Vehicle <|-- Motorcycle
    Vehicle *-- Engine : contains
    
    class Driver {
        +String name
        +String licenseNumber
        +void drive(Vehicle v)
    }
    
    Driver --> Vehicle : drives
```

--------------------------------

### Gitflow Workflow

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/git.md

Visualizes the Gitflow branching model, including feature, release, and hotfix branches.

```mermaid
gitGraph
    commit
    branch develop
    checkout develop
    commit
    branch feature-user
    checkout feature-user
    commit
    commit
    commit
    checkout develop
    merge feature-user
    commit
    branch release-v1
    checkout release-v1
    commit
    commit
    checkout main
    merge release-v1
    commit tag: "v1.0"
    checkout develop
    merge release-v1
    branch hotfix
    checkout hotfix
    commit
    checkout main
    merge hotfix
    commit tag: "v1.0.1"
    checkout develop
    merge hotfix
```

--------------------------------

### Configure astro-mermaid Options

Source: https://github.com/joesaby/astro-mermaid/blob/main/README.md

Customize the mermaid integration by passing configuration options. This includes setting themes, enabling logging, providing mermaid-specific configurations, and registering icon packs.

```javascript
mermaid({
  // Default theme: 'default', 'dark', 'forest', 'neutral', 'base'
  theme: 'forest',

  // Enable automatic theme switching based on data-theme attribute
  autoTheme: true,

  // Enable client-side logging (default: true). Set to false to suppress
  // console.log output in the browser. Errors are always logged.
  enableLog: false,

  // Additional mermaid configuration
  mermaidConfig: {
    flowchart: {
      curve: 'basis'
    }
  },

  // Register icon packs for use in diagrams
  iconPacks: [
    {
      name: 'logos',
      loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
    },
    {
      name: 'iconoir',
      loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(res => res.json())
    }
  ]
})
```

--------------------------------

### Technology Stack Usage Pie Chart

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/pie.md

Show the distribution of technologies used in projects. This is helpful for assessing technology adoption and planning future development.

```mermaid
pie title Technology Stack in Projects
    "JavaScript/TypeScript" : 35
    "Python" : 25
    "Java" : 15
    "C#/.NET" : 12
    "Go" : 8
    "Others" : 5
```

--------------------------------

### Mermaid System Context Diagram

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/c4.md

Defines the system context for the Internet Banking System, showing external actors and systems. Use this to illustrate the high-level scope of a system.

```mermaid
C4Context
    title System Context diagram for Internet Banking System
    
    Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
    Person(customerB, "Banking Customer B")
    Person_Ext(customerC, "Banking Customer C", "desc")
    
    System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
    
    System_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
    System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
    
    Rel(customerA, SystemAA, "Uses")
    Rel(SystemAA, SystemE, "Uses")
    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
    Rel(SystemC, customerA, "Sends e-mails to")
    
    UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
    UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
    UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
    UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
    UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```

--------------------------------

### Production Optimized Configuration

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/configuration.md

Set up astro-mermaid for production with a 'neutral' theme, enabled auto-theming, and optimized Mermaid configurations for logging and security.

```javascript
import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid({
      theme: 'neutral',
      autoTheme: true,
      mermaidConfig: {
        startOnLoad: false,
        logLevel: 'error',
        securityLevel: 'strict'
      }
    })
  ]
});
```

--------------------------------

### TypeScript Support for Configuration

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/installation.md

The integration provides TypeScript definitions for autocompletion of configuration options in your editor.

```typescript
import mermaid from 'astro-mermaid';
// Full TypeScript support for options
```

--------------------------------

### C4 Container Diagram for E-Commerce Platform

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/c4.md

Details the container-level architecture of an e-commerce platform, showing deployed software units and their relationships. Use this to illustrate the runtime structure of a system.

```mermaid
C4Container
    title E-Commerce Platform - Container View
    
    Person(customer, "Customer")
    Person(admin, "Admin")
    
    Container_Boundary(platform, "E-Commerce Platform") {
        Container(web, "Web Application", "React", "Customer-facing web interface")
        Container(admin_panel, "Admin Panel", "Vue.js", "Administrative interface")
        Container(api_gateway, "API Gateway", "Kong", "Routes requests to services")
        
        Container(user_service, "User Service", "Node.js", "Manages user accounts and authentication")
        Container(product_service, "Product Service", "Java Spring", "Manages product catalog")
        Container(order_service, "Order Service", "Python FastAPI", "Handles order processing")
        Container(cart_service, "Cart Service", "Go", "Manages shopping carts")
        
        ContainerDb(user_db, "User Database", "PostgreSQL", "Stores user data")
        ContainerDb(product_db, "Product Database", "MongoDB", "Stores product data")
        ContainerDb(order_db, "Order Database", "PostgreSQL", "Stores order data")
        ContainerDb(cache, "Cache", "Redis", "Caches frequently accessed data")
    }
    
    System_Ext(payment, "Payment Gateway")
    
    Rel(customer, web, "Uses")
    Rel(admin, admin_panel, "Uses")
    
    Rel(web, api_gateway, "Makes API calls")
    Rel(admin_panel, api_gateway, "Makes API calls")
    
    Rel(api_gateway, user_service, "Routes to")
    Rel(api_gateway, product_service, "Routes to")
    Rel(api_gateway, order_service, "Routes to")
    Rel(api_gateway, cart_service, "Routes to")
    
    Rel(user_service, user_db, "Reads/Writes")
    Rel(product_service, product_db, "Reads/Writes")
    Rel(order_service, order_db, "Reads/Writes")
    
    Rel(cart_service, cache, "Stores cart data")
    Rel(order_service, payment, "Processes payments")
    
    UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")
```

--------------------------------

### Astro Mermaid Integration Configuration Options

Source: https://github.com/joesaby/astro-mermaid/blob/main/CLAUDE.md

Customize the mermaid integration with options for theme, automatic theme switching, mermaid configuration, and icon pack loading. Icon packs require a loader function to fetch icon data.

```javascript
mermaid({
  theme: 'forest',              // 'default', 'dark', 'forest', 'neutral', 'base'
  autoTheme: true,              // Enable automatic theme switching
  mermaidConfig: {              // Additional mermaid configuration
    flowchart: { curve: 'basis' },
    startOnLoad: false
  },
  iconPacks: [                  // Register icon packs for use in diagrams
    {
      name: 'logos',
      loader: () => fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then(res => res.json())
    },
    {
      name: 'iconoir',
      loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(res => res.json())
    }
  ]
})
```

--------------------------------

### Feature Branch Workflow

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/git.md

Demonstrates a common feature branch workflow involving multiple feature branches and merges into main.

```mermaid
gitGraph
    commit
    commit
    branch feature-auth
    checkout feature-auth
    commit
    commit
    commit
    checkout main
    commit
    merge feature-auth
    commit
    branch feature-dashboard
    checkout feature-dashboard
    commit
    commit
    checkout main
    commit
    checkout feature-dashboard
    merge main
    commit
    commit
    checkout main
    merge feature-dashboard
    commit
```

--------------------------------

### Conventional Commit Types for Versioning

Source: https://github.com/joesaby/astro-mermaid/blob/main/AGENTS.md

Illustrates different commit types and their impact on semantic versioning. Use 'fix' for patches, 'feat' for minor updates, and 'feat!' or 'BREAKING CHANGE:' footer for major releases. 'chore', 'docs', 'ci', 'test', 'refactor', 'style' do not trigger releases.

```markdown
### Types and their effect on versioning

| Type | Release | Example |
|------|---------|---------|
| `fix` | Patch | `fix: prevent theme flicker on initial load` |
| `feat` | Minor | `feat: add support for quadrant charts` |
| `feat!` | **Major** | `feat!: drop Astro 4 support` |
| `BREAKING CHANGE:` footer | **Major** | Any type with this footer triggers a major release |
| `chore`, `docs`, `ci`, `test`, `refactor`, `style` | None | `chore: update dev dependencies` |
```

--------------------------------

### Architecture Diagram with AWS Icons

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/test-icons.md

Use this syntax to include icons from icon packs like 'logos:aws-lambda' and 'logos:postgresql' in your architecture diagrams.

```mermaid
architecture-beta
  group api(logos:aws-lambda)[API]

  service db(logos:postgresql)[Database] in api
  service disk1(logos:aws-s3)[Storage] in api
  service disk2(logos:cloudflare)[CDN] in api
  service server(logos:docker)[Server] in api

  db:L -- R:server
  disk1:T -- B:server
  disk2:T -- B:db

```

--------------------------------

### Render a Flowchart with Astro Mermaid

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/index.mdx

Use this basic Mermaid syntax to create a flowchart. Ensure the mermaid integration is set up in your Astro project.

```mermaid
graph TD
    A[Astro Project] -->|Add Integration| B[astro-mermaid]
    B --> C{Configure Options}
    C -->|Theme| D[Choose Theme]
    C -->|Auto Theme| E[Enable/Disable]
    C -->|Config| F[Mermaid Options]
    D --> G[Ready to Use!]
    E --> G
    F --> G
```

--------------------------------

### Collaborative Development

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/git.md

Shows a Git graph representing parallel development by multiple contributors (Alice and Bob) and their merges.

```mermaid
gitGraph
    commit
    commit
    branch alice-feature
    checkout alice-feature
    commit
    commit
    checkout main
    branch bob-feature
    checkout bob-feature
    commit
    commit
    checkout alice-feature
    commit
    commit
    checkout main
    merge alice-feature
    commit
    checkout bob-feature
    merge main
    commit
    commit
    checkout main
    merge bob-feature
    commit tag: "v2.0"
```

--------------------------------

### Client-Side Mermaid Rendering in Astro

Source: https://github.com/joesaby/astro-mermaid/blob/main/README.md

This code demonstrates the client-side rendering process using the Mermaid JavaScript library. Ensure the Mermaid library is bundled with your project for local rendering. All diagram generation occurs within the browser.

```javascript
// All rendering happens locally - no network calls
import mermaid from 'mermaid';
const { svg } = await mermaid.render(id, diagramDefinition);
```

--------------------------------

### API Communication with Token Validation

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/sequence.md

Demonstrates client-gateway-service interaction, including token validation and data fetching.

```mermaid
sequenceDiagram
    participant C as Client
    participant G as Gateway
    participant A as Auth Service
    participant S as API Server
    participant D as Database
    
    C->>G: Request + Token
    G->>A: Validate Token
    A-->>G: Token Valid
    
    G->>S: Forward Request
    activate S
    S->>D: Query Data
    D-->>S: Result Set
    S-->>G: Response
    deactivate S
    
    G-->>C: Final Response
    
    Note over C,D: All communication is encrypted
```

--------------------------------

### Basic Flowchart

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/flowcharts.md

Illustrates a simple directional flowchart with nodes and connections. Use for straightforward process flows.

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix issues]
    E --> A
```

--------------------------------

### C4 Component Diagram for API Application

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/c4.md

Illustrates the component-level architecture of an API application within a larger system. Use this to detail the internal structure of a specific software system.

```mermaid
C4Component
    title Component diagram for Internet Banking System - API Application

    Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset of the internet banking functionality to customers via their mobile mobile device.")
    ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
    System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

    Container_Boundary(api, "API Application") {
        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
        Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
        Component(security, "Security Component", "Spring Bean", "Provides functionality related to signing in, changing passwords, etc.")
        Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")

        Rel(sign, security, "Uses")
        Rel(accounts, mbsfacade, "Uses")
        Rel(security, db, "Read & write to", "JDBC")
        Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
    }

    Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
    Rel(spa, accounts, "Uses", "JSON/HTTPS")

    Rel(ma, sign, "Uses", "JSON/HTTPS")
    Rel(ma, accounts, "Uses", "JSON/HTTPS")

    UpdateLayoutConfig($c4ShapeInRow="2", $c4BoundaryInRow="1")
```

--------------------------------

### Development Sprint Gantt Chart

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/gantt.md

Illustrate a development sprint timeline with tasks categorized by sections like Backend, Frontend, and DevOps.

```mermaid
gantt
    title Sprint 23 - Feature Development
    dateFormat  YYYY-MM-DD
    
    section Backend Tasks
    API Design              :done,    2024-01-15, 2d
    Database Schema         :done,    2024-01-17, 1d
    API Implementation      :active,  2024-01-18, 3d
    Unit Tests             :         2024-01-22, 2d
    
    section Frontend Tasks
    UI Mockups             :done,    2024-01-15, 2d
    Component Development   :active,  2024-01-18, 4d
    Integration            :         2024-01-23, 2d
    
    section DevOps
    CI/CD Setup            :done,    2024-01-15, 1d
    Deployment Scripts     :         2024-01-24, 1d
```

--------------------------------

### E-commerce Purchase Journey Diagram

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/journey.md

Illustrates the steps a customer takes from discovering products to receiving their order confirmation in an online shopping scenario. Use this to visualize a typical e-commerce customer flow.

```mermaid
journey
    title Online Shopping Journey
    section Discovery
      Browse products     : 5: Customer
      Search for item     : 4: Customer
      Read reviews        : 3: Customer
      Compare prices      : 4: Customer
    section Selection
      Add to cart         : 5: Customer
      View cart           : 4: Customer
      Apply coupon        : 3: Customer
      Update quantity     : 4: Customer
    section Checkout
      Enter shipping info : 3: Customer
      Select payment      : 4: Customer
      Review order        : 5: Customer
      Place order         : 5: Customer
    section Fulfillment
      Order confirmation  : 5: Customer, System
      Package preparation : 3: Warehouse
      Shipping            : 4: Logistics
      Delivery            : 5: Customer
```

--------------------------------

### Multiplicity and Relationships in Class Diagrams

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/examples/class.md

Illustrates how to represent multiplicities (e.g., one-to-many, many-to-many) and various relationships between classes.

```mermaid
classDiagram
    class University {
        +String name
        +String location
        +List~Department~ departments
    }
    
    class Department {
        +String name
        +String head
        +List~Course~ courses
    }
    
    class Course {
        +String code
        +String title
        +int credits
    }
    
    class Student {
        +String studentId
        +String name
        +List~Course~ enrolledCourses
    }
    
    class Professor {
        +String employeeId
        +String name
        +String specialization
    }
    
    University "1" --> "*" Department : has
    Department "1" --> "*" Course : offers
    Professor "1" --> "*" Course : teaches
    Student "*" --> "*" Course : enrolls
    
    note for University "Main campus location"
    note for Student "Undergraduate and Graduate students"
```

--------------------------------

### astro-mermaid Integration with Options

Source: https://github.com/joesaby/astro-mermaid/blob/main/astro-demo/src/content/docs/installation.md

Configure astro-mermaid with custom options such as theme, auto-theme, and mermaid-specific configurations.

```javascript
import { defineConfig } from 'astro/config';
import mermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    mermaid({
      theme: 'forest',
      autoTheme: true,
      mermaidConfig: {
        flowchart: {
          curve: 'basis'
        }
      }
    })
  ]
});
```