drawdb - Moses Yebei

The Problem

Designing and maintaining relational‑database diagrams is tedious when the tooling forces manual layout, copy‑paste SQL, or external installs. Teams that need a quick visual model –‑ for onboarding, documentation, or rapid prototyping –‑ often resort to heavyweight desktop apps or ad‑hoc sketches, which slows iteration and introduces errors.

What This Does

drawdb provides a browser‑based editor that lets users drag‑and‑drop tables, define columns, relationships, and export the resulting schema as SQL. The UI lives under src/ with React components such as src/components/EditorCanvas/Table.jsx and src/components/EditorHeader/ControlPanel.jsx. Core data definitions are in src/data/constants.js, src/data/datatypes.js, and src/data/db.js. The app is bundled with Vite (vite.config.js) and served either via the built static files (index.html) or a thin Express wrapper defined in src/api/ and the Dockerfile.

How It Is Wired

Startup – Vite reads src/App.jsx (the root React component) and injects it into index.html. The development server (npm run dev) launches the Vite dev process; the production build (npm run build) outputs static assets consumed by the Docker container.
State Management – The most widely referenced hook is src/hooks/useLayout.js (called from 30 other files). It supplies layout‑related state to components like Workspace.jsx and EditorCanvas/Canvas.jsx. useDiagram.js, useUndoRedo.js, and useSelect.js are similarly hot‑spots, each exported from src/hooks/index.js (hub module with 53 inbound imports).
Diagram Operations – User actions (add table, move, undo) flow through the custom hooks: e.g., ControlPanel.jsx calls undo/redo from useUndoRedo.js, which ultimately invoke updateTable/updateArea defined in src/context/DiagramContext.jsx. The call graph shows undo → updateTable (8 edges) and redo → updateTable (7 edges).
SQL Generation – The export path starts at src/utils/exportSQL/index.js → generateMigrationSQL → helper functions (escapeQuotes, quoteIdentifier, columnDefinition). These helpers are invoked 18–24 times per export, ending in a string written to the browser download API – no external network calls.
Import Path – src/utils/importSQL/index.js reads a DBML/SQL blob, parses it via src/utils/importSQL/shared.js, and populates the diagram by calling the same context mutators used by the UI.
External Touches – Nine functions perform outbound HTTP (e.g., src/api/email.js for sharing links) and three read/write the file system (Docker build copies static assets). No database server is contacted; the app is purely client‑side unless the optional server is deployed.

Blast‑radius notes –

src/data/constants.js is a hub (70 inbound imports); any change ripples through most of the UI.
Circular imports involve 21 modules, notably src/hooks/index.js, src/data/datatypes.js, and src/utils/utils.js; breaking these cycles reduces coupling.
Deep nesting (up to 7 levels) appears in Workspace.jsx and several canvas components, making future modifications harder to reason about.

How To Use It

# Clone the exact repo
git clone https://github.com/moses-y/drawdb
cd drawdb

# Install dependencies (npm uses the lockfile)
npm ci

# Development server
npm run dev          # Vite serves on http://localhost:5173

# Production build
npm run build        # outputs to ./dist
docker build -t drawdb .   # builds the container
docker run -p 3000:80 drawdb   # serves static files

No environment variables are required for the standalone UI; sharing features need the separate drawdb-server and variables described in .env.sample.

Real‑World Use

A SaaS product can embed drawdb in its admin console to let product managers sketch new data models. The UI stores the diagram in local storage; on “Export”, exportSQL produces a migration script that the CI pipeline applies to the production database, eliminating manual copy‑paste.

Code Health & Issues

HIGH – GitHub Actions use mutable tags (docker/setup-qemu-action@v3 etc.). Pin to commit SHAs.
HIGH – Audit flags insufficient test coverage despite three test files; add a comprehensive suite covering public hooks and export/import.
MEDIUM – Workflows lack least‑privilege GITHUB_TOKEN permissions.
MEDIUM – No Dependabot/Renovate configuration; add .github/dependabot.yml.
MEDIUM – CI installs with npm install; replace with npm ci to respect the lockfile.
MEDIUM – Base images (node:20-alpine, nginx:stable-alpine3.17) are unpinned; use digests.
MEDIUM – No dependency‑vulnerability gate; add dependency-review-action or osv-scanner.
MEDIUM – Checkout step keeps credentials; set persist-credentials: false.
MEDIUM – Dockerfile runs as root; add a non‑root USER.
LOW – Workflow jobs lack timeout-minutes; define reasonable limits.

Additional static findings (import cycles, oversized files, duplicated 6‑line blocks) indicate maintainability pressure and should be addressed in a refactor.

The Bottom Line

drawdb delivers a functional, client‑side diagram editor with a clear React architecture, but the codebase suffers from tight coupling, deep nesting, and several production‑grade hygiene gaps. It is suitable for teams that need a quick visual tool and are comfortable adding tests, tightening CI, and refactoring hub modules for long‑term stability.

What the analyser found

Deployment readiness

7/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

255 files

JavaScript124
JSX85
YAML4
Markdown4
JSON4
CSS2

ReactExpressTailwindDocker

Module dependencies

The 10 most depended-upon modules of 209, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0_src_data_constants["constants"] n1_src_hooks_index["index"] n2_src_data_datatypes["datatypes"] n3_src_i18n_i18n["i18n"] n4_src_data_databases["databases"] n5_src_utils_utils["utils"] n6_src_utils_exportSQL_shared["shared"] n7_src_data_db["db"] n8_onents_EditorSidePanel_Empty["Empty"] n9_src_i18n_utils_rtl["rtl"] n4_src_data_databases --> n3_src_i18n_i18n n4_src_data_databases --> n0_src_data_constants n2_src_data_datatypes --> n5_src_utils_utils n2_src_data_datatypes --> n0_src_data_constants n6_src_utils_exportSQL_shared --> n5_src_utils_utils n6_src_utils_exportSQL_shared --> n0_src_data_constants n6_src_utils_exportSQL_shared --> n2_src_data_datatypes n5_src_utils_utils --> n2_src_data_datatypes n5_src_utils_utils --> n0_src_data_constants classDef cyc stroke:#ef4444,stroke-width:2px; class n1_src_hooks_index,n2_src_data_datatypes,n5_src_utils_utils cyc;

What would stop me shipping this

Ranked by severity × confidence × production reach. Reach is the honest discriminator across a collection that is mostly other people's code: the same finding matters more in something that ships.

high2

medium7

low1

Pin third-party GitHub Actions to a commit SHAhigh4 occurrences

.github/workflows

docker/setup-qemu-action@v3, docker/setup-buildx-action@v3, docker/login-action@v3, docker/build-push-action@v6

A tag can be moved, so the action running with your token and secrets is whatever its owner last pushed; this is how tj-actions/changed-files leaked secrets from thousands of repos.

Fix: Replace each @vN with the 40-character commit SHA, keep # vN as a comment, and let Dependabot bump the SHAs.

Add a test suite; this repository has nonehigh210 occurrences

210 source files, no test files

Any change ships with no signal that existing behaviour still holds, so a regression reaches production undetected.

Fix: Add one test per public entry point, then a CI step that runs them.

Declare least-privilege permissions for GITHUB_TOKENmedium2 occurrences

.github/workflows/build.yml

2 workflow(s) declare no permissions, 1 of them reference secrets

With no declaration the token inherits the repository default, so any injected step can push commits or mint releases from inside your own CI.

Fix: Add permissions: contents: read at the top of the workflow and widen per job only where needed.

Enable Dependabot or Renovatemedium

1 manifest(s), no update bot configured

Without a bot a published advisory sits unpatched until someone audits by hand, which across 1,322 repositories means never.

Fix: Commit .github/dependabot.yml covering the repo ecosystems plus github-actions.

Install from the lockfile in CImedium

.github/workflows

npm install with a committed package-lock.json

A fresh resolution in CI means the tested dependency set is not the locked one, so the failure only appears after merge.

Fix: Use npm ci, yarn install --immutable, or pnpm install --frozen-lockfile.

Pin the container base image by digestmedium2 occurrences

Dockerfile

node:20-alpine, docker.io/library/nginx:stable-alpine3.17

An untagged or mutable base means today's build and last month's contain different libc and a different CVE set, with no record of which shipped.

Fix: Use image:tag@sha256:<digest> and enable Dependabot's docker ecosystem.

Gate pull requests on a dependency vulnerability scanmedium

.github/workflows

no dependency scan in CI

This is the one gate that would catch a known-vulnerable package before it reaches a build, and no repository in the sample had it.

Fix: Add dependency-review-action on pull_request, or osv-scanner on push and a schedule.

Set persist-credentials: false on checkoutmedium

.github/workflows/build.yml

checkout keeps the token, then dependencies are installed

The token stays in .git/config for every later step, so a malicious postinstall script reads a pushable credential without one ever being passed to it.

Fix: Add with: persist-credentials: false, and pass an explicit token only to the step that pushes.

Add a non-root USER to the imagemedium

Dockerfile

CMD or ENTRYPOINT with no USER directive

A process running as root in the container is root against every mounted volume, and it turns any container escape or writable-mount mistake from a contained problem into a host one.

Fix: Create an unprivileged user, chown what it needs, and end the Dockerfile with USER.

Set timeout-minutes on the workflow jobslow2 occurrences

.github/workflows/build.yml

2 workflow(s) declare no job timeout

A wedged step runs to the six-hour platform default, which on a two-hourly schedule means three runs overlap behind it.

Fix: Add timeout-minutes with a realistic bound to each job.

Checked deterministically against the repository tree and a bounded set of its files: committed credentials, unpinned actions and base images, missing lockfiles and update bots, workflows that discard failures, published advisories against the declared dependencies, runtime configuration, licensing and notebook reproducibility. No language model is involved in this section.