🚀 Visual Paradigm jest zadowolony z ogłoszeniu, że VPasCode – nasza zintegrowana platforma diagramów jako kodu – obsługuje już cztery dodatkowe typy diagramów Mermaid. Teraz możesz tworzyć następujące profesjonalne diagramy przy użyciu prostego zapisu tekstowego:
- 🐟 Diagram Ishikawy (ryba / przyczyna i skutek) – analiza przyczyn głębokich staje się łatwa
- ⚡ Diagram modelowania zdarzeń – projektowanie przepływu informacji i harmonogramów w systemie
- 🟡 Diagram Venna – wizualizuj relacje między zbiorami i ich przecięcia
- 🗺️ Mapy Wardleya – mapowanie łańcucha wartości strategicznej i analiza ewolucji
Niezależnie od tego, czy jesteś menedżerem produktu, architektem oprogramowania, programistą czy strategiem, VPasCode pomaga Ci tworzyć diagramy przy użyciu składni, którą już znasz, z podgląd w czasie rzeczywistym, udostępnianie URL jednym kliknięciem i darmowa eksportacja do SVG/PNG.
🔍 Czym VPasCode się różni?
VPasCode (skrót od Visual Paradigm’s asCode platforma) to zintegrowane środowisko tekst do diagramu. Renderuje PlantUML, Mermaid, Graphviz, i więcej (z dodatkowymi formatami wkrótce). Możesz swobodnie przepisywać się między składniami w tym samym edytorze, nie ucząc się wielu narzędzi.
To ulepszenie skupia się na najnowszej składni Mermaid (v11.12.3+ i v11.15.0+). Poniżej znajdziesz działające przykłady kodu dla każdego nowego typu diagramu – po prostu skopiuj i wklej je do VPasCode.
📌 1. Diagram Ishikawy (kostka ryby) – analiza przyczyn głębokich
Znany również jako diagram przyczyn i skutków lub diagram kostki ryby. Idealny do zarządzania jakością i sesji rozwiązywania problemów.
✅ Przykład – analiza przyczyn głębokich „Zamazane zdjęcie”
ishikawa-beta
Zamazane zdjęcie
Proces
Zbyt mała ostrość
Zbyt wolna szybkość migawki
Film ochronny nie usunięty
Zastosowana filtr ulepszający
Użytkownik
Dłonie drżące
Sprzęt
OBIEKTYW
Nieodpowiedni obiektyw
Uszkodzony obiektyw
Zanieczyszczony obiektyw
SENSOR
Uszkodzony sensor
Zanieczyszczony sensor
Środowisko
Obiekt poruszył się zbyt szybko
Zbyt ciemno
💡 Uwagi składniowe: pierwsza linia definiuje problem (głowa ryby). Wcięcia tworzą hierarchiczne gałęzie przyczyn (kostki ryby).
📌 2. Diagram modelowania zdarzeń – zachowanie systemu w czasie
Modelowanie zdarzeń opisuje, jak informacje zmieniają się w systemie w czasie. Używa interfejsu użytkownika, poleceń, zdarzeń i procesorów ułożonych w kanałach. VPasCode obsługuje zarówno skróconą, jak i luźną składnię, dane w linii oraz bloki danych zewnętrznych.
✅ Minimalny przykład – przepływ dodawania elementu do koszyka
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
✅ Przykład danych w linii
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem { description: string }
tf 03 evt ItemAdded { description: string }
✅ Bloki danych i wiele odwołań
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem [[AddItem01]]
tf 03 evt ItemAdded [[ItemAdded]]
tf 04 cmd AddItem [[AddItem02]]
tf 05 evt ItemAdded [[ItemAdded]]
data AddItem01 {
description: 'john'
image: 'avatar_john'
price: 20.4
}
data AddItem02 {
description: 'jack'
image: 'avatar_jack'
price: 12.5
}
data ItemAdded {
description: string
image: string
price: number
}
✅ Zresetuj klatkę
modelowanie zdarzeń
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
💡 Kluczowe tokeny: tf (ramy czasowe), rf (ramy resetowe), ui / cmd / evt / pcr / rmo (typy encji). Użyj przestrzeni nazw takich jak Inventory.InventoryChanged aby utworzyć osobne rzeki.
📌 3. Diagram Venna – Relacje i przecięcia zbiorów
Pokaż relacje logiczne między zbiorami za pomocą nakładających się okręgów. Obsługuje niestandardowe rozmiary, etykiety, węzły tekstowe i stylizację.
✅ Podstawowy przykład – nakładanie się zespołów
venn-beta
title "Nakładanie się umiejętności zespołów"
set Frontend
set Backend
union Frontend,Backend["Projektowanie API"]
✅ Przykład rozmiarów, węzłów tekstowych i stylizacji
venn-beta
set A["Zespół Frontend"]:20
text A1["React"]
text A2["Systemy projektowania"]
set B["Zespół Backend"]:12
text B1["Rozwój API"]
union A,B["Umiejętności full-stack"]:3
text AB1["Specyfikacja OpenAPI"]
style A fill:#ff6b6b
style A,B color:#2c3e50
style A1 color:#e74c3c
💡 Użyj :liczba aby kontrolować rozmiar okręgów, text aby dodać etykiety wewnątrz zbiorów, oraz style do niestandardowych kolorów.
📌 4. Mapy Wardley’ego – mapowanie łańcucha wartości strategicznej
Mapy Wardley’ego pomagają wizualizować składniki firmy lub systemu, ich pozycję w łańcuchu wartości oraz etap ewolucji (Początek → Własna budowa → Produkt → Towar). VPasCode w pełni obsługuje oficjalny składnia Mermaid dla map Wardley’ego przy użyciuwardley-beta jako typ diagramu.
✅ Przykład – Ścieżka rozwoju oprogramowania
wardley-beta
tytuł Ścieżka wdrażania oprogramowania
punkt "Potrzeby użytkownika" [0.95, 0.70]
składnik "Ręczne wdrażanie" [0.15, 0.25]
składnik "Skrypty CI/CD" [0.45, 0.50]
składnik "Automatyczna ścieżka" [0.75, 0.65]
składnik "Infrastruktura chmury" [0.30, 0.40]
"Potrzeby użytkownika" -> "Automatyczna ścieżka"
"Automatyczna ścieżka" -> "Skrypty CI/CD"
"Skrypty CI/CD" -> "Ręczne wdrażanie"
"Ręczne wdrażanie" -> "Infrastruktura chmury"
ewolucja "Ręczne wdrażanie" 0.20
ewolucja "Skrypty CI/CD" 0.55
ewolucja "Automatyczna ścieżka" 0.85
ewolucja "Infrastruktura chmury" 0.70
notatka "Przejście na chmurę przyspiesza dojrzewanie ścieżki" [0.40, 0.35]
💡 Nazwy składników zawierające spacje muszą być otoczone podwójnymi cudzysłowami. Współrzędne zmieniają się od 0 do 1 na obu osiach (widoczność wobec ewolucji).
🛠️ Wypróbuj VPasCode teraz
Przejdź doVPasCode edytora:https://www.vpascode.com/.
Wybierz tryb składni Mermaid, wklej dowolny z powyższych przykładów kodu i obserwuj, jak twój diagram natychmiast się renderuje.
Zacznij bezpłatnie – Nie wymaga karty kredytowej, nie wymaga instalacji. Wszystko, czego potrzebujesz, to przeglądarka.
📖 Oficjalna dokumentacja i odniesienia
Visual Paradigm – profesjonalne modelowanie, uproszczone.
VPasCode to platforma diagram-as-code dla zespołów, które cenią wydajność, współpracę i diagramowanie oparte na tekście.