how to change text sizes?

[lucasjinreal]

When graph became big and complicated, the label are too small.

Also, how to make the graph have a limited width and auto-gen layout? Since I want using this graph insert to PPT, but PPT can not insert too wide pictures.

[alixander]

you can set font-size, but there's no setting to change the global. this is a TODO.

You won't be able to constrain width/height, but you can set direction. https://d2lang.com/tour/layouts#direction this currently only works for top-level though. in the next release for the TALA layout engine, you will be able to set direction per-container, which should hopefully allow you to limit how horizontal it grows

[lucasjinreal]

@alixander Oh, am using the default rendering engine, how does it support orientation per group?

Also, when will all these 2 features be support?

I wanna change the padding between label and box, how to change it? I think mermaid default style is much more reasonable, d2 default one too large and wasted a lot space.

[oderwat]

I just came here for the same thing.

Even on https://text-to-diagram.com/ it is clear (for me and the team) that D2 is inferior in readability with most of the examples.

I think that is mostly because of the font to padding ratio is badly chosen. With the font being too small and the padding being much too large.

I also think that the text for sequence diagram interactions in between the arrow is a bad choice and makes it not looking like a sequence diagram at all. Where are my interactions? I only see a garbled mess of text and something that may be a line with an arrow?

Here, a simple example. Just imagine the font being bigger and the padding and spacing more compact. And the interactions not being "garbled" with the text, but having the text on top, which also give more room for them to be bigger. Dashed lines, are also harder to notice when the line itself is interrupted.

P.S.: Making an interaction a dashed line could be easier in the DSL than adding styling (e.g. using --> instead of ->). You do not usually want many different styles for your dashed interactions, so it would be much more usable to define that style (or just have a sensitive default).

On the first sight placing the image inside the comment here it is "okay" on "full width" because it has only few participants. I scaled it to 50%, and it immediately becomes very hard to read. Also, it is much too tall. There is so much emptiness in this diagram.

shape: sequence_diagram

k: D2 Sequence Diagram
y: You
s: [email protected]

y -> k.a: Launch the application {
  stroke-dash: 4
}
k.a -> y: Welcome to D2
k.a -> y: I really hope you enjoy\nusing it
y."Note to self:\nI need to order some pizza"
loop: {
  y -> y: do some work
  y -> s.a: this is not so great 😢
}

You write about the design choices and want to go for readability of the DSL. I think that should be even more emphasized for what it produces because this will be ingested by far more people. To me, the diagram looks like something a designer would do, and that is (sadly) very frequently not what a consumer wants :)

P.S.: We currently have to decide between using Plan UML and D2 and I can't make a point for D2 because the team cannot read the diagrams as easily. Normally, I would try to get a PR out that fixes what, I think, should change, but we do not have the time right now :(

[alixander]

@oderwat I appreciate the detailed writeup. We've heard the text sizing and excessive padding from multiple sources now, and will followup a new version with better defaults. We're actively working on this -- in progress right now is making the labels position more accurately per shape, and then we'll just change the constants (https://github.com/terrastruct/d2/pull/702).

We'll get the next version out by eow.

the excess height is something i hadn't heard before for sequence diagrams, but I'll play around with it too and post here

[oderwat]

While at it, I think the whole system would also benefit if one could set the default base font-size and use percentages for fonts in style definitions.

[alixander]

this'll be done with globs. (https://github.com/terrastruct/d2/issues/103)

*.style.font-size: 55

[oderwat]

That is nice, but I meant that I want to specify the size of a text relative like "100%", "120%", "80%" to make it easier to scale the whole thing for different usage scenarios. So, you just need to modify the base font-size and the remaining text will adapt to it. Otherwise, you need to go through the whole document and change the sizes.

[alixander]

thanks @oderwat , will continue that thread here: https://github.com/terrastruct/d2/issues/709

[alixander]

D2 0.2 makes things more compact. though the labels still do obscure a bit too much of the edge, the empty spacing issue is fixed:

https://play.d2lang.com/?script=TJK_SjRBEMTzfori8m-D44smEINNDsTEQIQDaXbb3XFnp8f5wzEnF_kSZr6ijyC7rnDpj67uKrpWrwZJ3or4Tp57y0PkmWgyaPd42DjajVeDJy2UDFIJQWO-zRIjpxxLl5teZ6KKfzeYGja44-K7EXkUcAjOdry8Fe8EXEU0-E8XmhpedNXgUVynsyAr2v0VPyAKO1cxahBULRD_qvXoS7J-gM1Um9295lWZxL2Yoz_Ai_QLWHuDtCwO9nzmHTnVYFYzdbvQ6-_ASeP0h9MSJI82wSZ4PWGIwhnfX58fdKGfAAAA__8%3D&

[kiriti999]

I just started using D2 today after comparing with other diagram providers but if text size cannot be increased then what's the point?

[alixander]

oh this can actually be closed. globs has been implemented:

https://play.d2lang.com/?script=Ks9ILClW0LVTKMlIBVEF-Zl5JVxcWlYK1VwKCmCL9ODBY6VgaspVywUIAAD__w%3D%3D&

[kiriti999]

@alixander Font sizes only works on basic structures but not for nested structures. I am not sure if an architecture can be created only using basic boxes then whats the point?

[alixander]

@kiriti999 I'm happy to help but please show some effort and help yourself first through the extensive documentation available: https://d2lang.com/tour/globs/

If you're still confused after, make a new issue and I'll help.

To answer your question this time:

https://play.d2lang.com/?script=Ks9ILCm2UqjmUlAoyUiFMBQUCvIz80q4FBRquWq5uLS0IMJgW_XgYWWlYGzKVcsFCAAA__8%3D&

[kongdd]

any idea how to change the font-size of the link text

x -> y: hello world

**: {
  style.font-size: 55
}

[alixander]

@kongdd

(* -> *)[*]: {
  style.font-size: 55
}

[louisabraham]

@kongdd

(* -> *)[*]: {
  style.font-size: 55
}

this should definitely be added to the documentation

[pidgeon777]

@kongdd

(* -> *)[*]: {
  style.font-size: 55
}

this should definitely be added to the documentation

I agree 👍.