Diagram Templates

sequenceDiagram
    participant Client
    participant Gateway as API Gateway
    participant Auth
    participant Service
    participant DB

    Client->>Gateway: POST /api/data
    Gateway->>Auth: Validate Token
    Auth-->>Gateway: Valid
    Gateway->>Service: Forward Request
    Service->>DB: Query
    DB-->>Service: Results
    Service-->>Gateway: Response
    Gateway-->>Client: 200 OK

graph TB
    LB[Load Balancer] --> GW[API Gateway]
    GW --> US[User Service]
    GW --> PS[Product Service]
    GW --> OS[Order Service]
    US --> UDB[(User DB)]
    PS --> PDB[(Product DB)]
    OS --> ODB[(Order DB)]
    OS --> MQ{{Message Queue}}
    MQ --> NS[Notification Service]

classDiagram
    class Shape {
        <<abstract>>
        +String color
        +area() double
        +draw() void
    }
    class Circle {
        +double radius
        +area() double
    }
    class Rectangle {
        +double width
        +double height
        +area() double
    }
    Shape <|-- Circle
    Shape <|-- Rectangle

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: fetch
    Loading --> Success: resolve
    Loading --> Error: reject
    Success --> Idle: reset
    Error --> Loading: retry
    Error --> Idle: dismiss

erDiagram
    USER ||--o{ POST : writes
    USER ||--o{ COMMENT : makes
    POST ||--|{ COMMENT : has
    POST }o--o{ TAG : tagged
    USER {
        int id PK
        string username
        string email
        datetime created_at
    }
    POST {
        int id PK
        string title
        text content
        int author_id FK
        datetime published_at
    }

gitGraph
    commit id: "init"
    branch develop
    commit id: "dev setup"
    branch feature/auth
    commit id: "add login"
    commit id: "add signup"
    checkout develop
    merge feature/auth
    branch feature/dashboard
    commit id: "add charts"
    checkout develop
    merge feature/dashboard
    checkout main
    merge develop tag: "v1.0"

kanban
  Backlog
    User authentication
    Payment integration
    Email notifications
  In Progress
    Dashboard redesign
    API optimization
  Review
    Search feature
  Done
    Database migration
    CI/CD setup

gantt
    title Product Launch Plan
    dateFormat YYYY-MM-DD
    section Research
    Market Analysis    :done, r1, 2024-01-01, 14d
    User Interviews    :done, r2, after r1, 10d
    section Design
    Wireframes         :active, d1, after r2, 10d
    Prototypes         :d2, after d1, 14d
    section Development
    MVP Build          :dev1, after d2, 30d
    Testing            :test1, after dev1, 14d
    section Launch
    Beta Release       :milestone, after test1, 0d
    Marketing          :m1, after test1, 14d

timeline
    title 2024 Product Roadmap
    Q1 2024 : Core Platform
            : User Authentication
            : Basic Dashboard
    Q2 2024 : API v2 Launch
            : Mobile App Beta
            : Analytics Integration
    Q3 2024 : Enterprise Features
            : SSO Support
            : Advanced Reporting
    Q4 2024 : Global Launch
            : Multi-region Deploy
            : Performance Optimization

graph TD
    A[New Feature Request] --> B{Aligns with roadmap?}
    B -->|Yes| C{Resource available?}
    B -->|No| D[Add to backlog]
    C -->|Yes| E{Effort estimate}
    C -->|No| F[Schedule for next quarter]
    E -->|< 1 week| G[Fast track]
    E -->|1-4 weeks| H[Sprint planning]
    E -->|> 4 weeks| I[Epic breakdown]
    G --> J[Implement]
    H --> J
    I --> J

journey
    title E-Commerce Purchase Journey
    section Discovery
      Search product: 4: Customer
      Browse catalog: 3: Customer
      Read reviews: 4: Customer
    section Purchase
      Add to cart: 4: Customer
      Enter shipping: 2: Customer
      Payment: 3: Customer
    section Post-Purchase
      Order confirmation: 5: Customer
      Track delivery: 4: Customer
      Receive product: 5: Customer

pie title Revenue by Product Line
    "SaaS Subscriptions" : 45
    "Professional Services" : 25
    "Enterprise Licenses" : 20
    "Training & Certification" : 10

xychart-beta
    title "Monthly Active Users (2024)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Users (thousands)" 0 --> 500
    bar [120, 150, 180, 210, 250, 280, 310, 340, 360, 390, 420, 450]
    line [120, 150, 180, 210, 250, 280, 310, 340, 360, 390, 420, 450]

sankey-beta

Website Visitors,Sign Up Page,60
Website Visitors,Bounce,40
Sign Up Page,Registered,35
Sign Up Page,Abandoned,25
Registered,Free Trial,30
Registered,Inactive,5
Free Trial,Paid Subscription,20
Free Trial,Churned,10

quadrantChart
    title Feature Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan Carefully
    quadrant-2 Do First
    quadrant-3 Quick Wins
    quadrant-4 Deprioritize
    Dark Mode: [0.2, 0.4]
    SSO Integration: [0.7, 0.9]
    Search Autocomplete: [0.3, 0.8]
    Logo Redesign: [0.1, 0.1]
    API v2: [0.8, 0.7]
    Mobile App: [0.9, 0.8]
    Bug Fixes: [0.2, 0.6]

mindmap
  root((Web Development))
    Frontend
      HTML & CSS
        Layouts
        Responsive Design
      JavaScript
        ES6+
        TypeScript
      Frameworks
        React
        Vue
    Backend
      Node.js
      Python
      Databases
        SQL
        NoSQL
    DevOps
      Git
      Docker
      CI/CD

graph LR
    A[Beginner] --> B[HTML & CSS]
    B --> C[JavaScript Basics]
    C --> D{Choose Path}
    D --> E[Frontend: React]
    D --> F[Backend: Node.js]
    E --> G[State Management]
    F --> H[Databases]
    G --> I[Full Stack]
    H --> I
    I --> J[Deploy & DevOps]

mindmap
  root((Data Science))
    Mathematics
      Statistics
      Linear Algebra
      Calculus
    Programming
      Python
      R
      SQL
    Machine Learning
      Supervised
      Unsupervised
      Deep Learning
    Tools
      Jupyter
      Pandas
      Scikit-learn

graph LR
    A[Push Code] --> B[Build]
    B --> C[Unit Tests]
    C --> D{Tests Pass?}
    D -->|Yes| E[Integration Tests]
    D -->|No| F[Notify Developer]
    E --> G{All Pass?}
    G -->|Yes| H[Deploy to Staging]
    G -->|No| F
    H --> I[E2E Tests]
    I --> J{Approved?}
    J -->|Yes| K[Deploy to Production]
    J -->|No| F

architecture-beta
    group vpc(cloud)[VPC]
    group public(cloud)[Public Subnet] in vpc
    group private(cloud)[Private Subnet] in vpc

    service cdn(internet)[CDN]
    service lb(server)[Load Balancer] in public
    service app(server)[App Servers] in private
    service db(database)[Database] in private
    service cache(database)[Cache] in private

    cdn:R --> L:lb
    lb:R --> L:app
    app:R --> L:db
    app:B --> T:cache

packet-beta
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window Size"
  128-143: "Checksum"
  144-159: "Urgent Pointer"