![\"Czteroetapowy](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd7d64dbf5.png\")
<\/p>\nCzat AI Visual Paradigm umo\u017cliwia tworzenie diagramu kontekstowego systemu C4 na podstawie opisu w j\u0119zyku naturalnym aplikacji, jej u\u017cytkownik\u00f3w oraz zewn\u0119trznych system\u00f3w, z kt\u00f3rymi ona wsp\u00f3\u0142pracuje. Jednak diagram wygenerowany przez AI jest najbardziej przydatny, gdy pozostaje edytowalny i \u0142atwy do utrzymania po wygenerowaniu.<\/p>\n
Ten przewodnik przedstawia pe\u0142ny proces od pocz\u0105tku do ko\u0144ca generowania diagramu kontekstowego platformy dostaw \u017cywno\u015bci przy u\u017cyciu C4-PlantUML. Nauczysz si\u0119, jak przej\u015b\u0107 od diagramu wygenerowanego przez AI do edytowalnego kodu PlantUML, udoskonali\u0107 model w VPasCode i kontynuowa\u0107 jego edycj\u0119 wizualnie w Visual Paradigm Online. Podej\u015bcie to \u0142\u0105czy szybko\u015b\u0107 modelowania wspieranego przez AI z elastyczno\u015bci\u0105 diagramu jako kodu oraz wygod\u0105 graficznego edytora diagram\u00f3w.<\/p>\n
<\/p>\n
Visual Paradigm oferuje praktyczny proces przekszta\u0142cania opisu architektury w j\u0119zyku naturalnym w edytowalny diagram kontekstowy C4:<\/p>\n
Opisz system w czacie AI Visual Paradigm.<\/p>\n
![\"Bot](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd32cad84d.png\")
<\/p>\n<\/li>\n
Wygeneruj i sprawd\u017a diagram kontekstowy systemu C4.<\/p>\n<\/li>\n
Otw\u00f3rz wynik w VPasCode jako C4-PlantUML.<\/p>\n
![\"Bot](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd349bc71b.png\")
<\/p>\n<\/li>\n
Zmie\u0144 diagram, edytuj\u0105c kod PlantUML.<\/p>\n
![\"Interfejs](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd35c46b64.png\")
<\/p>\n<\/li>\n
Opcjonalnie wy\u015blij wynik do Visual Paradigm Online.<\/p>\n
![\"Interfejs](\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/09\/img_6aacd36bb1156.png\")
<\/p>\n<\/li>\n
Zmie\u0144 diagram wizualnie za pomoc\u0105 edytora diagram\u00f3w typu przeci\u0105gnij i upu\u015b\u0107.<\/p>\n<\/li>\n<\/ol>\n
Daje to dwie \u015bcie\u017cki edycji:<\/p>\n
Edycja oparta na kodzie:<\/strong> VPasCode i C4-PlantUML<\/p>\n<\/li>\n Edycja oparta na interfejsie graficznym (GUI):<\/strong> Edytor diagram\u00f3w Visual Paradigm Online<\/p>\n<\/li>\n<\/ul>\n Czat AI Visual Paradigm obs\u0142uguje diagramy kontekstu systemu, kontenera, komponentu i wdro\u017cenia C4. Mo\u017ce r\u00f3wnie\u017c udoskonala\u0107 wygenerowany diagram za pomoc\u0105 polece\u0144 w j\u0119zyku naturalnym, takich jak dodawanie, usuwanie, zmiana nazw lub ponowne \u0142\u0105czenie element\u00f3w.<\/p>\n Diagram kontekstowy C4 to widok najwy\u017cszego poziomu systemu oprogramowania. Pokazuje:<\/p>\n Systemsystem zainteresowania<\/strong><\/p>\n<\/li>\n Ludzie u\u017cytkownicy oraz aktorzy organizacyjni<\/p>\n<\/li>\n Zewn\u0119trzne systemy oprogramowania<\/p>\n<\/li>\n Wa\u017cne relacje mi\u0119dzy tymi elementami<\/p>\n<\/li>\n Kr\u00f3tki opis dzia\u0142ania ka\u017cdej relacji<\/p>\n<\/li>\n<\/ul>\n Zazwyczaj nie pokazuje wewn\u0119trznych us\u0142ug, baz danych, klas, interfejs\u00f3w API ani szczeg\u00f3\u0142\u00f3w infrastruktury. Te elementy nale\u017c\u0105 do diagram\u00f3w C4 ni\u017cszego poziomu.<\/p>\n Na przyk\u0142ad diagram kontekstowy dla internetowej platformy dostaw \u017cywno\u015bci mo\u017ce zawiera\u0107:<\/p>\n Klient<\/p>\n<\/li>\n Kierownik restauracji<\/p>\n<\/li>\n Kierowca dostaw<\/p>\n<\/li>\n Dostawca p\u0142atno\u015bci<\/p>\n<\/li>\n Us\u0142uga mapowania i geolokalizacji<\/p>\n<\/li>\n Us\u0142uga powiadomie\u0144<\/p>\n<\/li>\n Platforma dostaw \u017cywno\u015bci<\/p>\n<\/li>\n<\/ul>\n Centralny system powinien pozosta\u0107 g\u0142\u00f3wnym punktem skupienia wzroku. Osoby zewn\u0119trzne i systemy powinny by\u0107 umieszczone wok\u00f3\u0142 niego.<\/p>\n Jako\u015b\u0107 wygenerowanego diagramu zale\u017cy w du\u017cej mierze od opisu architektury dostarczonego do czatu.<\/p>\n Przydatne polecenie okre\u015bla:<\/p>\n Nazwa systemu<\/p>\n<\/li>\n Cel systemu<\/p>\n<\/li>\n Osoby, kt\u00f3re z niego korzystaj\u0105<\/p>\n<\/li>\n Zewn\u0119trzne systemy, z kt\u00f3rymi si\u0119 komunikuje<\/p>\n<\/li>\n Relacje mi\u0119dzy nimi<\/p>\n<\/li>\n Poziom diagramu C4, jaki jest po\u017c\u0105dany<\/p>\n<\/li>\n Po\u017c\u0105dany format wyj\u015bciowy<\/p>\n<\/li>\n Czego nie nale\u017cy uwzgl\u0119dnia\u0107<\/p>\n<\/li>\n<\/ul>\n Jawne polecenie wykluczenia szczeg\u00f3\u0142\u00f3w wewn\u0119trznych jest wa\u017cne. Bez niego generator AI mo\u017ce wygenerowa\u0107 diagram mieszaj\u0105cy informacje na poziomie kontekstu i poziomie kontenera.<\/p>\n Otw\u00f3rz czat AI Visual Paradigm i rozpocznij now\u0105 rozmow\u0119 lub sesj\u0119 generowania diagramu.<\/p>\n W zale\u017cno\u015bci od interfejsu i wersji subskrypcji czat mo\u017ce oferowa\u0107 selektor typu diagramu. Wybierz:<\/p>\n Model C4<\/strong><\/p>\n<\/li>\n Diagram kontekstu systemu<\/strong><\/p>\n<\/li>\n<\/ul>\n Nast\u0119pnie wprowad\u017a polecenie.<\/p>\n Og\u00f3lny przep\u0142yw pracy czatu Visual Paradigm wygl\u0105da nast\u0119puj\u0105co:<\/p>\n Opisz diagram.<\/p>\n<\/li>\n Pozw\u00f3l AI wygenerowa\u0107 wst\u0119pny model.<\/p>\n<\/li>\n Przejrzyj wynik.<\/p>\n<\/li>\n Ulepsz go za pomoc\u0105 polece\u0144 w j\u0119zyku naturalnym.<\/p>\n<\/li>\n Eksportuj lub kontynuuj edycj\u0119 w innym narz\u0119dziu Visual Paradigm.<\/p>\n<\/li>\n<\/ol>\n Sprawd\u017a, czy diagram zawiera:<\/p>\n R\u00f3wnie dok\u0142adnie jeden system centralny<\/p>\n<\/li>\n Wszyscy wymagani ludzie<\/p>\n<\/li>\n Wszystkie istotne systemy zewn\u0119trzne<\/p>\n<\/li>\n Poprawne kierunki relacji<\/p>\n<\/li>\n Zwi\u0119z\u0142e opisy relacji<\/p>\n<\/li>\n Brak niepotrzebnych us\u0142ug wewn\u0119trznych lub baz danych<\/p>\n<\/li>\n Sp\u00f3jna nazewnictwo<\/p>\n<\/li>\n Czytelny uk\u0142ad<\/p>\n<\/li>\n<\/ul>\n Wygenerowany diagram jest punktem wyj\u015bcia, a nie substytutem przegl\u0105du architektury.<\/p>\n Chatbot mo\u017ce modyfikowa\u0107 diagram, u\u017cywaj\u0105c zwyk\u0142ego j\u0119zyka.<\/p>\n Dokumentacja czatbota AI opisuje to podej\u015bcie iteracyjne, w tym polecenia dodawania bram p\u0142atno\u015bci, zmiany nazw element\u00f3w, modyfikacji relacji oraz refaktoryzacji diagram\u00f3w.<\/p>\n Po wygenerowaniu i dopracowaniu diagramu u\u017cyj akcji oznaczonej podobnie do:<\/p>\n Otw\u00f3rz w VPasCode<\/strong><\/p>\n<\/li>\n Edytuj w VPasCode<\/strong><\/p>\n<\/li>\n Otw\u00f3rz kod<\/strong><\/p>\n<\/li>\n Generuj kod do edycji<\/strong><\/p>\n<\/li>\n<\/ul>\n Dok\u0142adna etykieta przycisku mo\u017ce si\u0119 r\u00f3\u017cni\u0107 w zale\u017cno\u015bci od aktualnego interfejsu.<\/p>\n To przenosi kod diagramu do VPasCode, gdzie mo\u017cesz edytowa\u0107 diagram jako tekst, jednocze\u015bnie przegl\u0105daj\u0105c podgl\u0105d renderowany na \u017cywo. Visual Paradigm opisuje VPasCode jako przegl\u0105darkowy edytor diagram\u00f3w typu \u201ediagram jako kod\u201d, obs\u0142uguj\u0105cy PlantUML, modele C4, Mermaid, Graphviz i inne formaty sk\u0142adni.<\/p>\n Wygenerowany kod powinien u\u017cywa\u0107 C4-PlantUML, zazwyczaj z:<\/p>\n1. Zrozumienie diagramu kontekstowego C4<\/h2>\n
\n
\n
2. Przygotuj dobre polecenie dla sztucznej inteligencji<\/h2>\n
\n
Przyk\u0142adowe polecenie<\/h3>\n
Stw\u00f3rz diagram kontekstu systemu C4 dla internetowej platformy dostaw \u017cywno\u015bci.\n\nSystem zainteresowania:\nPlatforma dostaw \u017cywno\u015bci \u2014 umo\u017cliwia klientom przegl\u0105danie restauracji, sk\u0142adanie zam\u00f3wie\u0144, dokonywanie p\u0142atno\u015bci i \u015bledzenie dostaw.\n\nOsoby:\n1. Klient \u2014 przegl\u0105da restauracje, sk\u0142ada zam\u00f3wienia, p\u0142aci i \u015bledzi dostawy.\n2. Menad\u017cer restauracji \u2014 zarz\u0105dza menu, przyjmuje zam\u00f3wienia i aktualizuje status zam\u00f3wienia.\n3. Kierowca dostawczy \u2014 przyjmuje zlecenia dostaw i aktualizuje post\u0119py dostaw.\n4. Administrator operacyjny \u2014 monitoruje aktywno\u015b\u0107 platformy i rozwi\u0105zuje problemy z obs\u0142ug\u0105 klienta.\n\nZewn\u0119trzne systemy:\n1. Dostawca p\u0142atno\u015bci \u2014 autoryzuje i pobiera p\u0142atno\u015bci klient\u00f3w.\n2. Us\u0142uga mapowania i geolokalizacji \u2014 dostarcza adresy, trasy i lokalizacje dostaw.\n3. Us\u0142uga powiadomie\u0144 \u2014 wysy\u0142a wiadomo\u015bci e-mail, SMS i powiadomienia push.\n\nRelacje:\n- Klient korzysta z Platformy dostaw \u017cywno\u015bci, aby przegl\u0105da\u0107 restauracje, sk\u0142ada\u0107 zam\u00f3wienia, dokonywa\u0107 p\u0142atno\u015bci i \u015bledzi\u0107 dostawy.\n- Menad\u017cer restauracji korzysta z Platformy dostaw \u017cywno\u015bci, aby zarz\u0105dza\u0107 menu i przetwarza\u0107 zam\u00f3wienia.\n- Kierowca dostawczy korzysta z Platformy dostaw \u017cywno\u015bci, aby otrzymywa\u0107 zlecenia dostaw i aktualizowa\u0107 status dostaw.\n- Administrator operacyjny korzysta z Platformy dostaw \u017cywno\u015bci, aby monitorowa\u0107 operacje i rozwi\u0105zywa\u0107 problemy.\n- Platforma dostaw \u017cywno\u015bci korzysta z Dostawcy p\u0142atno\u015bci, aby autoryzowa\u0107 i pobiera\u0107 p\u0142atno\u015bci.\n- Platforma dostaw \u017cywno\u015bci korzysta z Us\u0142ugi mapowania i geolokalizacji, aby oblicza\u0107 trasy i \u015bledzi\u0107 lokalizacje.\n- Platforma dostaw \u017cywno\u015bci korzysta z Us\u0142ugi powiadomie\u0144, aby wysy\u0142a\u0107 powiadomienia.\n\nWygeneruj czysty diagram kontekstu systemu C4. Nie pokazuj wewn\u0119trznych kontener\u00f3w, komponent\u00f3w, baz danych, klas ani infrastruktury wdro\u017cenia. U\u017cywaj zwi\u0119z\u0142ych etykiet relacji.\n<\/code><\/pre>\n3. Wygeneruj diagram w czacie AI Visual Paradigm<\/h2>\n
\n
\n
Przejrzyj pierwszy wynik<\/h3>\n
\n
4. Dopracuj diagram poprzez rozmow\u0119<\/h2>\n
Dodaj element<\/h3>\n
Dodaj Agenta Obs\u0142ugi Klienta, kt\u00f3ry wykorzystuje Platform\u0119 Dostaw \u017bywno\u015bci do badania problem\u00f3w klient\u00f3w i przetwarzania zwrot\u00f3w pieni\u0119dzy.\r\n<\/code><\/pre>\nDodaj system zewn\u0119trzny<\/h3>\n
Dodaj zewn\u0119trzny Us\u0142ug\u0119 Wykrywania Nadu\u017cy\u0107 wykorzystywan\u0105 przez Platform\u0119 Dostaw \u017bywno\u015bci do oceny podejrzanych p\u0142atno\u015bci.\r\n<\/code><\/pre>\nZmie\u0144 nazw\u0119 elementu<\/h3>\n
Zmie\u0144 nazw\u0119 \u201eUs\u0142ugi Powiadomie\u0144\u201d na \u201eUs\u0142ug\u0119 Wiadomo\u015bci i Powiadomie\u0144\u201d.\r\n<\/code><\/pre>\nZmie\u0144 relacj\u0119<\/h3>\n
Zmie\u0144 relacj\u0119 mi\u0119dzy Kierowc\u0105 Dostawczym a Platform\u0105 Dostaw \u017bywno\u015bci na:\r\n\u201eOtrzymuje zlecenia dostaw i przesy\u0142a aktualizacje statusu dostaw\u201d.\r\n<\/code><\/pre>\nUsu\u0144 element<\/h3>\n
Usu\u0144 Administratora Operacji z diagramu.\r\n<\/code><\/pre>\nPopraw uk\u0142ad<\/h3>\n
Przestaw diagram tak, aby ludzie pojawiali si\u0119 na g\u00f3rze, systemy zewn\u0119trzne na dole, a Platforma Dostaw \u017bywno\u015bci pozosta\u0142a wy\u015brodkowana.\r\n<\/code><\/pre>\nUpro\u015b\u0107 diagram<\/h3>\n
Upro\u015b\u0107 to do \u015bcis\u0142ego diagramu kontekstu systemu C4. Usu\u0144 szczeg\u00f3\u0142y implementacji, bazy danych, API, mikrous\u0142ugi i komponenty wewn\u0119trzne.\r\n<\/code><\/pre>\nZa\u017c\u0105daj przegl\u0105du sp\u00f3jno\u015bci<\/h3>\n
Przejrzyj diagram pod k\u0105tem brakuj\u0105cych relacji, niejednoznacznych etykiet, zduplikowanych system\u00f3w oraz element\u00f3w, kt\u00f3re nie nale\u017c\u0105 do diagramu kontekstu C4.\r\n<\/code><\/pre>\nCz\u0119\u015b\u0107 1: Otw\u00f3rz diagram w VPasCode do edycji kodu<\/h1>\n
5. U\u017cyj opcji \u201eOtw\u00f3rz w VPasCode\u201d lub \u201eEdytuj w VPasCode\u201d<\/h2>\n
\n
\n\nPlantUML<\/span>
\n
\n