Piękne diagramy bez Figma i ciężkich edytorów

Za każdym razem, gdy musisz narysować architekturę aplikacji lub sekwencję wywołań API, napotykasz ten sam problem. Możesz pójść do Figma i spędzić pół godziny na dostosowywaniu zaokrąglonych rogów, czcionek i odpowiednich odcieni szarości. Albo możesz poprosić Claude'a lub ChatGPT o wygenerowanie kodu Mermaid, ale skończysz ze standardowym diagramem z krzykliwymi kolorami i dziwnym układem.

Autorka repozytorium diagram-design, Katherine Lavery, napotkała tę rutynę podczas prowadzenia własnego bloga. Zamiast za każdym razem ręcznie przesuwać piksele, stworzyła zestaw instrukcji dla Claude Code, Pi i Codex. Projekt zamienia LLM w schludnego składacza, który generuje samodzielne pliki HTML i SVG bez bibliotek zewnętrznych, JavaScript czy ciężkich buildów.

Dlaczego warto zmienić podejście do generowania diagramów

Główna idea projektu to ścisłe zasady projektowe. Zwykły prompt tworzy chaotyczne bloki. Zestaw diagram-design reguł zmusza model do przestrzegania siatki z wielokrotnościami 4 pikseli, kontrolowania gęstości elementów i używania koloru akcentu tylko dla 1–2 głównych węzłów.

Nie musisz uczyć się nowych DSL ani rozgryzać składni. Prosisz agenta o pokazanie architektury serwisu, a on wyświetla gotowy plik HTML z osadzonym SVG. Możesz otworzyć go bezpośrednio w przeglądarce, wkleić do artykułu lub zaimportować do prezentacji.

Cztery główne funkcje narzędzia

Pierwsza funkcja to automatyczne wdrożenie marki. Dajesz agentowi polecenie z linkiem do swojej strony. Skrypt pobiera stronę główną, parsuje style, znajduje kolory tła, tekstu i akcentu, a następnie odczytuje czcionki. Przed zapisaniem ustawień narzędzie automatycznie sprawdza kontrast pod kątem standardu WCAG AA. Jeśli kolor tekstu jest trudny do odczytania na wybranym tle, system zaproponuje dostosowaną paletę.

Druga funkcja to przerysowywanie istniejących diagramów. Jeśli masz pliki .drawio, .mmd lub diagramy Mermaid bezpośrednio w Markdown, wysyłasz je do agenta. Narzędzie przerabia diagram na określony format i odbiorcę:

• Zmiany formatu na podstawie zadania: SVG dla Figma, PNG dla slajdów lub HTML dla stron internetowych.
• Rozmiar dostosowuje się do medium: od wąskiej ilustracji w dokumentacji do formatu 16:9 dla prezentacji.
• Poziom szczegółów kontroluje liczbę węzłów: oryginalny diagram z 20 blokami może zostać automatycznie zredukowany do 7 głównych elementów.
• Złożoność sformułowań dostosowuje się do czytelnika: terminy techniczne jak Auth Service / JWT RS256 są przemianowywane na coś zrozumiałego dla menedżerów, jak Sign-in.

Trzecia funkcja to wsparcie dla 27 typów wizualizacji. Galeria zawiera wszystko: diagramy architektoniczne, diagramy ER, diagramy sekwencji, oś czasu, macierze 2x2 i lejki.

Czwarta funkcja to wbudowana dostępność. Wygenerowane pliki SVG zawierają tagi role="img", prawidłowe atrybuty aria-labelledby i unikalne prefiksy identyfikatorów. Wiele takich SVG można bezpiecznie osadzać na jednej stronie bez konfliktów w DOM.

Przykłady dostępnych typów wizualizacji

Każdy z 27 typów diagramów występuje w trzech wariantach stylu: jasny minimalistyczny, ciemny minimalistyczny i pełny edytorski z kartami opisowymi.

Architektura Komponenty + połączenia	Schemat blokowy Logika decyzyjna	Sekwencja Wiadomości w czasie
Maszyna stanów Stany + przejścia	ER / model danych Encje + pola	Oś czasu Zdarzenia na osi
Pasy funkcyjne Przepływ międzyfunkcyjny	Kwadrant Pozycjonowanie na dwóch osiach	Zagnieżdżony Hierarchia przez zawieranie
Drzewo Rodzic → dzieci	Schemat organizacyjny Własność + routing	Venn Nakładanie się zbiorów
Stos warstw Ułożone abstrakcje	Piramida / lejek Uporządkowana hierarchia lub spadek	Consultant 2×2 Macierz scenariuszy · nazwane komórki
Radar / Pająk Porównanie wieloosiowe	Pętla Koło zamachowe · stacje wokół centrum	IT obecny stan Legacy landscape · modernizacja
Wysokopoziomowy End-to-end stack na klastrze	Wykres słupkowy Porównanie kategorii	Wykres liniowy Trend w czasie
Gantt Zadania i fazy na osi czasu	Wykres rozproszenia Rozkład i korelacja	Proces Wielopodmiotowy sekwencyjny przepływ pracy
Medalion Wielowarstwowe przechowywanie danych	Przepływ danych Kroki potoku z zakresem roli	Integracja DP Źródła → rdzeń → konsumenci
Macierz bezpieczeństwa DP Uprawnienia dostępu na rolę

Jak działa architektura skillu

Projekt wykorzystuje zasadę „progresywnego ujawniania kontekstu". Plik SKILL.md służy tylko jako spis treści. Gdy prosisz o narysowanie schematu blokowego, AI ładuje plik type-flowchart.md bez czytania opisów pozostałych 26 typów diagramów.

To zapobiega zaśmiecaniu kontekstu roboczego agenta niepotrzebnymi informacjami. Odpowiedzi są generowane szybciej, a model nie jest mylony regułami markupu dla innych typów diagramów.

Struktura repozytorium jest logicznie zorganizowana:

• Folder references/ zawiera opisy każdego typu diagramu, przewodniki stylu i specyficzne prymitywy.
• Folder scripts/ zawiera parsery Python do wyodrębniania struktury z plików .drawio i Mermaid.
• Folder assets/ zawiera wygenerowaną stronę galerii, gdzie możesz zobaczyć działające przykłady.

Instalacja i praktyczne zastosowanie

Aby rozpocząć, potrzebujesz jednego z obsługiwanych asystentów AI.

W Claude Code wtyczka łączy się za pomocą tych poleceń:

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

W Pi instalacja jest jeszcze prostsza:

pi install https://github.com/cathrynlavery/diagram-design

Po instalacji możesz formułować zadania zwykłym językiem konwersacyjnym:

"Сделай архитектурную диаграмму приложения: фронтенд, бэкенд, база данных Postgres и кэш Redis."
"Нарисуй последовательность авторизации с обновлением токена при ошибке 401."
"Перерисуй схему из файла platform.drawio для презентации инвесторам, оставь только 6 главных блоков."

Eksportowanie gotowych wersji odbywa się za pomocą standardowego wywołania:

/diagram-design:export path/to/diagram.html --png-only --scale=3

Skrypt uruchamia Headless Chromium przez Playwright i tworzy czysty render bez dodatkowych elementów stylu.

Kto znajdzie ten projekt przydatny

Repozytorium to świetny pomocnik dla programistów, twórców dokumentacji technicznej i założycieli startupów. Jeśli często piszesz artykuły, przygotowujesz slajdy lub aktualizujesz dokumentację w repozytorium, projekt zaoszczędzi ci godzin ręcznej pracy.

Jednak autorka od razu określa ograniczenia. Nie używaj narzędzia do tworzenia zwykłych list, tabel porównawczych przed/po ani diagramów jednoblokowych. W takich zadaniach standardowy tekst lub tabela w Markdown sprawdzą się szybciej i wyraźniej.