Read this post in: de_DEen_USes_ESfr_FRid_IDzh_CNzh_TW

Prezentujemy VPasCode: Najlepszą zintegrowaną platformę tekst-do-diagramu

EDITION REQUIRED|
DESKTOPCommunity
VP ONLINEFree

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.Kod diagramu klas PlantUML dla systemu zarządzania biblioteką, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

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.

Interfejs VPasCode wyświetlający edytory kodu dla PlantUML, Mermaid.js i Graphviz wraz z ich wyrenderowanymi diagramami.

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.
    Ilustracja przedstawiająca działanie funkcji automatycznego naprawiania błędów w kodzie przy użyciu sztucznej inteligencji
  • AI Tłumaczenie:Płynnie tłumacz teksty i etykiety w swoich diagramach na wiele języków jednym kliknięciem.
    Jest to ilustracja przedstawiająca działanie funkcji tłumaczenia w VPasCode

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.

Kod diagramu przypadków użycia PlantUML dla systemu e-commerce, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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.

Kod diagramu klas PlantUML dla systemu zarządzania biblioteką, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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.

Kod diagramu sekwencji PlantUML dla klasycznego scenariusza wypłaty gotówki z bankomatu, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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.

Kod diagramu aktywności PlantUML dla systemu zgłaszania roszczeń ubezpieczeniowych, edytowany w edytorze na żywo do tworzenia diagramów tekstowych VPasCode firmy Visual Paradigm

@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.

Kod diagramu stanów PlantUML dla systemu wykrywania dymu, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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.

Kod diagramu komponentów PlantUML dla systemu kurierskiego, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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

Kod diagramu wdrożenia PlantUML dla przykładowej architektury, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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.

Kod diagramu ArchiMate PlantUML dla przeglądarki internetowej, edytowany w edytorze na żywo do tworzenia diagramów tekstowych VPasCode firmy Visual Paradigm

@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

Kod diagramu relacji encji (ERD) PlantUML dla systemu biletów kinowych, edytowany w edytorze tekstowym do tworzenia diagramów VPasCode firmy Visual Paradigm

@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.

Kod schematu przepływu Mermaid.js dla procesu 'udanie się do lekarza', edytowany w edytorze na żywo do tworzenia diagramów tekstowych VPasCode firmy Visual Paradigm

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.

Kod Graphviz dla przykładowego wykresu, edytowany w edytorze na żywo do tworzenia diagramów tekstowych VPasCode firmy Visual Paradigm

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:

https://www.vpascode.com/

Wypróbuj edytor w czasie rzeczywistym i zrewolucjonizuj sposób projektowania oprogramowania i systemów!

Przewijanie do góry