Z radością ogłaszamy oficjalne uruchomienie Visual ParadigmVPasCode, w pełni zintegrowana, nowa marka Visual Paradigmdiagram jako kod platformaNiezależnie od tego, czy jesteś inżynierem oprogramowania, architektem systemu, czy analitykiem biznesowym, VPasCode został zaprojektowany tak, aby usprawnić Twój przepływ pracy, przekształcając tekst w piękne, profesjonalne diagramy w kilka sekund.
Powiedz „do widzenia” przełączaniu się między różnymi narzędziami. VPasCode łączy Twoje ulubione języki tekst-do-diagramu z otwartym kodem źródłowym w jednym, płynnym i potężnym środowisku opartym na sieci.
Czym jest VPasCode?
VPasCode (Visual Paradigm jako Kod) to zintegrowane środowisko, które łączy wygodny, darmowyedytor kodu z wysokowydajnymrenderem diagramówJeśli cenisz szybkość i korzyści kontroli wersji wynikające z pisania diagramów, VPasCode daje Ci ostateczne środowisko testowe do budowania, podglądu i natychmiastowego udostępniania ich.
Ponieważ jest to w pełni zintegrowane środowisko, VPasCode teoretycznie obsługujewszystkiezasady składni dla najpopularniejszych na świecie silników do tworzenia diagramów. W momencie uruchomienia w pełni obsługujemy:
- Edytor i renderer PlantUML:Twórz solidne diagramy architektury przedsiębiorstwa i oprogramowania.
- Edytor i renderer Mermaid.js:Renderuj nowoczesne wykresy i osie czasu inspirowane markdownem natywnie w przeglądarce.
- Edytor i renderer Graphviz:Wykorzystaj moc języka DOT do tworzenia złożonych sieci i struktur danych.
…a to dopiero początek! W przyszłości będziemy nieustannie dodawać więcej formatów tekst-do-diagramu.

Obsługiwane typy diagramów na pierwszy rzut oka
VPasCode obsługuje niesamowicie rozległą bibliotekę typów diagramów. Oto krótki przegląd tego, co możesz teraz zbudować:
Integracja PlantUML
- Diagramy sekwencji, przypadków użycia, klas i obiektów
- Diagramy aktywności, komponentów, wdrożenia i stanów
- Modele ArchiMate i C4
- Diagramy relacji encji (ERD) & ERD Chen
- Diagramy sieciowe, WBS (Struktura podziału pracy) oraz diagramy czasowe
Integracja z Mermaid.js
- Schematy blokowe, diagramy klas i diagramy sekwencji
- Diagramy relacji encji (ERD) oraz diagramy stanów
- Mapy myśli, osie czasu oraz mapy podróży użytkownika
- Wykresy Gantta, wykresy Git oraz tablice Kanban
- Modele C4, wykresy kwadrantowe oraz diagramy wymagań
Integracja z Graphviz
- Digraf i graf
- Schematy blokowe oraz diagramy przepływu danych
- Wykresy organizacyjne i klastry
Funkcje i możliwości
Chcemy, aby VPasCode było dostępne dla każdego, dlatego nasz darmowy plan zawiera niezbędne narzędzia, jednocześnie oferując przełomowe funkcje wspierane przez sztuczną inteligencję dla użytkowników premium.
Darmowe funkcje dostępne dla każdego:
- Wsparcie wielu silników:Pełny dostęp do PlantUML, Mermaid.js i Graphviz.
- Opisy tekstowe:Twórz złożone diagramy wyłącznie za pomocą intuicyjnego kodu.
- Podgląd w czasie rzeczywistym:Zobacz, jak Twój diagram aktualizuje się natychmiast po boku ekranu podczas pisania.
- Łatwe udostępnianie:Wygeneruj unikalny adres URL, aby łatwo udostępniać swój żywy diagram współpracownikom lub klientom.
- Elastyczne eksportowanie:Pobierz gotową pracę w wysokiej jakości PNG obrazów lub skalowalnych SVG grafiki wektorowej.
Wzmocnij swój przepływ pracy dzięki funkcjom płatnym:
- AI Naprawianie Błędów Kodu:Zastanawiasz się nad błędem składni? Nasz wbudowany AI przeanalizuje Twój kod PlantUML, Mermaid lub Graphviz i automatycznie naprawi błędy.

- AI Tłumaczenie:Płynnie tłumacz teksty i etykiety w swoich diagramach na wiele języków jednym kliknięciem.

Jak uzyskać dostęp do płatnych funkcji VPasCode
Jeśli jesteś istniejącym użytkownikiem Visual Paradigm, możesz już mieć dostęp do naszych premium funkcji AI!
Płatne funkcje VPasCode są wliczone w:
- Visual Paradigm Online Combo Edition (lub nowsza).
- Visual Paradigm Desktop Professional Edition (lub nowsza) z aktywną umową serwisową.
Uwaga dla użytkowników wersji desktopowej:Użytkownicy Visual Paradigm Professional Edition (lub nowszej) z aktywną umową serwisową otrzymują automatycznie pełny dostęp do aplikacji webowych VP Online Combo Edition – co oznacza, że natychmiast uzyskujesz dostęp do premium narzędzi AI VPasCode bez dodatkowych kosztów!
PlantUML i Mermaid w VPasCode – Przykłady Diagramów
Diagram przypadków użycia PlantUML: System E-commerce
Ten diagram przypadków użycia ilustruje główne interakcje w systemie koszyka e-commerce. Klient może przeglądać swój koszyk i przejść do finalizacji zakupu, gdzie uwierzytelnianie, stosowanie kuponów i płatność kartą kredytową są zintegrowane poprzez zewnętrzne usługi, takie jak dostawca tożsamości i procesor płatności.

@startuml
kierunek z lewej do prawej
aktor "Klient E-Commerce" jako customer
aktor "Dostawca Tożsamości" jako authPool
aktor "Procesor Płatności" jako stripe
prostokąt "Granica Systemu Koszyka" {
usecase "Uwierzytelnij" jako UC_Auth
usecase "Przeglądaj Koszyk" jako UC_Cart
usecase "Kasacja" jako UC_Check
usecase "Stosuj Kupon" jako UC_Promo
usecase "Zapłać Kartą Kredytową" jako UC_Pay
}
customer --> UC_Cart
customer --> UC_Check
UC_Check ..> UC_Auth : <>
UC_Check <.. UC_Promo : <>
UC_Check ..> UC_Pay : <>
UC_Auth --> authPool
UC_Pay --> stripe
@enduml
Diagram klas PlantUML: System Zarządzania Biblioteką
Ten diagram klas modeluje system zarządzania biblioteką, pokazując kluczowe encje zaangażowane w zarządzanie katalogiem, usługi dla członków i operacje wypożyczeń. Projekt wykorzystuje dziedziczenie do reprezentowania różnych typów materiałów bibliotecznych (takich jak książki, czasopisma i płyty DVD), podczas gdy powiązania między członkami, bibliotekarzami, rekordami wypożyczeń i grzywnami ilustrują, jak przedmioty są wypożyczane, zwracane i zarządzane przez cały ich cykl życia.

@startuml
class Biblioteka {
- nazwa: String
- adres: String
- telefon: String
+ dodajCzłonka(członek: Członek): void
+ usuńCzłonka(idCzłonka: String): void
+ dodajElement(element: ElementBiblioteczny): void
+ usuńElement(idElementu: String): void
+ wypożyczElement(idCzłonka: String, idElementu: String): boolean
+ zwróćElement(idElementu: String): boolean
}
class ElementBiblioteczny {
# idElementu: String
# tytuł: String
# wydawca: String
# rokWydania: int
# dostępny: boolean
+ uzyskajSzczegóły(): String
+ ustawDostępność(status: boolean): void
}
abstract class Książka {
- isbn: String
- autor: String
- liczbaStron: int
+ uzyskajAutora(): String
}
class EBook {
- rozmiarPlikuMB: double
- format: String
- urlPobrania: String
+ pobierz(): void
}
class KsiążkaDrukowana {
- lokalizacjaNaPółce: String
- stan: String
+ uzyskajLokalizacjęNaPółce(): String
}
class Czasopismo {
- numerWydania: int
- numerTomu: int
- dataOkładki: Date
}
class DVD {
- czasTrwaniaMinuty: int
- reżyser: String
- język: String
- dostępneNapisy: boolean
}
class Członek {
- idCzłonka: String
- imię: String
- email: String
- telefon: String
- dataZapisu: Date
+ wypożyczElement(element: ElementBiblioteczny): boolean
+ zwróćElement(element: ElementBiblioteczny): boolean
+ uzyskajWypożyczoneElementy(): List
}
class RejestrWypożyczeń {
- idRejestru: String
- dataWypożyczenia: Date
- dataZwrotu: Date
- dataFaktycznegoZwrotu: Date
- czyPrzekroczonoTermin(): boolean
- obliczKary(): double
}
class Kara {
- idKary: String
- kwota: double
- dataWystawienia: Date
- czyOpłacona: boolean
+ opłaćKarę(): void
}
class Bibliotekarz {
- idPracownika: String
- wydział: String
+ obsłużWypożyczenie(członek: Członek, element: ElementBiblioteczny): void
+ obsłużZwrot(element: ElementBiblioteczny): void
+ wygenerujRaport(): void
+ zarządzajZapasami(): void
}
' Relacje dziedziczenia
ElementBiblioteczny <|-- Książka
ElementBiblioteczny <|-- Czasopismo
ElementBiblioteczny <|-- DVD
Książka <|-- EBook
Książka <|-- KsiążkaDrukowana
' Kompozycja i agregacja
Biblioteka "1" -- "wiele" Członek : posiada >
Biblioteka "1" -- "wiele" ElementBiblioteczny : zawiera >
Biblioteka "1" -- "wiele" Bibliotekarz : zatrudnia >
Członek "1" -- "wiele" RejestrWypożyczeń : posiada >
RejestrWypożyczeń "1" -- "1..*" ElementBiblioteczny : odnosi się do >
RejestrWypożyczeń "1" -- "0..*" Kara : generuje >
' Asocjacja
Bibliotekarz --> RejestrWypożyczeń : zarządza >
Członek --> RejestrWypożyczeń : tworzy >
note top of Biblioteka : Centralny system zarządzającynczłonkami, elementami i wypożyczeniami
note right of ElementBiblioteczny : Abstrakcyjna klasa bazowandla wszystkich materiałów bibliotecznych
@enduml
Diagram sekwencji PlantUML: Wypłata gotówki z bankomatu
Ten diagram sekwencji ilustruje interakcje związane z transakcją wypłaty gotówki z bankomatu, od włożenia karty i walidacji PIN-u, przez wypłatę gotówki, aż po aktualizację konta. Podkreśla komunikację między klientem, bankomatem, systemem bankowym i bazą danych kont klientów, modelując również alternatywne przepływy, takie jak nieprawidłowe próby wprowadzenia PIN-u, niewystarczające środki oraz opcjonalne drukowanie paragonu.

@startuml
' Tytuł
title Wypłata gotówki z bankomatu - Diagram sekwencji
' Aktorzy i uczestnicy
actor Klient jako K
participant "Bankomat" jako BM
participant "System Bankowy" jako SB
database "Konto Klienta" jako KB
' Sekwencja
K -> BM : Włóż kartę
BM -> BM : Odczytaj szczegóły karty
BM -> K : Poproś o PIN
K -> BM : Wprowadź PIN
BM -> SB : Zweryfikuj kartę i PIN
SB -> KB : Sprawdź dane uwierzytelniające
KB --> SB : Wynik walidacji
alt Nieprawidłowy PIN
SB --> BM : Nieprawidłowy PIN
BM -> K : Nieprawidłowy PIN, spróbuj ponownie
note right: Po 3 nieudanych próbach,nkarta zostaje zatrzymana
else Prawidłowy PIN
SB --> BM : Prawidłowy PIN
BM -> K : Pokaż menu główne
K -> BM : Wybierz wypłatę
BM -> K : Poproś o kwotę
K -> BM : Wprowadź kwotę
BM -> SB : Sprawdź stan konta i limit
SB -> KB : Zapytaj o stan konta
KB --> SB : Aktualny stan konta
alt Niewystarczające środki
SB --> BM : Niewystarczający stan konta
BM -> K : Transakcja odrzuconan(Pokaż stan konta)
K -> BM : Anuluj transakcję
BM -> K : Zwróć kartę
else Wystarczające środki
SB --> BM : Zatwierdzono
BM -> BM : Wypłać gotówkę
BM -> K : Wypłać gotówkę
K -> BM : Pobierz gotówkę
BM -> SB : Potwierdź wypłatę gotówki
SB -> KB : Obciąż konto i zaloguj transakcję
KB --> SB : Aktualizacja zakończona
SB --> BM : Transakcja zakończona
BM -> K : Drukuj paragon
alt Paragon wymagany
K -> BM : Pobierz paragon
else Brak paragonu
K -> BM : Odrzuć paragon
end
BM -> K : Zwróć kartę
K -> BM : Pobierz kartę
end
end
BM -> K : Dziękujemy / Koniec transakcji
@enduml
Diagram aktywności PlantUML: System zgłaszania roszczeń ubezpieczeniowych
Ten diagram aktywności modeluje pełny proces obsługi zgłoszenia roszczenia ubezpieczeniowego, od zgłoszenia przez walidację, dochodzenie i uregulowanie. Uchwytuje kluczowe punkty decyzyjne, takie jak ważność polisy, kompletność dokumentów, ważność roszczenia oraz akceptacja uregulowania, ilustrując zarówno ścieżki sukcesu, jak i ścieżki obsługi wyjątków, w tym odrzucenie roszczenia i rozwiązywanie sporów.

@startuml InsuranceClaimSystem
start
:Ubezpieczony składa zgłoszenie roszczenia;
:Roszczenie jest rejestrowane w systemie;
if (Czy polisa jest aktywna i ważna?) then (tak)
:Przypisz roszczenie do rzeczoznawcy;
:Powiadom rzeczoznawcę o nowym roszczeniu;
else (nie)
:Wyślij odmowę do ubezpieczonego;
:Zaloguj powód: Polisa nieaktywna/nieważna;
stop
endif
:Rzeczoznawca przegląda przesłane dokumenty;
if (Czy wszystkie wymagane dokumenty są obecne?) then (tak)
:Rzeczoznawca inicjuje walidację roszczenia;
else (nie)
:Poproś ubezpieczonego o brakujące dokumenty;
:Czekaj na dodatkowe dokumenty;
:Sprawdź dokumenty ponownie;
note right
System czeka na
odpowiedź ubezpieczonego
end note
-> powrót do "Rzeczoznawca przegląda przesłane dokumenty";
endif
:Rzeczoznawca dochodzi roszczenia;
:Skontaktuj się ze świadkami/ekspertami, jeśli potrzebne;
:Oszacuj kwotę szkody/straty;
if (Czy roszczenie jest ważne zgodnie z warunkami polisy?) then (tak)
:Oblicz zatwierdzoną kwotę;
:Zastosuj udział własny, jeśli dotyczy;
else (nie)
:Wyślij odmowę z uzasadnieniem;
:Zaloguj decyzję w systemie;
stop
endif
:Wygeneruj ofertę uregulowania;
:Wyślij ofertę uregulowania do ubezpieczonego;
:Ubezpieczony przegląda ofertę;
if (Czy ubezpieczony akceptuje ofertę?) then (tak)
:Przetwórz płatność;
:Zaktualizuj status roszczenia na "Uregulowane";
:Wyślij potwierdzenie do ubezpieczonego;
:Zaloguj szczegóły zamknięcia;
else (nie)
:Przekaz do rozwiązywania sporów;
:Negocjuj uregulowanie;
:Zaktualizuj ofertę;
-> powrót do "Wyślij ofertę uregulowania do ubezpieczonego";
endif
stop
@enduml
Diagram stanów PlantUML: System wykrywania dymu
Ten diagram stanów ilustruje zachowanie systemu wykrywania dymu podczas przejścia między stanami operacyjnymi, takimi jak czuwanie, monitorowanie, wykrywanie dymu, aktywacja alarmu i obsługa błędów. Pokazuje, jak system reaguje na zdarzenia, w tym zmiany zasilania, wyniki samo-testów, wykrycie dymu, niski poziom naładowania baterii oraz reset inicjowany przez użytkownika, aby zapewnić niezawodne monitorowanie pożarów i ostrzegawcze.

@startuml SmokeDetectionSystem
title Diagram stanów - System wykrywania dymu
[*] --> Wyłączone
state Wyłączone {
[*] --> BrakZasilania
BrakZasilania : Urządzenie wyłączone
BrakZasilania --> Włączone : Naciśnięto przycisk zasilania
}
state Włączone {
[*] --> Czuwanie
Czuwanie : System gotowy
Czuwanie --> SamoTest : Okresowy test własny (co 24h)
Czuwanie --> Monitorowanie : Rozpocznij monitorowanie (czujnik aktywny)
state SamoTest {
[*] --> TestowanieCzujników
TestowanieCzujników --> TestZgodny : Wszystkie czujniki OK
TestowanieCzujników --> TestNieZgodny : Wykryto błąd czujnika
TestZgodny --> Czuwanie : Powrót do czuwania
TestNieZgodny --> StanBłędu : Zgłoś błąd
}
state Monitorowanie {
[*] --> BrakDymu
BrakDymu : Normalna praca
BrakDymu --> WykrytoDym : Poziom dymu > próg
BrakDymu --> NiskaBateria : Niska bateria (bezprzewodowa)
NiskaBateria --> BrakDymu : Bateria wymieniona
state WykrytoDym {
[*] --> WstępnyAlarm
WstępnyAlarm --> PotwierdzonyDym : Dym utrzymuje się > 5 sek
WstępnyAlarm --> FałszywyAlarm : Dym znika < 5 sek FałszywyAlarm --> BrakDymu : Reset
PotwierdzonyDym --> AktywnyAlarm
}
state AktywnyAlarm {
[*] --> DźwiękAlarmu : Aktywuj syrenę i światła
DźwiękAlarmu --> WyślijPowiadomienie : Powiadom panel sterujący / aplikację
WyślijPowiadomienie --> CzekajNaReset
CzekajNaReset --> AktywnyAlarm : Dym nadal obecny
CzekajNaReset --> ResetSystemu : Naciśnięto przycisk resetu
ResetSystemu --> BrakDymu : System zresetowany
}
}
}
state StanBłędu {
[*] --> WskaźnikUsterki : Miganie diody błędu
WskaźnikUsterki --> Wyłączone : Wymagany ręczny cykl zasilania
}
Włączone --> StanBłędu : Niepowodzenie testu własnego
StanBłędu --> Wyłączone : Cykl zasilania
Wyłączone --> [*] : System odłączony / bateria usunięta
@enduml
Diagram komponentów PlantUML: System kurierski
Ten diagram komponentów przedstawia architekturę wysokiego poziomu systemu zarządzania kurierskiego, pokazując, jak aplikacje klienckie, usługi backendowe, infrastruktura komunikacyjna, pamięci podręczne i bazy danych współdziałają w celu wsparcia operacji dostawy przesyłek. Ilustruje podział odpowiedzialności między usługami takimi jak zarządzanie zamówieniami, dyspozycja, śledzenie, płatności, powiadomienia i zarządzanie użytkownikami, podkreślając jednocześnie zarówno synchroniczną komunikację API, jak i asynchroniczne przetwarzanie oparte na zdarzeniach.

@startuml CourierSystem
tytuł System kurierski - Diagram komponentów
' === Komponenty ===
komponent "Aplikacja klienta" jako CustomerApp
komponent "Aplikacja mobilna kuriera" jako CourierApp
komponent "Panel administracyjny webowy" jako AdminWeb
komponent "Brama API" jako ApiGateway
komponent "Usługa zamówień" jako OrderService
komponent "Usługa dyspozycji" jako DispatchService
komponent "Usługa śledzenia" jako TrackingService
komponent "Usługa płatności" jako PaymentService
komponent "Usługa powiadomień" jako NotificationService
komponent "Usługa użytkowników" jako UserService
komponent "Kolejka wiadomościn(RabbitMQ/Kafka)" jako MessageQueue
komponent "Pamięć podręczna Redis" jako RedisCache
baza danych "Baza danych PostgreSQL" jako SQLDB
baza danych "MongoDBn(Logi/Historia śledzenia)" jako MongoLogs
' === Interfejsy / Porty ===
CustomerApp --> ApiGateway : "REST / WebSocket"
CourierApp --> ApiGateway : "REST / WebSocket"
AdminWeb --> ApiGateway : "REST"
ApiGateway --> OrderService
ApiGateway --> TrackingService
ApiGateway --> PaymentService
ApiGateway --> UserService
' === Zależności usług ===
OrderService --> DispatchService : "gRPC / REST"
OrderService --> PaymentService
OrderService --> NotificationService
OrderService --> SQLDB : "JDBC"
OrderService --> RedisCache : "Cache"
DispatchService --> MessageQueue : "Publikuj zdarzenia"
DispatchService --> CourierApp : "Wysyłaj push przez bramę API"
DispatchService --> SQLDB
TrackingService --> MessageQueue : "Subskrybuj aktualizacje lokalizacji"
TrackingService --> MongoLogs : "Zapisz historię śledzenia"
TrackingService --> RedisCache : "Pamięć podręczna aktualnej lokalizacji"
PaymentService --> SQLDB
PaymentService --> NotificationService
NotificationService --> MessageQueue : "Konsumuj powiadomienia"
NotificationService --> CustomerApp : "Wysyłaj push przez bramę API"
UserService --> SQLDB
UserService --> RedisCache
' === Notatki ===
notatka po prawej stronie OrderService
Obsługuje tworzenie przesyłki,
wycenę i status zamówienia
koniec notatki
notatka po prawej stronie DispatchService
Dopasowuje zamówienia do kurierów,
optymalizuje trasy
koniec notatki
notatka pod MessageQueue
Zdarzenia asynchroniczne: order_created,
location_updated,
delivery_status_changed
koniec notatki
@enduml
Diagram wdrożenia PlantUML: Przykładowa architektura

@startuml
węzeł "AWS Cloud Route53" jako DNS
węzeł "VPC (10.0.0.0/16)" {
węzeł "Podsieć publiczna" {
artefakt "Ładowacz obciążenia NGINX" jako ALB
}
węzeł "Klaster podsieci prywatnej" {
węzeł "Eksploatacja EC2 1" {
komponent "API Node.js [Węzeł 1]" jako Pod1
}
węzeł "Eksploatacja EC2 2" {
komponent "API Node.js [Węzeł 2]" jako Pod2
}
}
węzeł "Podsieć bazodanowa" {
baza danych "Amazon RDS (Multi-AZ Aurora)" jako Aurora
}
}
DNS --> ALB : Rozwiązuje ruch
ALB --> Pod1 : Balansowanie round-robin
ALB --> Pod2
Pod1 --> Aurora : Bufor połączeń
Pod2 --> Aurora
@enduml
Przykład ArchiMate PlantUML: Przeglądarka internetowa
Ten diagram ArchiMate ilustruje, jak warstwy biznesowe, aplikacyjne i technologiczne współdziałają w celu wsparcia funkcjonalności biznesowej opartej na sieci poprzez przeglądarkę internetową. Pokazuje relacje między procesami biznesowymi, dynamicznie generowanymi komponentami i danymi stron internetowych, usługami i wtyczkami przeglądarki oraz podstawową infrastrukturą serwera WWW, która dostarcza i wspiera doświadczenie użytkownika aplikacji.

@startuml Internet Browser Sample
!include <archimate/Archimate>
tytuł Przykład Archimate - Przeglądarka internetowa
'LAYOUT_AS_SKETCH()
'LAYOUT_LEFT_RIGHT()
'LAYOUT_TOP_DOWN()
Grupowanie(business, "Biznes"){
Obiekt_biznesowy(businessObject, "Obiekt biznesowy")
Proces_biznesowy(someBusinessProcess,"Pewien proces biznesowy")
Usługa_biznesowa(itSupportService, "Wsparcie IT dla biznesu (Usługa aplikacyjna)")
}
Grupowanie(application, "Aplikacja"){
Obiekt_danych_aplikacji(dataObject, "Dane strony WWW n 'w locie'")
Funkcja_aplikacji(webpageBehaviour, "Zachowanie strony WWW")
Komponent_aplikacji(ActivePartWebPage, "Aktywna część strony WWW n 'w locie'")
}
Grupowanie(technology, "Technologia"){
Artefakt_technologiczny(inMemoryItem,"w pamięci / 'w locie' html/javascript")
Usługa_technologiczna(internetBrowser, "Przeglądarka internetowa ogólna i wtyczka")
Usługa_technologiczna(internetBrowserPlugin, "Pewna wtyczka przeglądarki internetowej")
Usługa_technologiczna(webServer, "Pewien serwer WWW")
}
Rel_Flow_Left(someBusinessProcess, businessObject, "")
Rel_Serving_Up(itSupportService, someBusinessProcess, "")
Rel_Specialization_Up(webpageBehaviour, itSupportService, "")
Rel_Flow_Right(dataObject, webpageBehaviour, "")
Rel_Specialization_Up(dataObject, businessObject, "")
Rel_Assignment_Left(ActivePartWebPage, webpageBehaviour, "")
Rel_Specialization_Up(inMemoryItem, dataObject, "")
Rel_Realization_Up(inMemoryItem, ActivePartWebPage, "")
Rel_Specialization_Right(inMemoryItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webpageBehaviour, "")
Rel_Serving_Up(internetBrowserPlugin, webpageBehaviour, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, inMemoryItem, "")
Rel_Serving_Up(webServer, internetBrowser, "")
@enduml
Przykład ERD PlantUML: System biletów kinowych

@startuml
entity "Klient" jako klient {
* customer_id : UUID <>
--
* first_name : VARCHAR(50)
* last_name : VARCHAR(50)
* email : VARCHAR(100) <>
* phone : VARCHAR(20)
* loyalty_points : INT
* registration_date : TIMESTAMP
}
entity "Film" jako film {
* movie_id : UUID <>
--
* title : VARCHAR(200)
* description : TEXT
* duration_minutes : INT
* genre : VARCHAR(50)
* release_date : DATE
* rating : VARCHAR(10)
}
entity "Kino" jako kino {
* theater_id : UUID <>
--
* theater_name : VARCHAR(100)
* total_seats : INT
* seat_layout : JSON
}
entity "Pokaz" jako pokaz {
* show_id : UUID <>
--
* movie_id : UUID <>
* theater_id : UUID <>
* show_time : TIMESTAMP
* end_time : TIMESTAMP
* language : VARCHAR(50)
* subtitle : BOOLEAN
* price_regular : DECIMAL(10,2)
* price_vip : DECIMAL(10,2)
}
entity "Miejsce" jako miejsce {
* seat_id : UUID <>
--
* theater_id : UUID <>
* row_label : CHAR(2)
* seat_number : INT
* seat_type : VARCHAR(20)
* is_accessible : BOOLEAN
}
entity "Rezerwacja" jako rezerwacja {
* booking_id : UUID <>
--
* customer_id : UUID <>
* show_id : UUID <>
* booking_time : TIMESTAMP
* total_amount : DECIMAL(10,2)
* status : VARCHAR(20)
* payment_method : VARCHAR(30)
* transaction_id : VARCHAR(100)
}
entity "RezerwacjaMiejsca" jako rezerwacja_miejsce {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* ticket_price : DECIMAL(10,2)
* discount_applied : DECIMAL(10,2)
}
entity "Płatność" jako płatność {
* payment_id : UUID <>
--
* booking_id : UUID <>
* amount : DECIMAL(10,2)
* payment_date : TIMESTAMP
* payment_status : VARCHAR(20)
* payment_gateway : VARCHAR(30)
* gateway_reference : VARCHAR(200)
}
entity "Opinia" jako opinia {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* rating : INT
* comment : TEXT
* review_date : TIMESTAMP
}
' Relacje
klient ||--o{ rezerwacja : "składa"
film ||--o{ pokaz : "planowany jako"
kino ||--o{ pokaz : "organizuje"
pokaz ||--o{ rezerwacja : "ma"
rezerwacja ||--|{ rezerwacja_miejsce : "zawiera"
miejsce ||--o{ rezerwacja_miejsce : "przypisane do"
rezerwacja ||--|| płatność : "ma"
klient ||--o{ opinia : "pisze"
film ||--o{ opinia : "otrzymuje"
note right of rezerwacja : Status: OCZEKUJĄCY, POTWIERDZONY, ANULOWANY, WYGAŚNIĘTY
note left of miejsce : seat_type: ZWYKŁE, VIP, PARA
note right of płatność : payment_status: OCZEKUJĄCY, SUKCES, BŁĄD, ZWROT
@enduml
Schemat Mermaid: Udaj się do lekarza
Ten schemat przedstawia typowy proces podejmowania decyzji w służbie zdrowia, prowadząc pacjentów od początkowego rozpoznania objawów przez diagnozę, badania, leczenie i powrót do zdrowia. Podkreśla kluczowe punkty decyzyjne, w tym ocenę nagłą, ocenę diagnostyczną i skuteczność leczenia, jednocześnie pokazując, jak niezałatwione objawy mogą wymagać dodatkowej konsultacji medycznej i ponownej oceny.

flowchart TD
A[Samopoczucie złe lub potrzeba porady medycznej] --> B{Czy to nagły wypadek?}
B -->|Tak| C[Zadzwoń na numer alarmowy lub udaj się na SOR]
B -->|Nie| D[Umów wizytę u lekarza]
D --> E[Przyjdź na wizytę]
E --> F[Ewaluacja przez lekarza]
F --> G{Czy postawiono diagnozę?}
G -->|Tak| H[Plan leczenia]
G -->|Nie| I[Zamów badania]
I --> J[Otrzymaj wyniki badań]
J --> F
H --> K[Steruj leczeniem]
K --> L{Czy objawy się poprawiły?}
L -->|Tak| M[Powrót do zdrowia / Rutynowa kontrola]
L -->|Nie| N[Wróć do lekarza]
N --> F
Wykres Graphviz
Ten diagram przedstawia uproszczą topologię sieci centrum danych, ilustrującą, jak hosty są połączone poprzez szkielet połączonych przełączników. Podkreśla główne ścieżki komunikacyjne między urządzeniami sieciowymi, w tym łącze trunk między przełącznikami oraz wtórne połączenie failover zapewniające redundancję i odporność w przypadku zakłóceń sieciowych.

graph UndirectedSpanningTree {
fontname="Helvetica,Arial,sans-serif"
label="Topologia szkieletu infrastruktury sieciowej typu mesh centrum danych"
labelloc="b"
fontsize=14
node [fontname="Helvetica,Arial,sans-serif", shape=circle, style=filled, color="#475569", fillcolor="#f1f5f9", width=0.8, fixedsize=true]
edge [color="#94a3b8", penwidth=2.5]
SwitchAlpha [label="SW_A", fillcolor="#cbd5e1"]
SwitchBeta [label="SW_B", fillcolor="#cbd5e1"]
Node1 [label="Host_01"]
Node2 [label="Host_02"]
Node3 [label="Host_03"]
Node4 [label="Host_04"]
SwitchAlpha -- SwitchBeta [label=" Łącze trunkowe", weight=5]
SwitchAlpha -- Node1
SwitchAlpha -- Node2
SwitchBeta -- Node3
SwitchBeta -- Node4
Node1 -- Node2 [style=dashed, color="#cbd5e1", label=" Połączenie failover"]
}
Zacznij już dziś
Gotowy, aby poczuć szybkość diagramów jako kodu? Niezależnie od tego, czy potrzebujesz niezawodnego edytora PlantUML, szybkiego edytora Mermaid, czy potężnego kompilatora Graphviz, VPasCode jest gotowy dla Ciebie.
Przejdź teraz na naszą platformę pod adresem:
Wypróbuj edytor w czasie rzeczywistym i zrewolucjonizuj sposób projektowania oprogramowania i systemów!







