Код → блок-схема за ДСТУ 19.701-90 (SVG / PNG / PDF / Typst / Excalidraw).
rombik перетворює код на Python, C, C++, Java, C# та Pascal на акуратну блок-схему алгоритму
(ГОСТ/ДСТУ 19.701-90 — той самий стандарт, що вимагають у курсових і лабораторних).
Працює повністю у браузері, без сервера: код нікуди не надсилається. Рушій —
чистий TypeScript (rombik-engine), тож тим самим кодом можна користуватись
і в Node-скриптах.
def grade(score):
name = input("Ваше ім'я: ")
print("Привіт,", name)
total = score + 5
if total >= 90:
print("Відмінно")
else:
if total >= 60:
print("Задовільно")
else:
print("Незадовільно")
print("Готово")- Точні ДСТУ-примітиви — термінатор (овал), процес (прямокутник), розв'язок (ромб), ввід/вивід (паралелограм), початок циклу (шестикутник), підпрограма (прямокутник із боковими рисками).
- Шість мов: Python, C, C++, Java, C#, Pascal.
- Python —
if/elif/else,match/case,try/except/finally,with,for ... in range,while,for/else,while/else, ідіомаwhile True: … break(післяумова),break/continue/return/raise, list/set/dict‑comprehension → цикл, методи й вкладені класи (Клас.метод), декоратори, лямбди (name = lambda …→ окрема схема), тернарнийa if c else b→ галуження. - C / C++ —
if/else,switch(усіcase+default, fallthrough → умова через||),for(класичний і range‑based),while,do/while,break/continue, рекурсія,cin/coutіprintf/scanf(ввід/вивід),try/catch, методи класів (Клас::метод), оператори, namespace, шаблони, лямбди (auto f = [](){…}→ окрема схема), тернарний?:→ галуження. C — підмножина C++. - Java —
if/else,switch(case/default, fallthrough →||, arrow і colon),for, for‑each (for (T x : c)),while,do/while,break/continue/return/throw, рекурсія,Scanner.nextX()/System.out.print*(ввід/вивід), методи й конструктори класів (Клас.метод),try(тіло), лямбди (f = (x) -> …→ окрема схема),coll.forEach(x -> …)→ цикл, тернарний?:→ галуження. - C# —
if/else,switch(case/default, fallthrough →||),for(лічильник за ДСТУ), foreach (foreach (var x in c)),while,do/while,break/continue/return/throw, рекурсія,Console.Write*/Console.ReadLine()(ввід/вивід, зокрема загорнуте вConvert/int.Parse), методи й конструктори класів (Клас.метод), arrow-методи (=> вираз),try(тіло), лямбди (f = x => …→ окрема схема), тернарний?:→ галуження. - Pascal —
procedure/function,:=,writeln/readln,if..then..else,for..to/downto..do,while..do,repeat..until,case..of.
- Python —
- Межі жанру (однаково для всіх мов): обробка винятків (
try/catch/finally), стріми та міткованіbreak/continueне розкладаються детально; інлайн-анонімні лямбди (map(lambda…),std::sort(…, [](){})) лишаються в тексті рядка — блок-схема за ДСТУ описує структурний потік керування, а не кожну мовну конструкцію. - Кожна функція — окрема схема. Параметри функції малюються вхідним паралелограмом.
- Підпис «Рисунок N» — конфігуроване слово/шаблон/нумерація (за ДСТУ); шрифт Times New Roman 14.
- Налаштування під вимоги викладача — слова вводу/виводу, підписи гілок, один спільний «Кінець» чи окремий на кожен вихід, зняття тип-анотацій тощо.
- П'ять форматів виводу — SVG, PNG і PDF (браузерний canvas),
Typst (CeTZ — для вставки в курсову; є фрагмент-режим), Excalidraw (
.excalidraw— доредагувати на excalidraw.com). «Завантажити всі» — у будь-якому форматі. - Візуальний редактор (у браузері) — безмежне полотно з пан/зумом, перетягування блоків, редаговані стрілки, правка тексту/підписів, конектори, undo/redo. Ручне ділення: виділяєш блоки рамкою-ласо (Shift+тяг) чи Shift-кліком → «⊞ Окрема схема» виносить їх у свою схему (рамкою), «⊟ Об'єднати» — зливає схеми назад. Крос-групові стрілки самі стають парами конекторів. «Редагувати всі» — усі функції на одному полотні.
- Без бекенду — SvelteKit + Tree-sitter (WASM-граматики) + TS-рушій. Синтаксичні помилки показуються по-людськи, а не призводять до падіння.
Публічний репозиторій — це рушій (rombik-engine) + CLI (rombik). Веб-застосунок
(SvelteKit-редактор на rombik.ishawyha.dev) живе окремо.
Потрібен лише Node 22+ (npm-workspaces):
npm install # залежності рушія + CLI
npm test # тести рушія (golden-парність)
npm run build:cli # standalone CLI → dist/rombik.mjs (+ wasm поруч)Nix: nix develop дає готове середовище (Node 22 + rsvg-convert для PNG/PDF), а
nix run github:OlexiyOdarchuk/rombik -- file.py запускає CLI без жодного встановлення.
Чистий TS, без DOM/фреймворку — працює у браузері, Node, будь-де. Парсинг дає tree-sitter (Tree), далі все в рушії:
import { fromTree, renderSvg, splitFromAst } from 'rombik-engine';
// tree — результат web-tree-sitter (Python/C/C++/Java/C#/Pascal)
const figs = fromTree(tree, 'python', { singleEnd: true });
for (const f of figs) writeFileSync(`${f.name}.svg`, renderSvg(f.diagram));Інші точки входу: fromAst(astJSON, opts) (готовий AST-JSON), parseTree(tree, lang)
(tree → AST-JSON), renderTypst / renderExcalidraw, splitFromAst(ast, opts, name, maxH).
PNG/PDF — растеризація SVG (у CLI зовнішнім конвертером, на сайті — браузерним canvas).
Найпростіше — через npm (потрібен лише Node 22+):
npx rombik examples/grade.py -o grade.svg # без встановлення
npm i -g rombik && rombik prog.cpp -t typ # глобальноЧерез Nix (без Node, без npm install — Nix сам збере все в ізоляції):
# Запустити прямо з репозиторію, нічого не клонуючи й не встановлюючи:
nix run github:OlexiyOdarchuk/rombik -- examples/grade.py -o grade.svg
cat prog.py | nix run github:OlexiyOdarchuk/rombik -- - -t json
# Поставити CLI у профіль (з'явиться команда `rombik`):
nix profile install github:OlexiyOdarchuk/rombik
# Зібрати локально (результат → ./result/bin/rombik):
nix build github:OlexiyOdarchuk/rombikАбо зібрати standalone-копію вручну (бандл рушія + tree-sitter в один файл, без
node_modules і TS-флагів — просто node):
npm run build:cli # → dist/rombik.mjs (+ wasm поруч)
node dist/rombik.mjs examples/grade.py -o grade.svg
./dist/rombik.mjs prog.cpp -t typ > prog.typ # shebang; з будь-якої теки
cat prog.py | ./dist/rombik.mjs - -t json # stdin → JSON-геометрія
# PNG / PDF — растеризуй SVG зовнішнім конвертером (rsvg-convert / cairosvg / inkscape):
./dist/rombik.mjs grade.py | rsvg-convert -f pdf -o grade.pdf
./dist/rombik.mjs grade.py | rsvg-convert -f png -o grade.pngПапку
dist/(скрипт + 4 wasm, ~4 МБ) можна скопіювати куди завгодно — працює з чистим Node 22+, нічого не встановлюючи. Для dev без бандла:npm run cli -- file.py.
Опції: -o/--out, -t/--format svg|typ|json|excalidraw, -l/--lang py|cpp|c|pas, --fn NAME,
--single-end, --split N. -h — повна довідка. PNG/PDF у CLI немає (потрібен
браузерний canvas) — растеризуй SVG зовнішнім тулом, як вище; на сайті ж PNG/PDF є.
код (Python / C / C++ / Java / C# / Pascal)
│ tree-sitter (WASM-граматика) ← єдиний парсер: браузер і Node
▼
Tree → parser/treesitter → AST-JSON (мова-агностик контракт)
▼
astjson → IR (логічне дерево алгоритму, без геометрії)
│ layout (рекурсивна розкладка, шинна маршрутизація поворотів/виходів)
▼
Diagram (фігури з координатами + ребра-ламані + підпис)
│
├─ render/svg → SVG ├─ render/excalidraw → .excalidraw
├─ render/typst → Typst └─ (веб) SVG → canvas → PNG / PDF (jsPDF)
Кожен етап — окремий модуль із однією відповідальністю. Ядро (ir → layout →
diagram → рендери) не залежить ні від мови, ні від DOM, ні від формату.
packages/engine/ rombik-engine — TS-рушій (без DOM/фреймворку)
src/
parser/treesitter tree-sitter → AST-JSON (Python/C/C++/Java/C#/Pascal)
astjson · ir AST-JSON → IR (логічне дерево)
layout/ розкладка IR → геометрія (серце проєкту)
diagram модель геометрії + підпис
render/{svg,typst,excalidraw}
build fromAst / fromTree / splitFromAst (оркестрація)
test/ golden-парність (node:test): corpus + заморожені еталони
packages/cli/ rombik — standalone CLI (бандл рушія + tree-sitter-граматики)
grammars/ tree-sitter *.wasm (Python/C/C++/Java/C#/Pascal)
examples/ приклади коду
npm test # тести рушія (golden-парність, node:test)
npm run typecheck # tsc --noEmit (strict)
npm run build:cli # standalone CLI → dist/rombik.mjsІнваріант якості: кожен модуль рушія стереже
packages/engine/test/golden— заморожені байт-у-байт еталони (історично зняті з Go-рушія, з якого проєкт мігрував).
- Рушій (
rombik-engine): нуль рантайм-залежностей (чистий TS). Тести —web-tree-sitter(граматики) + вбудованийnode:test. - Веб: SvelteKit (Svelte 5) + Tailwind v4, CodeMirror,
web-tree-sitter,jspdf.