Support individual container directions and layouts
Author: lloydjatkinsonCreated Dec 22, 2022Updated Aug 3, 2026
Consider the following. It's so w i d e. That's sometimes OK but if you plan on creating presentations using the diagrams then keeping a constrained size and layout is essential.
react: React {
songs: Song List
quiz: Quiz {
scoreboard: ScoreBoard
reducer: Reducer {
actions: Actions {
explanation: ||typescript
type Action =
| { type: 'start' }
| { type: 'answer', payload: { answer: ChosenTrack } }
| { type: 'finish' }
| { type: 'reset' };
||
}
state: State {
explanation: ||typescript
type State = Readonly<{
progress: Progress;
score: number;
currentTrackIndex: number;
tracks: readonly TrackWithPossibleAnswers[];
history: readonly ChosenTrack[];
}>;
||
}
}
}
scoreSubmit: Score Submission
}
By adding direction: right (surely it should be down) the entire diagram is now very long:
What would be really nice is if the direction property could be applied to a shape/container and it's descendants. That is, the direction is scoped to the current shape and below. Much like CSS flex/grid.
With this, we could create the following diagrams:
Source: terrastruct/d2