# Jantt: диаграмма Ганта из JSON за минуту
Настроишь Jantt: опишешь проект в одном JSON, запустишь интерактивный график с зависимостями и критическим путём у себя в HTML, React или Next.js - и научишь нейросеть собирать такой план за тебя.
// Шаг 0
## Что такое Jantt
Jantt - открытый движок таймлайнов: даёшь ему JSON с задачами, сроками и зависимостями, он рисует интерактивный график проекта. Задачи и сроки тянутся мышкой, связи идут стрелками под прямым углом, критический путь подсвечен. Ядро без зависимостей и меньше 14 КБ в сжатом виде, а нейросеть пишет такой план примерно в 10 раз меньшим числом токенов, чем интерфейс на JSX. Лицензия MIT.
[Репозиторий Jantt на GitHub](https://github.com/AhmadHassan-BTed/Jantt)
[Живая песочница Jantt](https://ahmadhassan-bted.github.io/Jantt/)
- [ ] Открыть репозиторий и поставить звезду, чтобы не потерять
- [ ] Открыть песочницу и посмотреть, как тянутся задачи и подсвечивается критический путь
---
// Шаг 1
## Шпаргалка по JSON: задачи, сроки, зависимости
Весь план - один объект из трёх частей: meta (название и шкала), categories (цветные группы задач) и tasks (сами задачи).
- meta.title - название проекта в шапке
- meta.start / meta.end - границы шкалы, формат YYYY-MM-DD
- meta.scale - масштаб: day, week, month, quarter или year
- meta.linkRouting - вид связей: orthogonal (под прямым углом), curved или direct
- meta.showCriticalPath - true, чтобы подсветить критический путь
- categories - ключ группы, а внутри label и color в HEX
- task: id, label, category, start, end - обязательный минимум
- dependsOn - id задачи, массив id или null: задача стартует не раньше конца предыдущей
- gapDays - пауза в днях после предыдущей задачи
- milestone: true и одинаковые start и end - веха
- progress - от 0.0 до 1.0, status - not-started, in-progress, submitted, completed, blocked
- locked: true - жёсткий дедлайн, его нельзя сдвинуть мышкой
- assignee, priority (low, medium, high, urgent), baseline, notes, fields - по желанию
```
{
"meta": {
"title": "Запуск лендинга",
"start": "2026-11-02",
"end": "2026-11-30",
"scale": "week",
"linkRouting": "orthogonal",
"showCriticalPath": true
},
"categories": {
"dev": { "label": "Разработка", "color": "#38BDF8" },
"launch": { "label": "Запуск", "color": "#10B981" }
},
"tasks": [
{ "id": "t1", "label": "Тексты и структура", "category": "dev", "start": "2026-11-02", "end": "2026-11-06", "progress": 1.0 },
{ "id": "t2", "label": "Дизайн", "category": "dev", "start": "2026-11-09", "end": "2026-11-13", "dependsOn": "t1", "progress": 0.5 },
{ "id": "t3", "label": "Вёрстка", "category": "dev", "start": "2026-11-16", "end": "2026-11-24", "dependsOn": "t2" },
{ "id": "go", "label": "Лендинг в эфире", "category": "launch", "start": "2026-11-25", "end": "2026-11-25", "dependsOn": "t3", "milestone": true, "locked": true }
]
}
```
_Рабочий шаблон: три задачи с зависимостями и веха. Скопируй и меняй под себя_
врезка `// Три правила валидности`: текст «Каждая category задачи должна совпадать с ключом в categories, все id в dependsOn - существовать, а цепочка связей - без циклов. Иначе валидатор не пропустит файл.»
[Полная шпаргалка по JSON-схеме](https://github.com/AhmadHassan-BTed/Jantt/blob/main/docs/JANTT_JSON_CHEATSHEET.md)
- [ ] Скопировать шаблон и вставить в песочницу
- [ ] Поменять названия и даты задач под свой проект
- [ ] Связать задачи через dependsOn и добавить хотя бы одну веху
- [ ] Включить showCriticalPath и найти подсвеченную цепочку
---
// Шаг 2
## Запуск у себя
врезка `// Важно`: текст «Пакетов @jantt в npm пока нет, поэтому команды npm install @jantt/... из README не сработают. Рабочий путь - собрать из репозитория, это пара минут. Нужны Node.js и git.»
- 1 «Склонируй и собери» — Скачай репозиторий, поставь зависимости и собери все пакеты одной командой.
- 2 «Проверь свой JSON» — CLI проверяет файл по схеме и открывает график с синхронизацией в файл: тянешь задачу - JSON на диске меняется.
- 3 «Выбери, куда встроить» — Обычный HTML, React или Next.js - ниже готовый код для каждого.
```
git clone https://github.com/AhmadHassan-BTed/Jantt.git
cd Jantt
npm install
npm run build
```
_Клонировать и собрать_
```
npx jantt validate ./examples/basic.json
npx jantt open ./examples/basic.json
```
_Запускай из папки Jantt. Для своего файла укажи путь к нему вместо примера_
```
npm run dev
```
_Запустить песочницу локально_
// Вариант A
## Обычный HTML
```
mkdir my-chart
cp packages/standalone/dist/jantt.standalone.iife.js packages/core/dist/theme.css my-chart/
```
_Из папки Jantt скопируй скрипт и стили рядом со своей страницей_
```
```
_Вставь в свою страницу в папке my-chart, подставь JSON плана вместо комментария и открой страницу в браузере_
// Вариант B
## React
```
npm install ../Jantt/packages/core ../Jantt/packages/react
```
_В своём проекте поставь пакеты из собранной папки Jantt (путь - где она у тебя лежит)_
```
import { Jantt } from "@jantt/react";
import "@jantt/core/theme.css";
import plan from "./plan.json";
export default function Timeline() {
return ;
}
```
_Компонент: план лежит рядом в plan.json_
// Вариант C
## Next.js
Пакеты ставятся так же, как для React. Разница одна - компонент с графиком клиентский, потому что задачи тянутся мышкой.
```
"use client";
import { Jantt } from "@jantt/react";
import "@jantt/core/theme.css";
import plan from "./plan.json";
export default function Timeline() {
return ;
}
```
_app/timeline.tsx - подключай его на любой странице_
- [ ] Склонировать и собрать Jantt
- [ ] Прогнать npx jantt validate на своём файле
- [ ] Открыть график через npx jantt open и сдвинуть задачу мышкой
- [ ] Встроить график в HTML, React или Next.js
---
// Шаг 3
## Промт: план собирает нейросеть
Нейросеть не пишет интерфейс - она пишет только данные. Вставь промт в ChatGPT, Claude или своего агента, опиши проект в одной строке - и получишь готовый JSON.
```
Ты - планировщик проектов. Верни ТОЛЬКО валидный JSON для Jantt, без markdown и пояснений.
Проект: <опиши проект, команду и дедлайн>
Правила:
1. Корень: "meta" (title, start, end, scale: "day" | "week" | "month", linkRouting: "orthogonal", showCriticalPath: true), "categories", "tasks".
2. Даты - строго YYYY-MM-DD, end не раньше start.
3. "category" каждой задачи совпадает с ключом из "categories" (у категории есть label и color в HEX).
4. У каждой задачи: id, label, category, start, end. По желанию: dependsOn, progress, milestone, locked, assignee, status.
5. dependsOn - один id, массив id или null. Все id существуют, циклов нет. Задача начинается не раньше конца предыдущей (плюс gapDays, если указан).
6. Веха - "milestone": true и одинаковые start и end.
7. progress - дробь от 0.0 до 1.0. status - not-started | in-progress | submitted | completed | blocked.
8. Жёсткие дедлайны и контрольные точки - "locked": true.
9. Никаких внутренних ID баз, токенов и персональных данных - только @username в assignee.
```
_Системный промт для агента_
- 1 «Опиши проект» — Что делаешь, кто в команде, к какой дате нужно успеть.
- 2 «Получи JSON» — Нейросеть отдаёт только данные плана, без кода.
- 3 «Проверь и открой» — Сохрани ответ в plan.json и из папки Jantt прогони npx jantt validate путь/к/plan.json, потом открой через npx jantt open путь/к/plan.json.
- 4 «Поправь руками» — Сдвигай задачи мышкой - JSON обновится сам, и его можно снова отдать агенту.
врезка `// Совет`: текст «Если валидатор ругается - отдай нейросети текст ошибки и попроси исправить только JSON.»
---
// Итог
## Проверь себя
- [ ] Репозиторий Jantt открыт, песочница работает
- [ ] Свой план описан в JSON: meta, categories, tasks
- [ ] В плане есть зависимости через dependsOn и хотя бы одна веха
- [ ] Критический путь подсвечен через showCriticalPath
- [ ] npx jantt validate проходит без ошибок
- [ ] График встроен в HTML, React или Next.js
- [ ] Нейросеть по промту собрала JSON плана, и он открылся без правок
---
Источник: https://localhost:3000/m/jantt-diagramma-ganta-iz-json-za-minutu