Skip to content

Tooltips + Zoom Together

Three complex diagrams, each large enough that auto-detection enables pan/zoom, and each annotated with per-node hover tooltips. Drag to pan, scroll to zoom, and hover any labelled node to see its Markdown popup.

CI/CD pipeline

Drag, scroll, or right-drag to move; pinch or Ctrl+scroll to zoom
flowchart TD Commit[Git commit] --> Lint{Lint & format} Lint -->|pass| Unit[Unit tests] Lint -->|fail| Reject[Reject push] Unit --> E2E[E2E tests] E2E --> Build[Build artifacts] Build --> Stage[Deploy to staging] Stage --> Smoke{Smoke tests} Smoke -->|pass| Prod[Deploy to production] Smoke -->|fail| Rollback[Rollback] Prod --> Monitor[Monitor metrics] Monitor --> Alert{Anomaly?} Alert -->|yes| Rollback Alert -->|no| Done[Stable release]

Request lifecycle

Drag, scroll, or right-drag to move; pinch or Ctrl+scroll to zoom
stateDiagram-v2 [*] --> Received Received --> Authenticated: valid token Received --> Rejected: invalid token Authenticated --> Authorized: has permission Authenticated --> Forbidden: missing permission Authorized --> Processing Processing --> Cached: cache hit Processing --> Computed: cache miss Cached --> Responded Computed --> Responded Responded --> [*] Rejected --> [*] Forbidden --> [*]

Service dependency graph

Drag, scroll, or right-drag to move; pinch or Ctrl+scroll to zoom
graph LR Gateway[API Gateway] --> Auth[Auth Service] Gateway --> Catalog[Catalog Service] Gateway --> Cart[Cart Service] Catalog --> Search[Search Index] Catalog --> DB[(Product DB)] Cart --> DB Cart --> Pricing[Pricing Service] Pricing --> DB Auth --> Cache[(Session Cache)] Search --> DB Pricing --> Promo[Promotions] Promo --> DB

Mark as completed / read

Mark as incomplete / read again

https://elgalu.github.io/mkdocs-hover-tooltip-popup/