System Design Repository

A comprehensive collection of system design concepts and examples using Mermaid diagrams and draw.io, featuring real-world architectures, flowcharts, and sequence diagrams.

📋 Table of Contents

System Design Repository

Overview

This repository serves as a practical reference for system design patterns and architectural solutions. It includes various diagram types that illustrate software architectures, data flows, and system interactions across different domains including e-commerce, CI/CD pipelines, gaming systems, and AI applications.

Technologies

🧩 Mermaid

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. It supports:

Flowcharts
Sequence diagrams
Class diagrams
State diagrams
Entity Relationship diagrams
Gantt charts
And more...

📐 draw.io

draw.io (diagrams.net) is a free, open-source diagramming application that allows you to create professional diagrams. Features include:

Wide variety of diagram types (UML, ER, Network diagrams, etc.)
Multiple export formats (PNG, JPEG, SVG, PDF)
Integration with cloud storage services
Offline and online editing capabilities

Project Structure

system-design/
├── ai-agent/              # AI agent designs and runnable artifacts
│   └── claude-code-workflows/ # Claude Code dynamic-workflows write-up + workflow scripts
├── architecture/          # System architecture diagrams
│   ├── ai-integration/   # AI integration and LLM proxy designs
│   ├── eCommerceWebSite/ # E-commerce system designs
│   ├── jenkins/          # CI/CD pipeline architectures
│   ├── netflix/          # Netflix streaming design pack
│   ├── syncStatusWith3rdParty/ # Third-party integration patterns
│   └── uber/             # Uber ride-hailing design pack
├── flowchart/            # Process flow diagrams
│   └── dynamicLoading/   # Frontend component loading patterns
├── sdlc/                 # Software development lifecycle diagrams
│   └── git-flow-in-real-world/ # Git branch promotion and hotfix flows
├── sequenceDiagram/      # Interaction sequence diagrams
└── LICENSE              # MIT License

AI Agent

Designs and runnable artifacts for building AI agents. See ai-agent/ for the full index.

Claude Code Dynamic Workflows - A practical guide to dynamic workflows on Claude Code (the orchestration layer that fans out tens to hundreds of sub-agents in one session and verifies its own work), the six reusable patterns, and two runnable workflow scripts — code-review-fanout.js and sdlc-workflow.js. Includes a 繁體中文版.

Architecture Diagrams

🏗️ CI/CD & DevOps

Jenkins CI/CD Architecture - C4 context diagram showing Jenkins and Git repositories integration
Sync Status with 3rd Party - Architecture for synchronizing data with external systems

🤖 AI Integration

Built-in AI on Chrome - Multi-LLM orchestration platform design for XPrompt, including browser extension, backend, response synthesis, and Chrome built-in AI prompt enhancement flows
LLM Proxy on OpenClaw - OpenClaw sidecar proxy design for LLM credential isolation, quota enforcement, webhook relay, and orchestrator admin APIs. (try use an AI tool, text to diagram : Napkin https://www.napkin.ai/)

🛒 E-Commerce Systems

E-Commerce Website System Design - Complete system design using C4 Model
- Available in both Mermaid and draw.io formats
- Includes context and container diagrams
- Interactive draw.io viewer

Flowcharts

🤖 AI & Automation

AI Patent Infringement Check App - Dockerized AI application flow with OpenAI integration
MCP Server with Playwright - Browser automation server architecture

🎮 Gaming & Betting Systems

Auto Campaign Events Flow - Automated campaign management system
Bet Slip States - State management for betting applications
Shopping Cart States - Frontend component state management

💰 Reward & Token Systems

Calculate Available Reward Tokens - Token calculation triggers and flow

🔄 Dynamic Loading Patterns

Dynamic Loading Mechanism - Frontend component lazy loading strategies
- Left-to-right loading pattern
- Top-to-bottom loading pattern

Sequence Diagrams

📊 Data Flow Sequences

Remain Campaign Count Flow - API interaction sequence for campaign counting
Token States in Bet Placement - Token state management during bet placement

SDLC

🌿 Git Flow

Git Flow in Real World - Mermaid git graph showing branch promotion from dev to qat, uat, and prod, plus production hotfix sync-back flow

Getting Started

Viewing Mermaid Diagrams

GitHub: Mermaid diagrams render automatically in .md files on GitHub
Local: Use any Markdown editor with Mermaid support (VS Code with Mermaid extension, Typora, etc.)
Online: Use the Mermaid Live Editor

Viewing draw.io Diagrams

Online: Open .drawio files directly at app.diagrams.net
Offline: Download the draw.io desktop app
HTML Preview: Open the provided .html files in any web browser

Quick Links

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. When contributing:

Use clear, descriptive names for your diagrams
Include a brief description of what the diagram represents
Follow the existing folder structure
Update relevant README files

License

This project is licensed under the MIT License - see the LICENSE file for details.

system-design