ai-agent

chartdb

Database diagrams editor that allows you to visualize and design your DB with a single query.
22,996 stars+7★ this week1,503 forksTypeScriptUpdated 9/13/2026100% free · open source
What it does

Chartdb is a database diagrams editor that allows you to visualize and design your database with a single query.

When to use it
  • •You need to design a new database schema
  • •You want to visualize an existing database structure
  • •You need to document or share your database design with team members
Ready-to-paste prompt
To create a new database diagram, use the query 'CREATE TABLE users (id INT, name VARCHAR(255))' and then click on the 'Visualize' button
Heads up: You need to have Node.js installed on your system to run chartdb, and make sure you are using a compatible version of npm
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/chartdb && curl -fsSL https://workflowstacks.com/api/skills/chartdb/claude-skill -o ~/.claude/skills/chartdb/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How chartdb works
Codeflow
Free to inspect

Chartdb is a very large TypeScript project (~167k lines across 452 code files, plus 108 test files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, AGPL-3.0 license, has a test suite.

Size
Very large codebase
~167k lines · 452 code files · days to read — use, don't read
Setup
Developer setup
A real software project. Use it via its install path; don't expect to read it all.
Runs on
Node.js · Docker
No API keys detected
TypeScript 100%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    src/app.tsx
    Where the program starts running
  3. 3
    package.json
    Dependencies and the commands it exposes
What's in each folder
src/Core code — the actual logic719 files
public/Images & static assets9 files
.github/CI / automation (GitHub Actions)4 files
.husky/Tool / agent settings1 files
READMEHas testsDocumentedCI checksDocker readyAGPL-3.0 licenseUpdated this month
Quick Actions
Details
Creator
chartdb
Language
TypeScript
Category
ai-agent
Published
8/5/2024

Are you the creator of this tool? and earn 85% of every sale.

Show it off in your README:

Featured on WorkflowStacks
[![Featured on WorkflowStacks](https://workflowstacks.com/api/badge/chartdb.svg)](https://workflowstacks.com/skills/chartdb?utm_source=github&utm_medium=badge)
🔥 Hot this week, in your inbox
Skills like this, every Monday.

The five fastest-growing open-source AI skills, ranked by GitHub star growth. One email a week, unsubscribe anytime.

Do this with a working workflow

Pages we wrote and tested that put a skill like this to work — importable n8n templates, outcome guides and Claude Desktop configs.