Agent Skill

/visualcave
Technical Diagrams

Generate interactive, publication-quality technical diagrams as standalone HTML files. Dark mode, step-through, and export built in.

/visualcave describe your diagram
GitHub · 13 examples · 11 diagram types
Architecture & Flow
graph TD

Transformer Architecture

Complete encoder-decoder stack with step-through guide and cross-attention bridge.

step-throughdark modegraph TD
sequenceDiagram

OAuth 2.0 Authorization Code Flow

Full sequence across User, Client App, Auth Server, and Resource Server.

sequencesecurity
pipeline

Ecommerce Order Fulfillment

From checkout to delivery notification — order, warehouse, shipping stages.

pipelineecommerce
Object & Data Models
classDiagram

E-Commerce Domain Model

User, Order, Product, Payment, Category, Address — with methods and multiplicity.

classDiagramUML
erDiagram

Blog Platform Schema

7-table schema with PK, FK, UK annotations and self-referential comments.

erDiagramdatabase
stateDiagram-v2

Order Lifecycle State Machine

All order states from Pending to Refunded, color-coded by status category.

stateDiagram-v2lifecycle
Planning & Analysis
quadrantChart

Feature Priority Matrix

Q3 roadmap features plotted by effort vs impact across four quadrants.

quadrantChartroadmap
pie

API Traffic Distribution

Request volume breakdown across 8 microservices over 30 days.

piemetrics
Knowledge & History
timeline

Evolution of the Web

Web 1.0 to the AI era — major milestones from 1991 to 2024.

timelinehistory
mindmap

System Design Topics

Core concepts for senior engineering interviews — scalability, storage, caching, observability.

mindmapsystem design
gitGraph

GitFlow Branching Strategy

Feature branches, release cuts, hotfixes, and version tags from v1.0.0 to v2.0.0.

gitGraphworkflow
Diagram Type Reference
When the user says… Use Best for
flow, pipeline, architecture, data flowgraph TDSystem overviews, decision trees
sequence, API calls, who calls whosequenceDiagramProtocol flows, auth, microservice calls
class, domain model, OOP, UMLclassDiagramObject relationships, API shape
state, lifecycle, status transitionsstateDiagram-v2Order states, auth sessions, FSMs
database, schema, tables, ERerDiagramDB design, ORM models
priority, 2×2, effort vs impactquadrantChartRoadmap prioritisation
timeline, history, milestonestimelineProduct history, roadmap dates
mind map, brainstorm, concept mapmindmapTopic overviews, study guides
git, branching, gitflow, commitsgitGraphBranch strategy, release process
pie chart, distribution, percentagepieTraffic split, budget breakdown
schedule, project plan, sprintganttProject timelines