JavaScript библиотека для визуализации DBML диаграмм баз данных.
npm install
npm run buildВажно: Все примеры работают в статичном HTML без необходимости запуска Node.js. Просто откройте HTML файл в браузере или используйте локальный сервер.
<!DOCTYPE html>
<html>
<head>
<title>DBML Diagram</title>
<link rel="stylesheet" href="dist/dbml-diagram.css">
</head>
<body>
<div id="diagram-container"
data-dbml-diagram
data-code="Table users { id int [pk] name varchar }">
</div>
<script src="dist/dbml-diagram.min.js"></script>
<script>
window.DBMLDiagram.autoInitialize();
</script>
</body>
</html>Подробные инструкции по использованию в статичном HTML см. в STATIC_HTML_USAGE.md.
const dbmlCode = `
Table users {
id int [pk, increment]
email varchar [unique, not null]
role varchar [default: 'user']
created_at timestamp
}
Table posts {
id int [pk, increment]
user_id int
title varchar [not null]
content text
published boolean [default: false]
indexes {
(user_id)
(created_at)
}
}
Ref: posts.user_id > users.id
`;
const diagram = new window.DBMLDiagram({
container: '#custom-diagram',
dbmlCode: dbmlCode,
theme: 'dark',
layout: 'auto',
tableWidth: 250,
lineStyle: 'curved',
colors: {
tableHeader: '#4a5568',
tableBody: '#2d3748',
primaryKey: '#f56565',
foreignKey: '#4299e1'
},
onTableClick: (tableName) => {
console.log('Table clicked:', tableName);
},
onRelationshipClick: (rel) => {
console.log('Relationship clicked:', rel);
}
});new DBMLDiagram(config)container(string | HTMLElement) - Селектор или элемент-контейнерdbmlCode(string) - DBML кодtheme('light' | 'dark') - Цветовая темаlayout('auto' | 'vertical' | 'horizontal') - Расположение элементовshowGrid(boolean) - Показывать сеткуgridSize(number) - Размер сетки (px)tableWidth(number) - Ширина таблиц (px)tableSpacing(number) - Расстояние между таблицами (px)lineStyle('straight' | 'curved' | 'orthogonal') - Стиль линий связейfontSize(number) - Размер шрифтаcolors(object) - Кастомизация цветовonTableClick(function) - Callback при клике на таблицуonRelationshipClick(function) - Callback при клике на связь
updateCode(newDBMLCode)- Обновление диаграммыchangeTheme('dark')- Смена темыexportAsSVG()- Экспорт в SVGexportAsPNG()- Экспорт в PNGzoomIn()- УвеличениеzoomOut()- УменьшениеresetView()- Сброс масштаба и позиции
window.DBMLDiagram.autoInitialize()- Автоматическая инициализация всех элементов сdata-dbml-diagram
- Перетаскивание таблиц - Зажмите левую кнопку мыши на таблице и перетащите
- Масштабирование - Используйте колесо мыши
- Панорамирование - Доступно несколькими способами:
- Правая кнопка мыши + перетаскивание
- Средняя кнопка мыши + перетаскивание
- Ctrl + левая кнопка мыши + перетаскивание
- Пробел + левая кнопка мыши + перетаскивание
- Ховер-эффекты - Наведите курсор на таблицы и связи
Table users {
id int [pk, increment]
username varchar [not null, unique]
email varchar [not null, note: 'User email address']
created_at timestamp
Note: 'Users table stores all user accounts'
}
Table posts {
id int [pk, increment]
user_id int [not null]
title varchar [not null]
content text [note: 'Post content in markdown format']
indexes {
(user_id)
(created_at)
}
Note: 'Blog posts table'
}
Ref: posts.user_id > users.id
Библиотека поддерживает отображение описаний (notes) для таблиц и полей:
- Note для таблицы:
Note: 'описание таблицы'внутри определения таблицы - Note для поля:
note: 'описание поля'в constraints колонки
Notes отображаются курсивом под названием таблицы или под полем.
В директории examples/ доступны следующие примеры:
- simple.html - Простой пример использования
- advanced.html - Расширенный пример с настройками
- auto-init.html - Автоматическая инициализация через data-атрибуты
- editor.html - Полнофункциональный редактор с панелью редактирования DBML кода
Откройте examples/editor.html для полнофункционального редактора с:
- Панелью редактирования DBML кода слева (с возможностью изменения размера)
- Визуализацией диаграммы справа
- Обновлением в реальном времени при изменении кода
- Экспортом в SVG/PNG
- Настройками темы и стиля линий
- Подсчетом строк кода
- Обработкой ошибок парсинга
# Установка зависимостей
npm install
# Сборка
npm run build
# Разработка с watch режимом
npm run dev
# Запуск локального сервера
npm run servedbml-diagram/
├── dist/ # Собранные файлы
│ ├── dbml-diagram.min.js # Production bundle
│ ├── dbml-diagram.esm.js # ES module
│ └── dbml-diagram.css # Стили
├── src/
│ ├── parser/ # Парсер DBML
│ ├── renderer/ # Визуализатор
│ ├── utils/ # Утилиты
│ └── index.js # Главный класс
└── examples/ # Примеры использования
MIT