undefined

undefined

python .claude/skills/project-diagrams/scripts/generate_schematic.py \
  "System architecture for SaaS application: \
   Frontend (React) -> API Gateway -> Microservices (Auth, Users, Payments). \
   Services connect to PostgreSQL and Redis. Event bus (Kafka) for async. \
   Use boxes with different colors for each service layer." \
  -o diagrams/system_architecture.png

undefined

undefined

python .claude/skills/project-diagrams/scripts/generate_schematic.py \
  "Sequence diagram for checkout: User, Frontend, API, Cart, Payment, Order, Database. \
   Flow: checkout click -> validate cart -> process payment -> create order -> store -> response. \
   Include error path for payment failure." \
  -o diagrams/checkout_sequence.png

python .claude/skills/project-diagrams/scripts/generate_schematic.py \
  "ERD for e-commerce: Users has_many Orders has_many OrderItems belongs_to Products. \
   Products belongs_to Categories. Show PKs, FKs, crow's foot notation." \
  -o diagrams/data_model.png

python .claude/skills/project-diagrams/scripts/generate_schematic.py \
  "AWS architecture: VPC with public/private subnets in 2 AZs. \
   Public: ALB, NAT. Private: ECS Fargate, RDS Aurora. \
   Route53 -> CloudFront -> ALB. CloudWatch monitoring." \
  -o diagrams/aws_infrastructure.png

python .claude/skills/project-diagrams/scripts/generate_schematic.py \
  "CI/CD pipeline: GitHub push -> Build -> Test -> Security Scan -> \
   Deploy Staging -> Integration Tests -> Approval -> Production. \
   Tools: GitHub Actions, Docker, Jest, Snyk, ArgoCD, K8s." \
  -o diagrams/cicd_pipeline.png

export OPENROUTER_API_KEY='your_api_key_here'

undefined

```mermaid
flowchart LR
    A[Client] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[User Service]
    C --> E[(Database)]
    D --> E
```

flowchart TB
    subgraph Frontend
        A[React App]
        B[Mobile App]
    end

    subgraph API Layer
        C[API Gateway]
        D[Load Balancer]
    end

    subgraph Services
        E[Auth Service]
        F[User Service]
        G[Order Service]
    end

    subgraph Data
        H[(PostgreSQL)]
        I[(Redis Cache)]
        J[(S3 Storage)]
    end

    A --> D
    B --> D
    D --> C
    C --> E & F & G
    E --> H
    F --> H & I
    G --> H & J

sequenceDiagram
    participant U as User
    participant F as Frontend
    participant A as API Gateway
    participant Auth as Auth Service
    participant DB as Database

    U->>F: Click Login
    F->>A: POST /auth/login
    A->>Auth: Validate credentials
    Auth->>DB: Query user
    DB-->>Auth: User data
    Auth-->>A: JWT token
    A-->>F: 200 OK + token
    F-->>U: Redirect to dashboard

C4Context
    title System Context Diagram - Inventory Management

    Person(user, "Warehouse Staff", "Manages inventory")
    Person(admin, "Admin", "Configures system")

    System(inventory, "Inventory System", "Core application")

    System_Ext(erp, "ERP System", "Enterprise resource planning")
    System_Ext(shipping, "Shipping API", "Delivery tracking")

    Rel(user, inventory, "Uses")
    Rel(admin, inventory, "Configures")
    Rel(inventory, erp, "Syncs data")
    Rel(inventory, shipping, "Tracks shipments")

erDiagram
    USER ||--o{ ORDER : places
    USER {
        uuid id PK
        string email UK
        string name
        timestamp created_at
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        uuid id PK
        uuid user_id FK
        decimal total
        string status
        timestamp created_at
    }
    ORDER_ITEM }o--|| PRODUCT : references
    ORDER_ITEM {
        uuid id PK
        uuid order_id FK
        uuid product_id FK
        int quantity
        decimal price
    }
    PRODUCT {
        uuid id PK
        string name
        decimal price
        int stock
    }

gantt
    title Sprint 1 - Foundation
    dateFormat YYYY-MM-DD
    section Infrastructure
        CI/CD Setup           :done, infra1, 2025-01-06, 3d
        Database Setup        :active, infra2, after infra1, 2d
    section Authentication
        User Registration     :auth1, after infra2, 3d
        Login/Logout         :auth2, after auth1, 2d
        JWT Implementation   :auth3, after auth2, 2d
    section Testing
        Unit Tests           :test1, after auth3, 2d
        Integration Tests    :test2, after test1, 2d

stateDiagram-v2
    [*] --> Draft
    Draft --> Pending: Submit
    Pending --> Approved: Approve
    Pending --> Rejected: Reject
    Rejected --> Draft: Revise
    Approved --> Published: Publish
    Published --> Archived: Archive
    Archived --> [*]

mindmap
    root((Inventory System))
        Core Services
            Auth Service
            Inventory Service
            Order Service
            Notification Service
        Data Layer
            PostgreSQL
            Redis
            S3
        Infrastructure
            AWS ECS
            CloudFront
            Route53
        Integrations
            ERP Sync
            Shipping APIs
            Payment Gateway

undefined

**Multi-Tier Fallback System:**

| Priority | Method | Requirements | Quality |
|----------|--------|--------------|---------|
| 1 | Local mmdc | `npm install -g @mermaid-js/mermaid-cli` | Best (offline) |
| 2 | Kroki.io API | Internet connection | Good (free API) |
| 3 | Nano Banana AI | `OPENROUTER_API_KEY` | Good (AI-generated) |
| 4 | Keep markdown | None | Rendered by viewer |

The renderer automatically tries each method in order until one succeeds.

undefined

undefined

undefined

| Theme | Best For |
|-------|----------|
| `default` | General purpose, blue tones |
| `neutral` | Professional documents, grayscale-friendly |
| `dark` | Dark mode UIs, presentations |
| `forest` | Environmental/green themed projects |

undefined

flowchart LR
    Client --> Gateway --> Services --> Database

sequenceDiagram
    Client->>API: Request
    API->>Service: Process
    Service-->>API: Response
    API-->>Client: Result

undefined