.astro or .tsx files for embedding diagrams into blog posts and articles with full dark/light token alignment. It does not produce standalone HTML previews. See references/astro-component.md for the component template and token tables.
Transformer Architecture
Complete encoder-decoder stack with step-through guide and cross-attention bridge.
OAuth 2.0 Authorization Code Flow
Full sequence across User, Client App, Auth Server, and Resource Server.
Ecommerce Order Fulfillment
From checkout to delivery notification — order, warehouse, shipping stages.
API Gateway Architecture
Gateway routing, auth, rate limiting, and microservice fan-out in a single view.
CI/CD Pipeline
End-to-end build, test, and deploy pipeline with environment promotion gates.
API Lifecycle
Design, build, test, deploy, and deprecation stages of a REST API end to end.
RAG Pipeline
Document ingestion, vector search, reranking, and LLM generation in one view.
Kubernetes Deployment
Git push to running pods — image registry, API server, scheduler, HPA, and ingress.
Event-Driven Microservices
Producers, Kafka topics, and consumers — decoupled services at scale.
Multi-Region Failover
Active-passive with health monitoring, DB replication, and automatic DNS rerouting.
Internet Banking — System Context
C4 Level 1: customer, banking platform, and the external systems around it.
Web App Infrastructure
CDN, API server, Postgres, and object storage with grouped cloud services.
E-Commerce Domain Model
User, Order, Product, Payment, Category, Address — with methods and multiplicity.
Blog Platform Schema
7-table schema with PK, FK, UK annotations and self-referential comments.
Order Lifecycle State Machine
All order states from Pending to Refunded, color-coded by status category.
Feature Priority Matrix
Q3 roadmap features plotted by effort vs impact across four quadrants.
API Traffic Distribution
Request volume breakdown across 8 microservices over 30 days.
Release Sprint Plan
Six-week delivery schedule across design, build, QA, and launch phases.
Monthly Active Users
Bar + line combo tracking user growth against revenue, January to June.
Data Center Energy Flow
Where the power goes — grid and solar through servers, cooling, and losses.
Sprint Board
Current sprint grouped by workflow state with assignee and priority metadata.
Evolution of the Web
Web 1.0 to the AI era — major milestones from 1991 to 2024.
System Design Topics
Core concepts for senior engineering interviews — scalability, storage, caching, observability.
GitFlow Branching Strategy
Feature branches, release cuts, hotfixes, and version tags from v1.0.0 to v2.0.0.
AI Evolution — 2017 to Present
Transformer to MCP — color-coded era cards, glowing milestone dots, hover lift. Shows what Mermaid timeline cannot.
LLM Training Pipeline
Pretraining → SFT → RLHF → deployment. Phase badges, numbered step circles, technique tags, output artifacts.
Transformer Animated
CSS-animated Transformer architecture — flowing edges and node glow highlight attention and data paths in motion.
The Agentic Horizon
A consequence map of the philosophical and economic shift from human-run software to a fully agentic civilization.
| When the user says… | Use | Best for |
|---|---|---|
| flow, pipeline, architecture, data flow | graph TD | System overviews, decision trees |
| sequence, API calls, who calls who | sequenceDiagram | Protocol flows, auth, microservice calls |
| class, domain model, OOP, UML | classDiagram | Object relationships, API shape |
| state, lifecycle, status transitions | stateDiagram-v2 | Order states, auth sessions, FSMs |
| database, schema, tables, ER | erDiagram | DB design, ORM models |
| priority, 2×2, effort vs impact | quadrantChart | Roadmap prioritisation |
| timeline, history, milestones | timeline | Product history, roadmap dates |
| mind map, brainstorm, concept map | mindmap | Topic overviews, study guides |
| git, branching, gitflow, commits | gitGraph | Branch strategy, release process |
| pie chart, distribution, percentage | pie | Traffic split, budget breakdown |
| schedule, project plan, sprint | gantt | Project timelines |
| bar chart, line chart, trend over time | xychart-beta | Metrics, growth curves |
| flow quantities, energy/traffic/money split | sankey-beta | Resource distribution |
| system context, C4, external systems | C4Context | High-level architecture docs |
| cloud infrastructure, services + connections | architecture-beta | Deployment diagrams |
| kanban board, sprint tasks, columns | kanban | Work-in-progress boards |