diagramcn

A diagram visualization tool for shadcn/ui registry components.

Features

• Interactive diagram visualization
• Zoom in/out and center view controls
• Collapsible nodes for better organization
• Focus on specific nodes
• Responsive layout with mobile support
• Real-time JSON parsing and visualization
• Beautiful and modern UI with dark mode support

Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Diagram Components: Reaflow
• JSON Parsing: jsonc-parser
• Validation: Zod

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

How to Use

1. Enter a shadcn/ui registry command or URL in the input field
2. The diagram will automatically generate showing component dependencies
3. Use the toolbar to:
   • Zoom in/out
   • Center view
   • Focus on specific nodes
4. Click on nodes to expand/collapse their children
5. Toggle between light and dark modes
6. Edit the registry JSON directly in the editor panel

Learn More

To learn more about the technologies used in this project:

• Next.js Documentation
• shadcn/ui Documentation
• Reaflow Documentation
• Tailwind CSS Documentation

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Credits

• jsoncrack.com - For the json parser, node layout.