graph TD;
A[User writes code] -->|Git Push| B(GitHub);
B --> C{Cloudflare Pages};
C -->|Auto Build| D[Static Website];
D --> E[Readers See Diagrams];
style C fill:#f96,stroke:#333,stroke-width:4px
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
1. Complex System Architecture (Flowchart)
What it tests: Subgraphs, different node shapes, database cylinders, varied line types (dotted, thick), and directional layout.
flowchart TB
%% Styling
classDef client fill:#d4edda,stroke:#28a745,stroke-width:2px;
classDef gateway fill:#cce5ff,stroke:#007bff,stroke-width:2px;
classDef service fill:#fff3cd,stroke:#ffc107,stroke-width:2px;
classDef db fill:#f8d7da,stroke:#dc3545,stroke-width:5px;
subgraph Clients["Client Applications"]
Web["💻 Web Application"]:::client
Mobile["📱 Mobile App"]:::client
CLI["📟 CLI Tool"]:::client
end
subgraph Edge["Edge / API Gateway"]
Kong["API Gateway (Kong)"]:::gateway
WAF["Web Application Firewall"]:::gateway
end
subgraph Microservices["Backend Microservices"]
Auth["🔒 Auth Service"]:::service
Orders["🛒 Order Service"]:::service
Inventory["📦 Inventory Service"]:::service
Payments["💳 Payment Service"]:::service
end
subgraph Data["Data Layer"]
UserDB[("User DB (PostgreSQL)")]:::db
OrderDB[("Order DB (MongoDB)")]:::db
Cache[("Redis Cache")]:::db
Kafka{"Kafka Event Bus"}:::db
end
%% Connections
Web --> WAF
Mobile --> WAF
CLI --> WAF
WAF --> Kong
Kong -- "/api/auth" --> Auth
Kong -- "/api/orders" --> Orders
Kong -- "/api/inventory" --> Inventory
Auth <--> Cache
Auth --> UserDB
Orders --> OrderDB
Orders -- "Check Stock" --> Inventory
Orders -- "Process Charge" --> Payments
Inventory -. "Async Event" .-> Kafka
Payments -. "Async Event" .-> Kafka
Kafka -. "Updates" .-> Orders
2. OAuth 2.0 Authorization Code Flow (Sequence Diagram)
What it tests: Auto-numbering, actors vs. participants, activation boxes (activate/deactivate), alt (if/else) logic blocks, and sticky notes.
sequenceDiagram
autonumber
actor User as 🙎♂️ End User
participant App as 📱 Client Application
participant Auth as 🛡️ Authorization Server
participant API as ⚙️ Resource Server (API)
participant DB as 🗄️ Database
User->>App: Clicks "Log in with Service"
activate App
App->>Auth: Redirect to Auth URL (client_id, scope, redirect_uri)
deactivate App
activate Auth
Auth->>User: Prompts for credentials & consent
User-->>Auth: Enters credentials and grants permission
Auth-->>App: Redirect back with Authorization Code
deactivate Auth
activate App
App->>Auth: POST /token (Auth Code, client_id, client_secret)
activate Auth
Auth-->>App: Returns Access Token & Refresh Token
deactivate Auth
Note over App,API: Secure API Request Phase
App->>API: GET /user/profile (Header: Bearer {Access_Token})
deactivate App
activate API
alt Token is Valid
API->>DB: Query user data
activate DB
DB-->>API: User dataset
deactivate DB
API-->>App: 200 OK + JSON Data
else Token is Expired
API-->>App: 401 Unauthorized
activate App
Note left of App: Client must use<br/>Refresh Token flow
App->>Auth: POST /token (grant_type=refresh_token)
deactivate App
end
deactivate API
3. E-Commerce Domain Model (Class Diagram)
What it tests: Interfaces (<<interface>>), access modifiers (+, -, #), methods with parameters and return types, inheritance, composition, and multiplicity indicators.
classDiagram
class User {
#uuid id
#String username
#String email
+login() bool
+logout() void
}
class Customer {
-String shippingAddress
-String billingAddress
+register() Customer
+addToCart(Product p) void
}
class Admin {
-int accessLevel
+banUser(uuid id) bool
+updateProduct(Product p) bool
}
class Order {
+uuid orderId
+DateTime createdAt
+OrderStatus status
+calculateTotal() float
+processOrder() bool
}
class OrderItem {
+int quantity
+float priceAtPurchase
+getSubtotal() float
}
class Product {
+uuid productId
+String name
+float price
+int stockLevel
+updateStock(int amount) void
}
class PaymentStrategy {
+pay(float amount) bool
}
class CreditCardPayment
class PayPalPayment
%% Relationships
User <|-- Customer : Inheritance
User <|-- Admin : Inheritance
Customer "1" --> "0..*" Order : Places
Order "1" *-- "1..*" OrderItem : Contains
OrderItem "0..*" o-- "1" Product : Refers to
Order --> PaymentStrategy : Uses
CreditCardPayment ..|> PaymentStrategy : Implements
PayPalPayment ..|> PaymentStrategy : Implements
4. Order Processing Lifecycle (State Diagram)
What it tests: Composite states (states within states), forks and joins (parallel execution paths), choices (conditional routing), and state transitions.
stateDiagram-v2
[*] --> ShoppingCart : User adds items
ShoppingCart --> Checkout : Proceed to checkout
Checkout --> Processing : Submit Order
state Processing {
state fork_state <<fork>>
[*] --> fork_state
%% Parallel processing
fork_state --> PaymentHandling
fork_state --> InventoryAllocation
PaymentHandling --> PaymentSecured : Gateway Success
PaymentHandling --> PaymentFailed : Card Declined
InventoryAllocation --> ItemsReserved : In Stock
InventoryAllocation --> Backordered : Out of Stock
state join_state <<join>>
PaymentSecured --> join_state
ItemsReserved --> join_state
join_state --> [*]
}
Processing --> Shipped : Success
Processing --> Cancelled : PaymentFailed or Backordered
state Shipped {
[*] --> InTransit
InTransit --> OutForDelivery
OutForDelivery --> [*]
}
Shipped --> Delivered
Delivered --> [*]
Cancelled --> [*]
5. Social Media Database Schema (Entity Relationship Diagram)
What it tests: Tables, Primary Keys (PK), Foreign Keys (FK), column types, and complex crow’s foot notation (One-to-Many, Many-to-Many, Zero-or-One).
erDiagram
USER ||--o{ POST : "writes"
USER ||--o{ COMMENT : "leaves"
USER ||--o{ USER_ROLE : "assigned"
USER {
uuid id PK
string username
string email
string password_hash
datetime created_at
boolean is_active
}
POST ||--o{ COMMENT : "contains"
POST }o--|| CATEGORY : "categorized under"
POST {
uuid id PK
uuid author_id FK
int category_id FK
string title
text content
int view_count
datetime published_at
}
COMMENT {
uuid id PK
uuid post_id FK
uuid user_id FK
text body
datetime created_at
}
CATEGORY {
int id PK
string name
string slug
}
ROLE ||--o{ USER_ROLE : "has"
ROLE {
int id PK
string role_name
}
USER_ROLE {
uuid user_id FK
int role_id FK
}
6. Gitflow Branching Strategy (Git Graph)
What it tests: A highly visual timeline of Git operations, branching, checking out, committing, merging, and tagging releases.
gitGraph
commit id: "Initial commit"
branch develop
checkout develop
commit id: "Add base project structure"
branch feature/auth
checkout feature/auth
commit id: "Add user model"
commit id: "Implement JWT login"
checkout develop
merge feature/auth id: "Merge Auth"
branch feature/cart
checkout feature/cart
commit id: "Create shopping cart UI"
checkout main
branch hotfix/security
checkout hotfix/security
commit id: "Fix critical CVE"
checkout main
merge hotfix/security tag: "v1.0.1"
checkout develop
merge main id: "Sync hotfix to develop"
checkout feature/cart
commit id: "Fix merge conflicts"
commit id: "Integrate Stripe API"
checkout develop
merge feature/cart id: "Merge Cart"
branch release/v1.1.0
checkout release/v1.1.0
commit id: "Bump versions & changelog"
checkout main
merge release/v1.1.0 tag: "v1.1.0"
checkout develop
merge main id: "Sync release to develop"
7. Software Release Roadmap (Gantt Chart)
What it tests: Date parsing, sections, task dependencies (after), explicit dates, critical paths (crit), completed tasks (done), active tasks (active), and milestones.
gantt
title Q3 Product Roadmap & Release Schedule
dateFormat YYYY-MM-DD
axisFormat %m/%d
tickInterval 1w
section Discovery & Design
Requirements Gathering :done, req1, 2026-07-01, 7d
UI/UX Wireframing :active, des1, after req1, 10d
Architecture Review :crit, arch1, after req1, 5d
section Backend Dev
Database Migrations :db1, after arch1, 4d
Core API Endpoints :dev1, after db1, 12d
Payment Integration :crit, dev2, after dev1, 7d
section Frontend Dev
Component Library :front1, after des1, 10d
Dashboard Integration :front2, after front1, 14d
section QA & Deployment
Unit & Integration Testing :test1, after dev2, 7d
UAT & Bug Fixing :test2, after test1, 7d
Security Audit :crit, sec1, after dev2, 5d
Staging Deployment :deploy1, after test2, 2d
Production Release :milestone, release1, after deploy1, 0d
Code snippets
Here is my JavaScript code snippet:
JS
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("Bart Swe");
Golang
package main
import "fmt"
func main() {
fmt.Println("Hello, Bart Swe!")
}
Python
def greet(name):
print(f"Hello, {name}!")
greet("Bart Swe")
Video
Cool video of my project:
Cool video of my another project: