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.