sight

Generate Mermaid diagrams from database, API, and component structures.

Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jtucker9/mystuff --skill sight-jtucker9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sight
Source: https://github.com/jtucker9/mystuff/tree/main/skills/sight
Command: npx skills add https://github.com/jtucker9/mystuff --skill sight-jtucker9

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visualize and understand complex codebases by automatically generating Mermaid diagrams that map architecture, data flow, and schemas.

Core Features & Use Cases

  • Diagram types: erDiagram for database schemas, flowchart TD for APIs, graph TD for components, and flowchart TD for architecture maps.
  • Context-driven generation: Produces diagrams based on user-provided context or project structure.
  • Use Case: You want to quickly visualize a microservices architecture to discuss integration points with teammates.

Quick Start

Ask the tool to generate a Mermaid diagram for the current project architecture.

Frequently Asked Questions about sight

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize database schemas and API routes using Mermaid diagrams?▼

To visualize database schemas and API routes using Mermaid diagrams, the tool reads migrations from the database/ directory and API sources from src/app/api/ to generate context-driven erDiagram or flowchart TD outputs automatically.

What is the best way to generate architecture diagrams from an existing codebase?▼

Generating architecture diagrams from an existing codebase is done by reading component structures from src/app/ and producing graph TD Mermaid diagrams that map overall system architecture for quick visualization.

Can I save generated Mermaid diagrams directly into my project documentation?▼

Yes, you can save generated Mermaid diagrams directly into project documentation. The tool saves diagram outputs to the specific path docs/diagrams/{name}.mermaid within your project structure.

Does this diagram generation approach work for visualizing microservices data flow?▼

Visualizing microservices data flow is supported by generating flowchart TD diagrams that map architecture and data flow across project contexts, allowing you to discuss integration points with teammates.

How do I map code structure to clear diagrams without manual drawing?▼

Mapping code structure to clear diagrams without manual drawing is achieved by applying context-driven generation to your project directories, which parses database schemas, API routes, and component structures to output Mermaid syntax.