60-sekundowy przewodnik szybkiego uruchomienia VPasCode

Rozpoczęcie pracy z Visual Paradigm VPasCode trwa mniej niż minutę. Ponieważ platforma jest całkowicie oparta na chmurze, nie musisz instalować środowiska uruchomieniowego Java, konfigurować modułów Node.js ani pobierać ciężkich zależności rozszerzeń IDE. Możesz przejść od surowego składni tekstu do szczegółowego wizualnego diagramu w zaledwie trzech prostych krokach.

Postępuj zgodnie z tym szybkim przewodnikiem, aby stworzyć, dostosować i udostępnić swój pierwszy element Diagram-as-Code (DaC).

Krok 1: Otwórz Edytor w czasie rzeczywistym

Przejdź w przeglądarce do darmowego VPasCode Playground. Domyślnie zostaniesz powitany nowoczesnym interfejsem dwupanelowym:

• Lewy panel (Edytor kodu): Lekki, wydajny edytor tekstu z automatycznym podświetlaniem składni, numerami linii i aktywnym wykrywaniem błędów.
• Prawy panel (okno podglądu w czasie rzeczywistym): Renderowanie diagramu w czasie rzeczywistym, które automatycznie aktualizuje Twoją wizualną układ graficzny podczas wpisywania lub modyfikowania reprezentacji tekstu.

Krok 2: Wybierz silnik i wklej szablon

VPasCode automatycznie rozpoznaje Twój składnik. Aby zobaczyć to w działaniu, wyczyść dowolny tekst wskazujący w lewym panelu i wklej jeden z poniższych przykładów bazowych do edytora:

Opcja A: Diagram przepływu w formacie Markdown (składnia Mermaid)

Jeśli wolisz dynamiczny, od góry do dołu układ diagramu przepływu, użyj tego prostego bloku:

graph TD
    A[Żądanie klienta] --> B{Brama API}
    B --> |Poprawny token| C[Usługa uwierzytelniania]
    B --> |Niepoprawny token| D[Dostęp zabroniony]
    C --> E[(Baza danych użytkowników)]

Opcja B: Komponent architektury oprogramowania (składnia PlantUML)

Jeśli chcesz zmapować strukturalne komponenty systemu z formalnym ograniczeniem granic, użyj tego bloku:

@startuml
package "Warstwa aplikacji" {
    [Aplikacja internetowa] -right-> [Brama API]
}
database "Przechowywanie danych" {
    [Brama API] --> [SQL Główna]
    [Brama API] ..> [Cache Redis] : "Optymalizacja odczytu"
}
@enduml

W chwili wklejenia kodu, panel po prawej stronie natychmiast skompiluje Twój tekst i wyświetli czysty, idealnie wyrównany diagram wizualny.

Krok 3: Eksportuj i udostępnij swoją pracę

Gdy będziesz zadowolony z układu, możesz natychmiast wyeksportować lub udostępnić swój dokument za pomocą paska sterowania obszaru roboczego znajdującego się na górze interfejsu:

1. Skopiuj udostępniony adres URL: Kliknij Udostępnij przycisk, aby wygenerować natychmiastowy link. VPasCode wykorzystuje serializację stanu bez bazy danych, co oznacza, że cały tekst diagramu jest bezpiecznie kompresowany bezpośrednio do fragmentu adresu URL. Każdy, kto kliknie Twój link, może natychmiast zobaczyć i edytować dokładny model kodu.
2. Pobierz wektor o wysokiej rozdzielczości (SVG): Kliknij Eksportuj SVG przycisk, aby pobrać skalowalny zasób wektorowy. Jest to idealne do czystych osadzeń w repozytoriach Git, wiki zespołu lub wewnętrznych plików dokumentacji inżynierskiej w formacie markdown.
3. Pobierz statyczny obraz (PNG): Kliknij Eksportuj PNG aby uzyskać zdjęcie o wysokiej rozdzielczości gotowe do natychmiastowego umieszczenia w Slacku, Microsoft Teams lub prezentacjach projektowych.

Teraz, gdy wyrenderowałeś swój pierwszy zasób, przejrzyj następne sekcje naszej dokumentacji, aby opanować indywidualne metodyki projektowania Playbook PlantUML, Playbook Mermaid, oraz Playbook Graphviz projektowania!