W dzisiejszym dynamicznie rozwijającym się świecie technologii, tworzenie diagramów architektury oprogramowania stało się nieodzownym elementem pracy deweloperów. Wraz z rozwojem technologii sztucznej inteligencji, proces ten staje się coraz prostszy. Narzędzia takie jak ChatGPT oraz Claude oferują nowe, innowacyjne podejścia do tworzenia diagramów za pomocą modeli językowych, co pozwala na jeszcze bardziej intuicyjne i efektywne projektowanie.
Pierwsze podejście: ASCII Art
Pierwszym krokiem w próbie utworzenia diagramu była próba wykorzystania ASCII Art. Claude, bazując na kodzie JavaScript rozszerzenia przeglądarki, wygenerował surowy diagram w formie ASCII, który choć był użyteczny, zawierał pewne niedociągnięcia. Wersja ta zilustrowała przepływy danych, ale wymagała dalszego dopracowania.
Zmiana między wersją V2 a V3 manifestu rozszerzenia polegała głównie na tym, że w V3 przetwarzanie DOM zostało przeniesione z tła (background script) do skryptu zawartości (content script). Wymagało to rozdzielenia uprawnień oraz wprowadzenia komunikacji opartej na obietnicach (promises).
Mimo że do naprawienia diagramu ASCII można było użyć edycji ręcznej, zdecydowanie lepszym rozwiązaniem było znalezienie bardziej zaawansowanego narzędzia.
Drugie podejście: Narzędzie Whimsical
Kolejnym krokiem było skorzystanie z narzędzia Whimsical, które jest jednym z polecanych narzędzi dostępnych na platformie ChatGPT. Po wprowadzeniu kodu JavaScript oraz wklejeniu obrazka z diagramem ASCII, Whimsical wygenerował ulepszony diagram. Było to zdecydowanie lepsze rozwiązanie, choć brakowało możliwości eksportu diagramu do standardowych formatów, co ograniczało dalszą edycję w innych narzędziach.
Trzecie podejście: Mermaid Live
Kolejną próbą było wykorzystanie języka opisu diagramów Mermaid. Narzędzie to, popularne wśród deweloperów, pozwala na tworzenie diagramów za pomocą prostego języka opisu. Claude wygenerował diagram w formacie Mermaid, co pozwoliło na dalszą edycję i renderowanie w środowisku Mermaid Live.
Mermaid umożliwia tworzenie tzw. „diagramów sekwencji”, które świetnie nadają się do przedstawiania przepływu danych w architekturze oprogramowania.
Czwarte podejście: Powrót do Claude
Claude zasugerował parę pomysłów na ulepszenie diagramu, takich jak dodanie adnotacji („Note over”) oraz tzw. „self-messaging”, czyli komunikacji wewnętrznej w diagramie. W ostateczności, zastosowanie tej drugiej metody okazało się bardziej intuicyjne i czytelne. To pokazuje, jak interaktywna praca z AI może prowadzić do stopniowego udoskonalania projektu.
Piąte podejście: ChatGPT i udoskonalenia
ChatGPT, po zapoznaniu się z kodem Mermaid, zasugerował dalsze poprawki, jak np. dodanie warunkowych bloków alternatywnych („alt”). Ten tryb diagramu ilustruje różne ścieżki przepływu zależne od stanu załadowania strony, co jest istotne dla pełnego zrozumienia działania rozszerzenia.
Finalny rezultat na GitHub
Ostateczny diagram został dodany do pliku README projektu na GitHubie. Mermaid okazał się doskonałym narzędziem do tego zadania, szczególnie dzięki możliwości renderowania diagramów bezpośrednio w dokumentach Markdown na GitHubie. Proces tworzenia diagramu, choć wieloetapowy, był owocny, a wykorzystanie nowych narzędzi i technik pozwoliło na lepszą wizualizację i zrozumienie działania rozszerzenia.
Użyteczność: Mermaid vs. Graphviz
Na koniec, analizując różnice między narzędziami Mermaid i Graphviz, okazało się, że sekwencyjne diagramy najlepiej sprawdzają się w formacie Mermaid, natomiast Graphviz nie radzi sobie równie dobrze z tego typu zadaniami. Dzięki interakcji między Claude’m a ChatGPT, powstała bardziej wyrafinowana wersja diagramu, która uwzględniała zalety obu formatów.
Podsumowanie
Cały proces tworzenia diagramu z pomocą narzędzi AI, takich jak ChatGPT i Claude, pokazuje, jak AI może wspierać deweloperów w ich codziennej pracy. Od prostych diagramów ASCII po bardziej złożone wizualizacje w Mermaid, AI może pomóc w szybszym i bardziej efektywnym tworzeniu dokumentacji technicznej. Co więcej, zastosowanie narzędzi takich jak ChatGPT i Claude nie tylko przyspiesza proces, ale również uczy deweloperów nowych technik, które mogą być przydatne w przyszłych projektach.
