Jesteśmy bardzo podekscytowani ogłoszeniem ważnej aktualizacji w VPasCode: pełne wsparcie dla języka D2 języka diagram-as-code! Dzięki tej aktualizacji architekci, programiści i pisarze techniczni mogą natychmiast przekształcać deklaratywne skrypty tekstowe D2 w czyste, profesjonalne diagramy wizualne bez żadnych trudności.
Niezależnie od tego, czy projektujesz złożoną architekturę chmury, topologię mikroserwisów lub przepływy organizacyjne, VPasCode działa jako Twoje pierwsze wyjście do darmowego edytora D2 oraz bogate w funkcje internetowego narzędzia D2. Doświadcz płynnej, w czasie rzeczywistym wizualizacji bezpośrednio w Twojej przeglądarce.
Aby dowiedzieć się więcej o możliwościach naszej platformy i aktualizacjach, odwiedź oficjalną stronę stronę VPasCode.
Jak działa integracja D2 w VPasCode
Korzystanie z D2 w VPasCode jest szybkie, intuicyjne i zaprojektowane w celu maksymalizacji Twojej produktywności. Przestrzeń robocza oferuje wygodny układ obok siebie:
- Lewy panel (edytor kodu): Po prostu wklej, wpisz lub edytuj swój skrypt D2. Automatyczne wykrywanie formatu w VPasCode natychmiast rozpoznaje Twój kod bez konieczności ręcznego przełączania języka.
- Prawy panel (wizualizator w czasie rzeczywistym): Obserwuj, jak Twój diagram dynamicznie renderowany jest w czasie rzeczywistym podczas pisania lub modyfikowania bloków kodu.
Wideo poniżej pokazuje, jak tworzyć diagram D2 w edytorze diagram-as-code Visual Paradigm VPasCode.
Gotowy, by samemu spróbować? Natychmiast rozpocznij działanie z naszym edytorem VPasCode.
Główne funkcje dostępne wraz z obsługą D2
Poza renderowaniem w czasie rzeczywistym, nasza nowa integracja D2 oferuje bogate opcje współpracy i eksportu, które dopasowują się do Twojego toku pracy:
- Elastyczne opcje eksportu: Pobierz gotowe diagramy natychmiast jako skalowalne grafiki wektorowe SVG lub obrazy PNG o wysokiej rozdzielczości do raportów, prezentacji i dokumentacji.
- Integracja z schowkiem: Szybko skopiuj wyrenderowany obraz diagramu bezpośrednio do schowka jednym kliknięciem, aby wkleić go bezpośrednio do Slacka, e-maili lub edytorów tekstu.
- Natychmiastowe udostępnianie przez link: Łatwo udostępnij swoją pracę współpracownikom lub klientom za pomocą bezpośrednich linków. Najlepsze z najlepszych – nie jest wymagane logowanie, aby odbiorcy mogli przeglądać udostępnione diagramy.
Demonstracja: tworzenie podstawowego diagramu sieciowego w D2
Aby zobaczyć, jak łatwe jest modelowanie systemów przy użyciu tegodarmowego edytora D2, rozważ następujący przykład podstawowej architektury sieciowej z wieloma poziomami.
Kod źródłowy D2
kierunek: prawo
client -> load_balancer: HTTPS
load_balancer -> app1: HTTP
load_balancer -> app2: HTTP
app1 -> redis: GET
app2 -> redis: GET
app1 -> postgres: SQL
app2 -> postgres: SQL
client.shape: osoba
load_balancer.shape: prostokąt
app1.shape: sześciokąt
app2.shape: sześciokąt
redis.shape: walec
postgres.shape: walec
redis.style.fill: "#fee2e2"
postgres.style.fill: "#dcfce7"Jak to wygląda w naszym narzędziu online D2
Gdy wkleisz powyższy skrypt do VPasCode, silnik automatycznie przetwarza relacje, kierunek i niestandardowe stylizowanie kształtów:
- Punktclient jest stylizowany jako wyraźny ikona osoby inicjującej żądania HTTPS do prostokątnegoload_balancer.
- Ruch dzieli się wyraźnie między dwoma węzłami aplikacji w kształcie sześciokąta (app1 i app2).
- Oba węzły aplikacji bezpiecznie zapytują warstwy buforowania w tle (redis, stylizowane w delikatnym odcieniu czerwonego) oraz magazyny danych relacyjnych (postgres, stylizowane w delikatnym odcieniu zielonego).
Więcej przykładów diagramów D2
Podstawowe kształty
serwer -> klient: HTTP
serwer -> baza: zapytanie
klient: {
kształt: osoba
styl.kolor_tła: "#cfe2ff"
}
baza: {
kształt: cylindryczny
styl.kolor_tła: "#d1e7dd"
}
serwer.styl.kolor_tła: "#fff3cd"
Kontenery
sieć: {
web: {
kształt: sześciokąt
styl.kolor_tła: "#e7f1ff"
}
api: {
kształt: prostokąt
styl.kolor_tła: "#fff3cd"
}
db.główna: {
kształt: cylindryczny
styl.kolor_tła: "#d1e7dd"
}
db.cache: {
kształt: cylindryczny
styl.kolor_tła: "#f8d7da"
}
web -> api: REST
api -> db.główna: SQL
api -> db.cache: wyszukiwanie
}Stylizowane
zmienne: {
d2-konfig: {
szkic: true
silnik_układu: elk
}
}
aws: {
vpc: {
web: {
kształt: prostokąt
styl: {
kolor_tła: "#fef3c7"
obramowanie: "#d97706"
szerokość_obramowania: 2
czcionka: mono
}
}
api: {
kształt: prostokąt
styl.kolor_tła: "#dbeafe"
}
db: {
kształt: cylindryczny
styl.kolor_tła: "#dcfce7"
}
}
}
użytkownik -> aws.vpc.web: HTTPS {
styl.animowany: true
}
aws.vpc.web -> aws.vpc.api: HTTP
aws.vpc.api -> aws.vpc.db: SQL {
styl.linia_przerwana: 5
}Sequencja
kształt: diagram_sekwencji
użytkownik -> api: GET /users
api -> baza: SELECT *
baza -> api: wiersze
api -> użytkownik: 200 OK
użytkownik -> api: POST /users
api -> baza: INSERT
baza -> api: wiersz
api -> użytkownik: 201 UtworzonoUwagi: Możesz chcieć utworzyć diagram sekwencji za pomocą PlantUML. Sprawdź, jak to zrobić, tutaj:
Pełny przewodnik po diagramach sekwencji PlantUML: składnia, przykłady i najlepsze praktyki
Co to jest VPasCode?
Jeśli jesteś nowy na naszej platformie, Visual Paradigm VPasCode to zintegrowane, oparte na przeglądarce rozwiązanie diagram-as-code stworzone dla nowoczesnych zespołów technicznych. Usuwa kłopoty związane z ręcznymi narzędziami do rysowania metodą przeciągania i upuszczania, pozwalając Ci całkowicie definiować architekturę i modele danych za pomocą kodu.
Oprócz D2, VPasCode obsługuje ogromną liczbę popularnych formatów diagramów i strukturalnych języków, w tym PlantUML, Mermaid, Graphviz, ECharts, SQL, YAML, JSON, oraz główne języki programowania takie jak Java, Python, Rust, oraz TypeScript. Podstawowe edytowanie kodu, podgląd w czasie rzeczywistym i eksport obrazów są całkowicie darmowe.
Zacznij tworzyć już dziś
Wzmocnij swoją dokumentację techniczną i modelowanie architektury już dziś. Doświadcz szybkości i wygody nowych możliwości D2, uruchamiając aplikację już teraz na stronie Edytor VPasCode.