Diagram on Producthunt daily

drawdb

Sat, 05 Jul 2025 15:28:25 +0800

drawdb-io/drawdb

^{Special thanks to:}

Next-gen AI-powered intelligent terminal for all platforms

drawDB

Free, simple, and intuitive database schema editor and SQL generator.

DrawDB is a robust and user-friendly database entity relationship (DBER) editor right in your browser. Build diagrams with a few clicks, export sql scripts, customize your editor, and more without creating an account. See the full set of features here.

Getting Started

Local Development

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run dev

Build

git clone https://github.com/drawdb-io/drawdb
cd drawdb
npm install
npm run build

Docker Build

1
2

docker build -t drawdb .
docker run -p 3000:80 drawdb

If you wish to work with sharing, set up server and environment variables according to .env.sample. This is not required unless you want to share files.

gitdiagram

Thu, 15 May 2025 15:30:17 +0800

ahmedkhaleel2004/gitdiagram

GitDiagram

Turn any GitHub repository into an interactive diagram for visualization in seconds.

You can also replace hub with diagram in any Github URL to access its diagram.

🚀 Features

👀 Instant Visualization: Convert any GitHub repository structure into a system design / architecture diagram
🎨 Interactivity: Click on components to navigate directly to source files and relevant directories
⚡ Fast Generation: Powered by OpenAI o4-mini for quick and accurate diagrams
🔄 Customization: Modify and regenerate diagrams with custom instructions
🌐 API Access: Public API available for integration (WIP)

⚙️ Tech Stack

Frontend: Next.js, TypeScript, Tailwind CSS, ShadCN
Backend: FastAPI, Python, Server Actions
Database: PostgreSQL (with Drizzle ORM)
AI: OpenAI o4-mini
Deployment: Vercel (Frontend), EC2 (Backend)
CI/CD: GitHub Actions
Analytics: PostHog, Api-Analytics

🤔 About

I created this because I wanted to contribute to open-source projects but quickly realized their codebases are too massive for me to dig through manually, so this helps me get started - but it’s definitely got many more use cases!

Given any public (or private!) GitHub repository it generates diagrams in Mermaid.js with OpenAI’s o4-mini! (Previously Claude 3.5 Sonnet)

I extract information from the file tree and README for details and interactivity (you can click components to be taken to relevant files and directories)

Most of what you might call the “processing” of this app is done with prompt engineering - see /backend/app/prompts.py. This basically extracts and pipelines data and analysis for a larger action workflow, ending in the diagram code.

🔒 How to diagram private repositories

You can simply click on “Private Repos” in the header and follow the instructions by providing a GitHub personal access token with the repo scope.

You can also self-host this app locally (backend separated as well!) with the steps below.

🛠️ Self-hosting / Local Development

Clone the repository

1
2

git clone https://github.com/ahmedkhaleel2004/gitdiagram.git
cd gitdiagram

Install dependencies

pnpm i

Set up environment variables (create .env)

`1`	`cp .env.example .env`

Then edit the .env file with your Anthropic API key and optional GitHub personal access token.

Run backend

`1`	`docker-compose up --build -d`

Logs available at docker-compose logs -f The FastAPI server will be available at localhost:8000

Start local database

1
2

chmod +x start-database.sh
./start-database.sh

When prompted to generate a random password, input yes. The Postgres database will start in a container at localhost:5432

Initialize the database schema

`1`	`pnpm db:push`

You can view and interact with the database using pnpm db:studio

Run Frontend

`1`	`pnpm dev`

You can now access the website at localhost:3000 and edit the rate limits defined in backend/app/routers/generate.py in the generate function decorator.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgements

Shoutout to Romain Courtois’s Gitingest for inspiration and styling

📈 Rate Limits

I am currently hosting it for free with no rate limits though this is somewhat likely to change in the future.

🤔 Future Steps

Implement font-awesome icons in diagram
Implement an embedded feature like star-history.com but for diagrams. The diagram could also be updated progressively as commits are made.

liam

Tue, 08 Apr 2025 15:29:27 +0800

liam-hq/liam

Automatically generates beautiful and easy-to-read ER diagrams from your database.

Website • Documentation • Roadmap

What’s Liam ERD?

Liam ERD generates beautiful, interactive ER diagrams from your database. Whether you’re working on public or private repositories, Liam ERD helps you visualize complex schemas with ease.

Beautiful UI & Interactive: A clean design and intuitive features (like panning, zooming, and filtering) make it easy to understand even the most complex databases.
Simple Reverse Engineering: Seamlessly turn your existing database schemas into clear, readable diagrams.
Effortless Setup: Get started with zero configuration—just provide your schema, and you’re good to go.
High Performance: Optimized for both small and large projects, easily handling 100+ tables.
Fully Open-Source: Contribute to the project and shape Liam ERD to fit your needs.

Quick Start

For Public Repositories

Insert liambx.com/erd/p/ into your schema file’s URL:

1
2
3

# Original: https://github.com/user/repo/blob/master/db/schema.rb
# Modified: https://liambx.com/erd/p/github.com/user/repo/blob/master/db/schema.rb
                  👾^^^^^^^^^^^^^^^^👾

For Private Repositories

Run the interactive setup:

`1`	`npx @liam-hq/cli init`

If you find this project helpful, please give it a star! ⭐
Your support helps us reach a wider audience and continue development.

Documentation

Check out the full documentation on the website.

Roadmap

See what we’re working on and what’s coming next on our roadmap.

Contributing

Refer to our contribution guidelines and Code of Conduct for contributors.

Contributors

License

Liam ERD is licensed under the Apache License Version 2.0.

Licenses for third-party packages can be found in docs/packages-license.md.