A comprehensive collection of system design concepts and examples using Mermaid diagrams and draw.io, featuring real-world architectures, flowcharts, and sequence diagrams.
- System Design Repository
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.
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 (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
system-design/
├── architecture/ # System architecture diagrams
│ ├── jenkins/ # CI/CD pipeline architectures
│ ├── eCommerceWebSite/ # E-commerce system designs
│ └── syncStatusWith3rdParty/ # Third-party integration patterns
├── flowchart/ # Process flow diagrams
│ └── dynamicLoading/ # Frontend component loading patterns
├── sequenceDiagram/ # Interaction sequence diagrams
└── LICENSE # MIT License
- 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
- 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
- AI Patent Infringement Check App - Dockerized AI application flow with OpenAI integration
- MCP Server with Playwright - Browser automation server architecture
- Auto Campaign Events Flow - Automated campaign management system
- Bet Slip States - State management for betting applications
- Shopping Cart States - Frontend component state management
- Calculate Available Reward Tokens - Token calculation triggers and flow
- Dynamic Loading Mechanism - Frontend component lazy loading strategies
- Left-to-right loading pattern
- Top-to-bottom loading pattern
- Remain Campaign Count Flow - API interaction sequence for campaign counting
- Token States in Bet Placement - Token state management during bet placement
- GitHub: Mermaid diagrams render automatically in
.mdfiles on GitHub - Local: Use any Markdown editor with Mermaid support (VS Code with Mermaid extension, Typora, etc.)
- Online: Use the Mermaid Live Editor
- Online: Open
.drawiofiles directly at app.diagrams.net - Offline: Download the draw.io desktop app
- HTML Preview: Open the provided
.htmlfiles in any web browser
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
This project is licensed under the MIT License - see the LICENSE file for details.
Created and maintained by Max © 2023