Jantt: диаграмма Ганта из JSON за минуту

Шаг 0

Что такое Jantt

Jantt - открытый движок таймлайнов: даёшь ему JSON с задачами, сроками и зависимостями, он рисует интерактивный график проекта. Задачи и сроки тянутся мышкой, связи идут стрелками под прямым углом, критический путь подсвечен. Ядро без зависимостей и меньше 14 КБ в сжатом виде, а нейросеть пишет такой план примерно в 10 раз меньшим числом токенов, чем интерфейс на JSX. Лицензия MIT.

Репозиторий Jantt на GitHub

Живая песочница 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 }
  ]
}

Рабочий шаблон: три задачи с зависимостями и веха. Скопируй и меняй под себя

Полная шпаргалка по JSON-схеме

• Скопировать шаблон и вставить в песочницу
• Поменять названия и даты задач под свой проект
• Связать задачи через dependsOn и добавить хотя бы одну веху
• Включить showCriticalPath и найти подсвеченную цепочку

Шаг 2

Запуск у себя

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 скопируй скрипт и стили рядом со своей страницей

<link rel="stylesheet" href="theme.css" />
<div id="chart" style="height: 600px"></div>
<script src="jantt.standalone.iife.js"></script>
<script>
  const plan = /* вставь сюда JSON плана целиком */;
  Jantt.mount("#chart", plan, { theme: "swiss-dark" });
</script>

Вставь в свою страницу в папке 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 <Jantt data={plan} theme="swiss-dark" />;
}

Компонент: план лежит рядом в 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 <Jantt data={plan} theme="swiss-dark" />;
}

app/timeline.tsx - подключай его на любой странице

• Склонировать и собрать Jantt
• Прогнать npx jantt validate на своём файле
• Открыть график через npx jantt open и сдвинуть задачу мышкой
• Встроить график в HTML, React или Next.js

Шаг 3

Нейросеть не пишет интерфейс - она пишет только данные. Вставь промт в ChatGPT, Claude или своего агента, опиши проект в одной строке - и получишь готовый JSON.

Системный промт для агента

Итог

Проверь себя

• Репозиторий Jantt открыт, песочница работает
• Свой план описан в JSON: meta, categories, tasks
• В плане есть зависимости через dependsOn и хотя бы одна веха
• Критический путь подсвечен через showCriticalPath
• npx jantt validate проходит без ошибок
• График встроен в HTML, React или Next.js
• Нейросеть по промту собрала JSON плана, и он открылся без правок