Нещодавно мені було лінь візуалізувати схему перелінковки сайту. Якщо попросити це зробити ШІ, він напише код на Python, згенерує схему і видасть картинку, яку потім буде складно (або неможливо) відредагувати і повноцінно використовувати. Genspark теж може видати цікавий результат, але його також буде неможливо відредагувати.
Трохи подумавши, я знайшов рішення: використовувати XML-схеми і app.diagrams.net. Це безкоштовний інструмент (або сервіс) для створення діаграм і блок-схем, в який можна швидко імпортувати XML-схему, згенеровану ШІ.
Принцип роботи:
- Генеруємо xml (промпт буде далі) у chatgpt, Клоді чи деінде.
- Вставляємо у diagrams (просто перетягуємо xml-файл).
- Насолоджуємося.
Я дам тобі завдання на візуалізацію чогось у діаграмі. А твоє завдання — розробити код для цього.
Розроби XML-схему для diagrams.net (draw.io) для візуалізації [опис того, що потрібно візуалізувати, наприклад, «взаємозв’язки елементів і сторінок на сайті»].
Вимоги до XML-схеми:
Повна структура файлу:
XML повинен починатися з <?xml version=”1.0″ encoding=”UTF-8″?>.
Кореневим елементом повинен бути <mxfile host=”app.diagrams.net” agent=”[актуальний user agent, наприклад, Mozilla/5.0 …]” version=”[актуальна версія, наприклад, 27.0.4]”>.
Всередині <mxfile> повинен бути елемент <diagram id=”[унікальний ID діаграми]” name=”[назва діаграми]”>.
Основна модель графа повинна знаходитися всередині <mxGraphModel dx=”[значення]” dy=”[значення]” grid=”1″ gridSize=”10″ guides=”1″ tooltips=”1″ connect=”1″ arrows=”1″ fold=”1″ page=”1″ pageScale=”1″ pageWidth=”[ширина сторінки, наприклад, 4681 для A1 альбомної]” pageHeight=”[висота сторінки, наприклад, 3311 для A1 альбомної]” background=”#ffffff” math=”0″ shadow=”0″>.
Всередині <mxGraphModel> повинен бути елемент <root>, що містить всі комірки (<mxCell>).
Перші дві комірки в <root> повинні бути <mxCell id=”0″/> і <mxCell id=”1″ parent=”0″/>.
Визначення елементів (вершин – vertex=”1″):
Кожен логічний елемент на схемі (наприклад, сторінка сайту, блок) повинен бути представлений як <mxCell id=”[унікальний ID елемента]” value=”[HTML-форматований опис елемента]” style=”[стилі елемента, наприклад, rounded=1;whiteSpace=wrap;html=1; fillColor=#dae8fc;strokeColor=#6c8ebf;…]” vertex=”1″ parent=”1″>.
Всередині <mxCell> для вершини має бути <mxGeometry x=”[координата]” y=”[координата]” width=”[ширина]” height=”[висота]” as=”geometry”/>.
Використовуй HTML-теги (<br>, <b>, <hr> тощо) для форматування тексту всередині value елементів. Переконайся, що всі HTML-спецсимволи коректно екрановані (наприклад, < як <, > як >).
Визначення зв’язків (ребер – edge=”1″):
Кожен зв’язок між елементами повинен бути представлений як <mxCell id=”[унікальний ID зв’язку]” value=”[опціональна назва зв’язку]” style=”[стилі зв’язку, наприклад, edgeStyle=orthogonalEdgeStyle;rounded=0; orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeWidth=1;…]” edge=”1″ parent=”1″ source=”[ID вихідного елемента]” target=”[ID цільового елемента]”>.
Стилі для зв’язків повинні бути вказані інлайн в атрибуті style, а не через окремі блоки <style>.
Для двонаправлених зв’язків додай startArrow=classic;startFill=1; в стиль.
Всередині <mxCell> для ребра повинно бути <mxGeometry relative=”1″ as=”geometry”/>.
Для управління маршрутизацією ліній можна використовувати <Array as=”points”><mxPoint x=”…” y=”…”/><mxPoint x=”…” y=”…”/></Array> всередині <mxGeometry> ребра.
Загальні вказівки:
Використовуйте весь доступний обсяг робочої області (наприклад, A1 в альбомному форматі: pageWidth=”4681″ pageHeight=”3311″).
Не розташовуйте елементи занадто близько один до одного.
Забезпечте чіткість і читабельність схеми.
Надайте повний, готовий до вставки XML-код.
Всі текстові описи всередині блоків і на зв’язках повинні бути [УКРАЇНСЬКОЮ – або вказати іншу] мовою, якщо не вказано інше.
Приклад структури комірки для ребра (зв’язку):
<mxCell value=”Назва зв’язку (якщо є)” style=”edgeStyle=orthogonalEdgeStyle;rounded=0; orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeWidth=1;fontSize=10;align=center;verticalAlign=middle;” edge=”1″ parent=”1″ source=”id_елемента_джерела” target=”id_елемента_призначення”>
<mxGeometry relative=”1″ as=”geometry”>
</mxGeometry>
</mxCell>
Будь ласка, згенеруйте XML-код, суворо дотримуючись цих вказівок.