Visualise Your Codebase Architecture with Mermaid Diagrams
When you're knee-deep in an unfamiliar codebase, a diagram can explain in seconds what 30 minutes of reading can't. Ask Claude to generate a Mermaid diagram directly from your code.
Read the files in src/services and generate a Mermaid flowchart showing the relationships
and data flow between services.
Claude will produce diagram source you can paste straight into GitHub, Notion, or any Markdown-aware tool:
graph TD
AuthService --> UserService
UserService --> EmailService
UserService --> BillingService
BillingService --> WebhookService
You can get more specific about what you want to show:
Generate a Mermaid sequence diagram showing the full request lifecycle for
POST /api/checkout — include every service call, database query, and external
API interaction in order.
Or use it for planning rather than documentation:
I'm adding a notification system to this app. Generate a Mermaid diagram of
the proposed architecture based on the existing event system in src/Events.
Because Mermaid diagrams live as plain text in your repo, they stay in sync as your architecture evolves — just ask Claude to regenerate them after major refactors.
A diagram you didn't have to draw is a diagram you'll actually keep up to date.
Log in to leave a comment.
The /security-review command scans your uncommitted changes for injection vectors, auth gaps, hardcoded secrets, and other common vulnerabilities.
The SessionStart hook fires when any session begins or resumes, making it ideal for loading environment variables and running one-time setup scripts.
Ask Claude to write property-based tests for your functions using fast-check — it identifies the mathematical invariants in your code and generates tests that cover inputs you'd never enumerate by hand.