Skip to content

OlexiyOdarchuk/rombik

Repository files navigation

rombik.

Генератор блок-схем онлайн

rombik-engine на npm rombik CLI на npm завантаження CI Nix Build Nix flake
TypeScript Node нуль залежностей тести
мови ДСТУ 19.701-90 MIT npm provenance сайт
зірки Зроблено в Україні

Код → блок-схема за ДСТУ 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("Готово")

Блок-схема функції grade за ДСТУ 19.701-90


Можливості

  • Точні ДСТУ-примітиви — термінатор (овал), процес (прямокутник), розв'язок (ромб), ввід/вивід (паралелограм), початок циклу (шестикутник), підпрограма (прямокутник із боковими рисками).
  • Шість мов: Python, C, C++, Java, C#, Pascal.
    • Pythonif/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++.
    • Javaif/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 => … → окрема схема), тернарний ?: → галуження.
    • Pascalprocedure/function, :=, writeln/readln, if..then..else, for..to/downto..do, while..do, repeat..until, case..of.
  • Межі жанру (однаково для всіх мов): обробка винятків (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 без жодного встановлення.


Бібліотека / скриптинг (rombik-engine)

Чистий 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).

CLI — пакет rombik

Найпростіше — через 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)

Кожен етап — окремий модуль із однією відповідальністю. Ядро (irlayoutdiagram → рендери) не залежить ні від мови, ні від 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.

About

Генератор блок-схем з коду по ДСТУ для академічних, і не тільки, робіт

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors