OpenSource-Hub

drawdb

アプリケーション

drawdb-io/drawdb

無料のブラウザ上で動作するデータベース ERD 編集・SQL 生成ツール。

概要

DrawDB は、完全にブラウザ上で動作する無料でシンプルかつ直感的なデータベース ER図(ERD)エディタです。登録不要で図の作成、SQL スクリプトの生成、マイグレーションのエクスポートが可能で、PostgreSQL、MySQL、SQLite など複数のデータベースに対応しています。

README プレビュー

\n  Special thanks to:\n  \n  \n    \n    \n    Next-gen AI-powered intelligent terminal for all platforms\n  \n\n\n\n\n\n\n    \n    drawDB\n\n\nFree, simple, and intuitive database schema editor and SQL generator.\n\n\n    \n        \n    \n    \n        \n    \n    \n        \n    \n\n\n\n\nDrawDB is a robust and user-friendly database entity relationship diagram (ERD) editor right in your browser. Build diagrams with a few clicks, export and import SQL scripts, generate migrations, customize your editor, and more without creating an account. See the full set of features on [here](https://drawdb.app/).\n\n## Getting Started\n\n### Local Development\n\n```bash\ngit clone https://github.com/drawdb-io/drawdb\ncd drawdb\nnpm install\nnpm run dev\n```\n\n### Build\n\n```bash\ngit clone https://github.com/drawdb-io/drawdb\ncd drawdb\nnpm install\nnpm run build\n```\n\n### Docker Build\n\n```bash\ndocker build -t drawdb .\ndocker run -p 3000:80 drawdb\n```\n\nIf you want to enable sharing, set up the [server](https://github.com/drawdb-io/drawdb-server) and environment variables according to `.env.sample`. This is optional unless you need to share files.\n\n## Contributing\n\nPlease see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on how to contribute to this project.\n\n## Support\n- Join discussions: [Discord](https://discord.gg/BrjZgNrmR6)\n

FAQ (4)

トラブル対応
なぜ DrawDB Docker は VITE_BACKEND_URL を無視して /diagrams/undefined/gists に POST するのですか?

Vite はビルド時に import.meta.env.VITE_BACKEND_URL を置き換えるため、古い DrawDB イメージでは docker run で -e VITE_BACKEND_URL=... を読み取ることができません。ランタイム設定の修正を含むイメージに更新してから、新しいコンテナを起動してください:

docker pull ghcr.io/drawdb-io/drawdb:latest

docker run -d --name drawdb \
  -p 3024:80 \
  -e VITE_BACKEND_URL=https://api.example.com \
  ghcr.io/drawdb-io/drawdb:latest

バックエンドのオリジンは末尾にスラッシュを付けずに指定してください。起動後、キャッシュされた設定を避けるためにブラウザをハードリフレッシュ(Ctrl+Shift+R)してください。DevTools で、Share/Gist リクエストが http://localhost:3024/editor/diagrams/undefined/gists ではなく https://api.example.com/diagrams/.../gists に送信されることを確認してください。

Docker Compose での同等の設定:

services:
  drawdb:
    image: ghcr.io/drawdb-io/drawdb:latest
    ports:
      - "3024:80"
    environment:
      VITE_BACKEND_URL: https://api.example.com

修正が含まれていない古いイメージでは、コンテナの実行時にのみ設定しても効果がないため、docker build を実行する前に .env に追加するなどして、イメージのビルド時にこの変数が存在している必要があります。

参照 Issue #1025
トラブル対応
カーソルが境界の外に移動するとカラーピッカーが閉じてしまう問題を修正するにはどうすればよいですか?

外側の ColorPicker ラッパーから onMouseLeave イベントハンドラーを削除してください。例えば、ラッパーの div から onMouseLeave={handleColorPick} を削除してください。ピッカーは、色を選択している最中にマウスが一時的にその境界の外に出たときではなく、実際に外側がクリックされたときにのみ閉じるようにしてください。

参照 Issue #1147
トラブル対応
drawDBで1つのenumの名前を変更または編集しただけなのに、インポートされたPostgreSQLのenumがすべて変更されてしまうのはなぜですか?

これは、インポートされたPostgreSQL enumオブジェクトに一意のIDが割り当てられていなかったため、drawDBが編集時にそれらを同一のオブジェクトとして扱っていたことが原因で発生します。これは、fromPostgresインポート関数内で各enumが作成される際に一意のIDを追加することで修正されます。例えば: enums.push({ id: nanoid(), name, values })。issue #1141の修正を含むリリースにdrawDBを更新してください。セルフホスティングしている場合は、fromPostgres内のPostgreSQL enum作成処理にパッチを適用し、インポートされるすべてのenumに対してnanoid()を呼び出すようにしてください。

参照 Issue #1141
トラブル対応
drawdb.appのホームページが真っ白になり「TypeError: n is not iterable」と表示される問題は、どうすれば修正できますか?

これはブラウザ固有の問題ではなく、drawdbの本番環境におけるJavaScriptのバグで、Chrome、Firefox、Edge、Safari、Vivaldiのすべてに影響していました。メンテナーが修正をデプロイしました。サイトがまだ空白の場合は、Ctrl+F5(Windows/Linux)またはCmd+Shift+R(macOS)で最新のアセットを強制的に再読み込みするか、キャッシュされたサイトデータを消去するか、シークレット/プライベートウィンドウを試してください。セルフホスト環境の場合は、最新のdrawdbリリース/イメージに更新して再ビルドまたは再起動してください。例: docker compose pull && docker compose up -d

参照 Issue #1036