Визуализация данных с ChartDB

ChartDB - это мощный инструмент, предназначенный для упрощения и улучшения процесса визуализации сложных баз данных. В этой статье мы расскажем, как начать работу с ChartDB, попрактикуемся в создании вашей первой диаграммы базы данных и дадим практические советы, которые помогут вам развить навыки рассказывания историй о данных.

Что такое ChartDB?

ChartDB - это веб-редактор схем баз данных с открытым исходным кодом, который позволяет визуализировать схемы баз данных и управлять ими с помощью интерактивных диаграмм.

Хотя многие инструменты в экосистеме обладают схожими функциями, ChartDB выделяется своей простотой использования и функциями, которые упрощают визуализацию базы данных. Одной из таких функций является мгновенная визуализация схемы с помощью одного запроса, Smart Query, который позволяет импортировать схемы напрямую в виде файлов JSON, что невероятно ускоряет визуализацию вашей базы данных. Это может быть полезно для документирования, совместной работы или понимания структур баз данных.

Другие ключевые функции ChartDB включают в себя:

• Экспорт SQL с использованием искусственного интеллекта — создание скриптов миграции баз данных для различных платформ, таких как MySQL, PostgreSQL и SQLite.
• Интерактивное редактирование — изменяйте и комментируйте схемы непосредственно в инструменте.
• Не зависит от платформы — не требуется установка или учетные данные базы данных

ChartDB поддерживает популярные базы данных, такие как PostgreSQL, MySQL, SQL Server, MariaDB и ClickHouse.

Начало работы с базой данных ChartDB

Еще одной отличительной особенностью ChartDB является гибкость в использовании. Вы можете либо использовать веб-приложение, размещенное на официальном веб-сайте, либо самостоятельно разместить его локально, используя Docker или Node.js.

Веб-приложение - это самый быстрый способ начать работу с базой данных диаграмм. Просто войдите в систему с помощью учетной записи GitHub или Google, и вы готовы к работе. Вы можете перейти к следующему разделу, если предпочитаете использовать этот метод.

База данных диаграмм с самостоятельным размещением

Чтобы установить ChartDB локально, убедитесь, что на вашем компьютере установлен Node. При желании вы можете использовать Docker. Как только эти требования будут выполнены, клонируйте репозиторий с помощью следующей команды:

git clone https://github.com/chartdb/chartdb.git

Размер хранилища составляет несколько мегабайт, поэтому в более медленных сетях клонирование может занять минуту или две. Но как только оно будет завершено, перейдите в папку chartDB и установите необходимые зависимости:

cd chartDB
npm install

После установки запустите сервер разработки с помощью этой команды:

npm run dev

Как только сервер запустится, откройте браузер и перейдите на localhost:5173, чтобы получить доступ к базе данных диаграмм. Для производственных сборок используйте эту команду:

npm run build

База данных ChartDB позволяет добавлять возможности искусственного интеллекта в ваш локально развернутый форк. Чтобы включить эту функцию, вам понадобится действующий ключ OpenAI. Если он у вас есть, создайте приложение с помощью следующей команды:

VITE_OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> npm run build

Примечание: замените <YOUR_OPEN_AI_KEY> на ваш настоящий ключ OpenAI.

Самостоятельный хостинг с помощью Docker (необязательно)

Для тех, кто предпочитает Docker, вы можете создать и запустить ChartDB, используя следующие команды:

docker build -t chartdb.
docker run -e OPENAI_API_KEY=YOUR_OPEN_AI_KEY -p 8080:80 chartdb

И снова замените <YOUR_OPEN_AI_KEY> на свой ключ OpenAI. Как только процесс сборки будет завершен, откройте базу данных ChartDB, выбрав в своем браузере localhost:8080.

Если все настроено правильно, то при запуске локального сервера вы увидите следующий экран:

В следующем разделе мы рассмотрим, как создать вашу первую схему базы данных.

Создание вашей первой диаграммы

При первом посещении веб-приложения ChartDB вы получите модальное приглашение выбрать тип базы данных из списка поддерживаемых параметров, как показано на рисунке в предыдущем разделе. После нажатия на значок базы данных вы попадете на экран, похожий на этот:

На этом экране вам предоставляется скрипт "Магического запроса", который вы можете запустить в своей базе данных, чтобы получить схемы в формате JSON. Как только у вас будет полученный JSON-файл, вы должны скопировать и вставить его в пустое поле. ChartDB будет использовать эти входные данные для создания визуального представления вашей базы данных.

Однако, прежде чем копировать скрипт, вы должны выбрать версию своей базы данных. В этом руководстве мы будем использовать базу данных PostgreSQL, которая предлагает три версии: обычную, базовую надстройку и временную шкалу. Мы продолжим использовать обычную версию, но вам следует выбрать ту, которая соответствует вашему типу базы данных.

Затем решите, как вы хотите запустить скрипт. Вы можете использовать клиентский интерфейс базы данных, такой как pgAdmin, или инструмент командной строки Postgres. Для простоты мы будем использовать pgAdmin.

Если у вас еще не настроена база данных Postgres, вы можете быстро настроить ее, загрузив и установив Postgres с официального веб-сайта. Зачастую быстрее просто установить пакет, настроить базу данных и использовать pgAdmin для запроса к базе данных.

Однако PostgreSQL в Windows иногда может быть подвержен ошибкам. Если у вас возникнут проблемы со стандартным процессом установки, попробуйте настроить Postgres с помощью Docker.

Как только PostgreSQL будет настроен, подключите его к pgAdmin, используя имя хоста и порт. Поскольку PostgreSQL работает локально, хостом обычно будет ваш IP-адрес и порт 5432.

После успешного подключения к pgAdmin щелкните правой кнопкой мыши в меню "Базы данных", затем выберите "Создать" > "База данных" в контекстном меню:

В появившемся окне введите имя базы данных в поле База данных и нажмите кнопку Сохранить, чтобы создать базу данных:

Как только база данных будет создана, она появится в раскрывающемся списке "Базы данных". Найдите только что созданную базу данных (в данном случае электронную коммерцию), щелкните по ней правой кнопкой мыши и выберите в контекстном меню пункт "Инструмент запроса".:

Откроется новая вкладка с полем запроса, в котором вы можете ввести и запустить скрипты, используя значок воспроизведения или нажав клавишу F5 для запроса к базе данных:

Выполните следующие действия, чтобы добавить таблицы и образцы данных во вновь созданную базу данных:

1. Создайте таблицы:

CREATE TABLE users (
userid SERIAL PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
passwordhash VARCHAR(255) NOT NULL,
createdat TIMESTAMP DEFAULT CURRENTTIMESTAMP
);CREATE TABLE products (
productid SERIAL PRIMARY KEY,
name VARCHAR(100) NOT NULL,
description TEXT,
price DECIMAL(10, 2) NOT NULL,
stockquantity INT DEFAULT 0,
createdat TIMESTAMP DEFAULT CURRENTTIMESTAMP
);CREATE TABLE orders (
orderid SERIAL PRIMARY KEY,
userid INT REFERENCES users(userid),
orderdate TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
status VARCHAR(20) DEFAULT 'pending'
);CREATE TABLE orderitems (
orderitemid SERIAL PRIMARY KEY,
orderid INT REFERENCES orders(orderid),
productid INT REFERENCES products(product_id),
quantity INT NOT NULL,
price DECIMAL(10, 2) NOT NULL
);

2. Создайте индексы:

CREATE INDEX idxusersusername ON users(username);
CREATE INDEX idxproductsname ON products(name);
CREATE INDEX idxordersuserid ON orders(userid);
CREATE INDEX idxorderitemsorderid ON orderitems(orderid);

3. Добавьте примеры данных.:

INSERT INTO users (username, email, passwordhash) VALUES
('johndoe', '[email protected]', 'hashedpassword1'),
('janesmith', '[email protected]', 'hashed_password2');INSERT INTO products (name, description, price, stock_quantity) VALUES
('Laptop', 'High-performance laptop', 1200.00, 10),
('Smartphone', 'Latest model smartphone', 800.00, 25);INSERT INTO orders (user_id, status) VALUES
(1, 'completed'),
(2, 'pending');INSERT INTO orderitems (orderid, product_id, quantity, price) VALUES
(1, 1, 1, 1200.00),
(2, 2, 2, 1600.00);

Эти скрипты создадут базу данных для вымышленной платформы электронной коммерции, которая будет включать таблицу для пользователей, продуктов, заказов и позиций заказа, а также некоторые взаимосвязи между таблицами.

После успешного создания базы данных и заполнения ее таблицами и данными очистите поле запроса, скопируйте и вставьте волшебный запрос из базы данных диаграмм, а затем запустите его. Если все настроено правильно, на вкладке "Вывод данных" под полем запроса отобразится результат, аналогичный приведенному ниже примеру:

Вот схема базы данных, которую мы только что создали в формате JSON. Чтобы скопировать ее, нажмите на вывод в формате JSON, чтобы выделить значок копирования, затем нажмите на значок, чтобы скопировать вывод в буфер обмена:

Затем вернитесь в веб-приложение ChartDB, вставьте выходные данные JSON в пустое поле в модале ChartDB и нажмите кнопку "Проверить результат скрипта", чтобы проверить выходные данные скрипта:

Как только схема JSON будет проверена, нажмите кнопку Импортировать, и ChartDB сгенерирует на ее основе диаграмму:

Поздравляю! Вы успешно создали свою первую диаграмму в базе данных диаграмм. Далее мы познакомимся с редактором и рассмотрим, как его компоненты взаимодействуют друг с другом.

Знакомство с редактором

Теперь, когда у вас есть визуализированная база данных, давайте рассмотрим, как использовать редактор для улучшения визуализации и изучить дополнительные возможности, которые предлагает ChartDB.

На первый взгляд, редактор разделен на два интуитивно понятных раздела:

Левая панель (обозреватель схем)

Этот раздел содержит список всех таблиц, доступных в схеме вашей базы данных. Вы можете добавлять новые таблицы, изменять существующие, а также устанавливать или редактировать связи между таблицами непосредственно в редакторе:

Таблицы отображаются в виде расширяемого древовидного представления, которое позволяет просматривать, редактировать или добавлять столбцы и индексы в каждой таблице. Вы также можете добавлять аннотации, что особенно полезно для совместной работы и документирования.:

Строка поиска в верхней части панели динамически просматривает список таблиц, чтобы быстро найти определенные таблицы или столбцы:

Правая панель (основное рабочее пространство)

Вот где происходит волшебство. Основное рабочее пространство представляет собой сетчатую панель, на которой таблицы базы данных отображаются в виде перемещаемых блоков, внутри каждого из которых четко указаны столбцы и ключи:

Линии, соединяющие ячейки, представляют связи (внешние ключи) между таблицами. Они иллюстрируют взаимодействие ячеек и обеспечивают наглядное представление связей между таблицами:

Поля поддерживают интерактивное редактирование, то есть вы можете щелкнуть значок редактирования, чтобы развернуть древовидное представление таблицы на левой панели, где вы можете добавлять новые свойства или изменять существующие.

Связи также могут быть установлены непосредственно на плате с помощью точек подключения (или привязок), которые появляются при нажатии на флажок:

Эти точки подключения указывают, где в полях могут быть созданы или уже существуют связи. Вы можете перетащить точку подключения на точку подключения другой таблицы, чтобы установить связь с внешним ключом. Однако важно отметить, что связи должны устанавливаться только между связанными полями.

В приведенном ниже примере ошибка возникает при попытке соединить два несвязанных поля, но завершается успешно, когда мы преобразуем их в связанные поля:

В нижней части панели расположены элементы управления. Эти элементы управления позволяют увеличивать и уменьшать масштаб изображения схемы и перемещать его по рабочей области, чтобы сфокусироваться на различных частях структуры базы данных.

Экспорт SQL на основе искусственного интеллекта

SQL-экспорт на базе искусственного интеллекта в CHARTDB упрощает миграцию баз данных между различными системами. Он автоматически генерирует сценарии на языке определения данных (DDL), адаптированные к конкретным платформам баз данных. То есть искусственный интеллект настраивает типы данных, ограничения и другие элементы схемы в соответствии с соглашениями и требованиями целевой базы данных.

Например, он может преобразовать AUTO_INCREMENT в MySQL в SERIAL в PostgreSQL или обрабатывать различия в определениях первичного ключа и индекса.

Чтобы использовать эту функцию, выберите пункт меню "Файл" на панели навигации редактора, выберите целевую базу данных из списка "Экспорт SQL" и создайте настраиваемый вывод DDL:

В этом примере мы успешно перенесли базу данных PostgreSQL в MariaDB, не требуя глубоких знаний в обеих системах. Таким образом, мы можем свести к минимуму количество ошибок и сэкономить время, устраняя необходимость в ручной перезаписи.

Обратите внимание, что для локального использования этих функций при создании приложения необходимо задать переменную среды с ключом OpenAI. Без этого ключа функция экспорта AI SQL работать не будет.

Если у вас нет ключа OpenAI, но вы хотите получить доступ к этим функциям, рассмотрите возможность использования веб-приложения, в котором функции искусственного интеллекта работают "из коробки".

Внедрение диаграмм и совместное использование ими

ChartDB упрощает совместное использование диаграмм и внедрение схем баз данных. Вы можете сохранять диаграммы в виде графических файлов (например, PNG или SVG) для слайд-шоу или вложений в электронную почту. Кроме того, вы можете экспортировать их в виде файлов JSON для встраивания диаграмм во внешние веб-страницы или обмена рабочими процессами ChartDB в режиме реального времени с командами или клиентами.

Чтобы предоставить общий доступ к диаграмме, щелкните в меню Файл на панели навигации. Под пунктом Экспорт SQL в выпадающем меню вы найдете пункт Экспортировать как. Щелкните по нему и выберите предпочитаемый тип графического файла для экспорта диаграммы:

Чтобы экспортировать диаграмму в формате JSON, воспользуйтесь меню "Поделиться" на панели навигации и выберите "Экспортировать диаграмму":

Вы также заметите, что под параметром экспорта находится опция импорта диаграмм. Это позволяет импортировать общие диаграммы в формате JSON от другого пользователя ChartDB или из проверенного файла JSON, совместимого с ChartDB.:

Вывод

База данных ChartDB является относительно новой для экосистемы построения диаграмм баз данных и, возможно, еще не сравнялась с такими инструментами, как DBeaver и dbdiagram, по функциональности и масштабу сообщества. Однако, ChartDB предлагает новый подход, благодаря простой визуализации базы данных и интуитивно понятному пользовательскому интерфейсу.

Независимо от того, являетесь ли вы аналитиком данных, бизнес-профессионалом или разработчиком, освоение базы данных ChartDB поможет вам преобразовать необработанные данные в четкие и значимые визуальные эффекты.