Aby kontener draw.io i jego zawartość pozostały razem podczas automatycznego układu całej strony, użyj kontenera automatycznego układu. draw.io traktuje go jako jeden kształt i pozostawia jego wewnętrzne rozmieszczenie bez zmian. Wybór ma znaczenie: zaznaczenie wyłącznie kontenerów układu zmienia zamiast tego ich wewnętrzne układy. Zaawansowane kształty układu i kontenery układu, Zastosuj układy, aby zmienić rozmieszczenie diagramu

Ten poradnik opisuje rozmieszczanie kilku małych, zawartych diagramów na Macu z zachowaniem ich spójności. W przykładach użyto neutralnych etykiet, takich jak Kontener A, A1 i A2. Na oficjalnej stronie bieżącego wydania desktopowego widnieje wersja 32.6.1 z pakietem dla macOS; podczas korzystania z menu opisanego w aktualnej dokumentacji użyj aktualnej wersji desktopowej. Wydanie 32.6.1

Który rodzaj kontenera zachowuje wewnętrzny układ?

Najpierw zdecyduj, co oznacza „razem” w przypadku twojego diagramu. Utrzymywanie elementów podrzędnych wewnątrz elementu nadrzędnego, zachowanie ich wzajemnego położenia i automatyczne rozmieszczanie tych elementów to różne wymagania.

Zwykły kontener określa relację zawierania. Aby dodać kształt, przeciągnij go na kontener i puść, gdy obrys zmieni kolor na fioletowy. Samo narysowanie dużego prostokąta za kilkoma węzłami nie tworzy takiej relacji. Łączniki mogą przekraczać granice kontenera nadrzędnego. Włączanie i wyłączanie funkcji zwijania/rozwijania w kształtach kontenerów

Ogólna dokumentacja układów mówi, że zawartość zwykłego kontenera jest rozmieszczana wewnątrz niego podczas stosowania układu. Zaznaczenie jednego kontenera zawierającego co najmniej dwa kształty ogranicza działanie do jego zawartości. Zwykły kontener przydaje się więc do określania relacji zawierania, ale takie działanie nie gwarantuje zachowania dotychczasowego wewnętrznego rozmieszczenia. Szybkie porządkowanie diagramów za pomocą układów

Kontenery automatycznego układu zapewniają opisaną w dokumentacji granicę potrzebną w tym przypadku: podczas układu całego diagramu ich wewnętrzne kształty i łączniki nie są przestawiane, a każdy kontener jest traktowany jako pojedynczy kształt. Zaawansowane kształty układu i kontenery układu

Zamierzony rezultat Odpowiedni punkt wyjścia Ważny warunek
Utrzymanie węzłów wewnątrz elementu nadrzędnego przy jednoczesnym dopuszczeniu zmian wewnętrznego rozmieszczenia Zwykły kontener Przed zastosowaniem układu ustal rzeczywistą relację zawierania.
Zmiana rozmieszczenia strony z zachowaniem wewnętrznego układu każdego kontenera Kontener automatycznego układu Zastosuj układ do całego diagramu.
Ciągłe rozmieszczanie węzłów wewnątrz widocznej granicy Kształt automatycznego układu z biblioteki Advanced Jego własny układ reaguje na zmiany wewnętrzne.
Przesuwanie dokładnego, ręcznie utworzonego rozmieszczenia jako całości Zgrupuj kształty i łączniki Opisana jest możliwość przesuwania grupy, ale samo grupowanie nie gwarantuje, że każdy układ automatyczny zachowa wewnętrzne położenia.

Tabela ułatwia podjęcie decyzji na podstawie opisanych różnic między kształtami kontenerów, kontenerami automatycznego układu i grupami.

Utwórz mały kontener, który pozostanie spójny

Aby utworzyć widoczne obramowanie, zacznij od kształtu automatycznego układu przepływowego. Dzięki temu nie musisz polegać na tym, że zwykły prostokąt będzie działał jak kontener układu.

Utwórz wewnętrzny diagram

  1. Otwórz diagram w draw.io Desktop na Macu.
  2. Znajdź bibliotekę kształtów Advanced w lewym panelu. Jeśli jej tam nie ma, kliknij Więcej kształtów, zaznacz bibliotekę kształtów General i kliknij Zastosuj.
  3. Przeciągnij na kanwę poziomy lub pionowy kształt układu przepływowego.
  4. Użyj przykładowych kształtów, aby utworzyć krótką, połączoną sekwencję z etykietami A1, A2 i A3.
  5. Aby przedłużyć sekwencję, najedź kursorem na węzeł i kliknij strzałkę kierunkową, by sklonować i połączyć kolejny węzeł. Kliknij dwukrotnie jego etykietę, aby ją zmienić.

W kontenerach układu przepływowego każda strzałka kierunkowa tworzy kształt połączony z węzłem, na który najechano kursorem; układ decyduje o jego położeniu. Kontenery drzewa stosują inne reguły dla węzłów tego samego poziomu i węzłów potomnych. Kształty automatycznego układu dopasowują też rozmiar kontenera do jego zawartości. Te kroki pochodzą z oficjalnego poradnika dotyczącego kształtów automatycznego układu.

Utwórz drugi kształt automatycznego układu przepływowego z węzłami B1, B2 i B3. To przykładowe etykiety, a nie wymagany sposób nazewnictwa. Dwa kontenery ułatwiają rozróżnienie przesuwania całego kontenera od zmiany rozmieszczenia jego elementów podrzędnych.

Podczas edycji pozostaw co najmniej jeden element wewnątrz każdego kontenera układu. Dokumentacja ostrzega, że usunięcie ostatniego zawartego w nim elementu powoduje również usunięcie kontenera układu. Podczas przebudowy istniejącej sekcji pozostaw element początkowy, dopóki nie pojawi się nowa zawartość. Zaawansowane kształty układu i kontenery układu

Wybierz widoczną lub przezroczystą granicę

Kształty układu z biblioteki Advanced mają otaczający je pas, który umożliwia łączenie z jego granicą i z niej. Kontenery utworzone przez Rozmieść > Wstaw > Układ mają przezroczystą granicę; łączniki muszą być więc przypięte do ich wewnętrznych kształtów. Wybierz odpowiedni wariant w zależności od tego, czy zewnętrzna część diagramu ma łączyć się z samym kontenerem, czy z konkretnym węzłem. Zaawansowane kształty układu i kontenery układu

Aby użyć przezroczystego wariantu, wybierz Rozmieść > Wstaw > Układ i wybierz układ. Utwórz wewnętrzny diagram, przeciągając kształty na strzałki kierunkowe węzła. Uchwyt z przecinającymi się strzałkami w lewym górnym rogu służy do przesuwania kontenera układu. Wstawianie układu automatycznego

Zastosuj układ zewnętrzny bez zmiany układów wewnętrznych

Przed zastosowaniem układu zewnętrznego zakończ wewnętrzne rozmieszczanie każdego kontenera i dodaj połączenia wyrażające relacje między sekcjami diagramu. Na przykład połącz widoczną granicę Kontenera A z widoczną granicą Kontenera B, jeśli relacja dotyczy całych sekcji.

Następnie wykonaj te kroki:

  1. Kliknij pusty obszar kanwy, aby usunąć zaznaczenie.
  2. Otwórz Rozmieść > Układ.
  3. Wybierz odpowiednie ustawienie, na przykład Przepływ poziomy dla relacji od lewej do prawej.
  4. Sprawdź opcje odstępów i kliknij Zastosuj.
  5. Sprawdź położenie kontenerów oraz znajdujących się w nich węzłów.

Układ przepływu poziomego rozmieszcza kształty od lewej do prawej, zgodnie z kierunkiem wskazanym przez łączniki. Opcja Odstęp między węzłami określa odległości w wierszu lub kolumnie, a opcja Odstęp między poziomami — odległości między kolejnymi wierszami lub kolumnami. Zwiększ odpowiedni odstęp, jeśli etykiety lub połączenia potrzebują więcej miejsca. Układy przepływowe

Usunięcie zaznaczenia ma znaczenie. Jeśli zaznaczone są tylko kontenery układu, polecenie Rozmieść > Układ zastąpi ich aktywne układy wewnętrzne zamiast zmienić rozmieszczenie strony. Aby celowo zmienić opcje istniejącego kontenera, zaznacz go i wybierz Rozmieść > Układ > Edytuj układ. Zastosuj układy, aby zmienić rozmieszczenie diagramu

Użyj przykładu syntetycznego jako testu akceptacyjnego: A1, A2 i A3 powinny zachować wewnętrzne rozmieszczenie podczas stosowania układu zewnętrznego; to samo dotyczy trzech węzłów B. Ich kontenery nadrzędne mogą się przesuwać. Ten test wynika z opisanego w dokumentacji traktowania kontenerów układu jako pojedynczych kształtów; nie jest relacją z testu desktopowego przeprowadzonego w tym miejscu. Zaawansowane kształty układu i kontenery układu

Zdiagnozuj zmiany przed modyfikacją kolejnych ustawień

Elementy podrzędne zmieniają rozmieszczenie wewnątrz kontenera

Najpierw sprawdź typ kontenera i zaznaczenie. Układ może rozmieszczać zawartość zwykłego kontenera. W przypadku zaznaczonego kontenera automatycznego układu polecenie układu może zastąpić jego aktywny układ. Ustal, która operacja została wykonana, zanim zmienisz odstępy lub przebudujesz diagram. Szybkie porządkowanie diagramów za pomocą układów, Zastosuj układy, aby zmienić rozmieszczenie diagramu

Kontener się powiększa lub zmniejsza

Zmiana rozmiaru nie musi oznaczać, że relacja zawierania przestała działać. Ogólna dokumentacja układów podaje, że kontenery dopasowują rozmiar do zawartości rozmieszczonej przez układ, nawet gdy opcja Zmień rozmiar węzłów jest wyłączona. Ta opcja steruje zmianą rozmiaru poszczególnych węzłów; nie gwarantuje stałych granic kontenera. Szybkie porządkowanie diagramów za pomocą układów

Zmiana rozmiaru granicy rozciąga elementy podrzędne

Aby ręcznie zmienić rozmiar grupy, zaznacz ją i wyłącz opcję Zmień rozmiar elementów podrzędnych w sekcji Styl > Właściwości. Odpowiada jej udokumentowany styl recursiveResize=0, stosowany do grupy. Ustawienie to steruje proporcjonalną zmianą rozmiaru; dokumentacja nie opisuje go jako przełącznika zachowywania położeń podczas automatycznego układu. Wyłącz zmianę rozmiaru elementów podrzędnych, aby osobno zmieniać rozmiar kształtów w grupie

Potrzebujesz dokładnego, ręcznie utworzonego rozmieszczenia

Jeśli geometria rozmieszczenia sekcji utworzonego ręcznie musi pozostać dokładna, zaznacz jej kształty i wewnętrzne łączniki, a następnie użyj polecenia Rozmieść > Grupuj lub skrótu Cmd+G. Przeciągnięcie utworzonej grupy przesuwa jej elementy razem. To obsługiwany sposób ręcznego przesuwania; dokumentacja grupowania nie gwarantuje, że dowolne grupy pozostaną niezmienione we wszystkich układach automatycznych. Grupowanie i rozgrupowywanie kształtów oraz łączników

Układ daje nieodpowiedni rezultat

Naciśnij Cmd+Z, aby cofnąć zmianę przed porównaniem z innym ustawieniem. Oficjalny poradnik ostrzega, że układy korzystają z aktualnego stanu diagramu, więc wielokrotne stosowanie różnych układów z rzędu nie zapewnia spójnego odtworzenia tej samej struktury. Porównania są bardziej przydatne, gdy zaczynasz od tego samego rozmieszczenia. Zastosuj układy, aby zmienić rozmieszczenie diagramu

W tym zadaniu jasno określ dwie kwestie: który układ odpowiada za węzły wewnątrz każdego kontenera i który rozmieszcza stronę. Kontenery automatycznego układu zapewniają opisywane w dokumentacji oddzielenie tych operacji. Najpierw utwórz sekcje wewnętrzne, usuń zaznaczenie, zastosuj układ zewnętrzny i sprawdź rezultat przed dalszą pracą.

Źródła