Implement notes for connections

[tarnished-dodo]

I want to make a converter for converting plantuml to d2 code and I encountered a difference for the usage of notes. In plantuml you can use notes on actors and connections. D2 on the other hand only allows notes for actors. I will now provide one example in plantuml, one in d2 and two workarounds for d2 which work but aren’t optimal:

plantuml

@startuml
participant "Web Browser" as Browser
participant "Web Server" as Server
participant "Database" as DB

Browser -> Server: HTTP GET /
note right: Send request to load homepage
Server -> DB: Fetch homepage data
note right: Database processes the query
DB -> Server: Homepage data
note left: Database sends data back to server
Server -> Browser: HTTP 200 OK
note left: Browser receives the homepage HTML
@enduml

d2 notes

example 1: {
    shape: sequence_diagram
    Browser: Web Browser
    Server: Web Server
    DB: Database

    Browser -> Server: HTTP GET /
    Server.Send request to load homepage
    Server -> DB: Fetch homepage data
    DB.Database processes the query
    DB -> Server: Homepage data
    Server.Database sends data back to server
    Server -> Browser: HTTP 200 OK
    Browser.Browser receives the homepage HTML
}

The problem here is that it’s hard to tell which note belongs to which and if you don’t know it you won’t immediately think that it belongs to the connections.

d2 workaround 1

example 2: {
    shape: sequence_diagram
    Browser: Web Browser
    Server: Web Server
    DB: Database

    Browser -> Server: HTTP GET / \[Send request to load homepage\]
    Server -> DB: Fetch homepage data \[Database processes the query\]
    DB -> Server: Homepage data \[Database sends data back to server\]
    Server -> Browser: HTTP 200 OK \[Browser receives the homepage HTML\]
}

The problem with this workaround is that there’s too much text on the connections. I could also use line breaks but it would still look less clean.

d2 workaround 2

example 3: {
    shape: sequence_diagram
    Browser: Web Browser
    Server: Web Server
    DB: Database

    Browser -> Server: HTTP GET / \[1\]
    Server -> DB: Fetch homepage data \[2\]
    DB -> Server: Homepage data \[3\]
    Server -> Browser: HTTP 200 OK \[4\]
}
Notes: {
    near: center-right
    grid-rows: 2
    1\. Send request to load homepage.shape: page
    2\. Database processes the query.shape: page
    3\. Database sends data back to server.shape: page
    4\. Browser receives the homepage HTML.shape: page
}

This workaround keeps the connections clean but the separate box with the explanations takes up alot of space.

Conclusion

Does anybody have another workaround or is there maybe something planned that would fix this problem?

[alixander]

I agree this should be implemented, but it might be a release cycle or two before I get to it. Thank you for the clear issue report

[bo-ku-ra]

https://play.d2lang.com/?script=bFDLToNAFN3PV5wfUGvb1SxcEFQWGk1K4tJc4KYQgZnOnVZNw78bcGBS424e581f1NmWsdU4K0BqsqwhfDhyX_J71dDeUaeAxJlPYafxxsV8UcCO3Wl-_T0rIE00UvJUkLCKXFzdBcy1b-ytRpbnr3i8z3GzKI2YNBn_1xoP7MsatenY0p5RkadJ_VJoo5H9gUStYD3itsFwvVrhRS2okOXsjWl9YzV23Fdw4wLi4Q1aQ9USYpgChHyRM7eFdaZkERb4mnE4svseLqw2_9KE-0qm9Cio_BhtZaIMcb7QIbLnWR2X3JyC5bJWlj8_DWpQPwEAAP__&

use the ‘--force-appendix’ option.

example 4: {
  shape: sequence_diagram
  Browser: Web Browser
  Server: Web Server
  DB: Database

  Browser -> Server.tip1: HTTP GET /
  Server -> DB.tip2: Fetch homepage data
  DB -> Server.tip3: Homepage data
  Server -> Browser.tip4: HTTP 200 O

  Server.tip1: {tooltip: Send request to load homepage}
  DB.tip2: {tooltip: Database processes the query}
  Server.tip3: {tooltip: Database sends data back to server}
  Browser.tip4: {tooltip: Browser receives the homepage HTML}
}

related issues

576

1211

1541

and

2102