PlantUml: order classes around an interface

Question

I am trying to create UML diagram with plantuml, this is my diagram:

@startuml
'https://plantuml.com/component-diagram


together {
class Rice {

}
class Egg extends IIngredient{

}
class Avocado extends IIngredient{

}
IIngredient <|-- Rice
}

abstract class IIngredient {
  @protected
  List<String>? allergens;
  @protected
  String? name;
  @protected
  int? price;

  String? getAllergens()
  String? getName()
  int? getPrice()
}

class Salmon {

}
class Tuna {

}
IIngredient <|-- Salmon
IIngredient <|-- Tuna

class Sesame extends IIngredient{

}

class Crisp extends IIngredient {

}
@enduml

the result is :

I want to IIngredient is center and other classes around it like this:

something like this:

score 3 · Accepted Answer · answered Aug 05 '23 at 04:31

Here's my take.

Define your interface at the top before you link to it.
Keep a simple usage. Using implements or extends means vertical alignment for inheritance. Using -r-|> forces the inheritance link in a direction (l, r, u, d) as mentioned by @Christophe.
Horizontal layout is not as intelligent as vertical. In my answer here, I used only one class with r and l relationship, as more than one will result in links that curve around. The multiple u or d flow nicely.
I am not sure why you used together, but you can achieve it by grouping classes either as u or d on the links.
I also re-formatted your IIngredient class. Maybe you want it to be an interface? In that case, it's interface IIngredient ... and you should change your relationships to be .r.|> to show dashed lines (for implements).

@startuml

hide empty members

abstract class IIngredient {
  ' # means protected visibility
  ' UML syntax name : type for attributes
  ' no "optional" like "?" in typescript
  #allergens:List<String>
  #name:String
  #price:int
  getAllergens():String
  getName():String
  getPrice():int
}

Egg -d-|> IIngredient
Avocado -d-|> IIngredient
Rice -d-|> IIngredient
Salmon -u-|> IIngredient
Tuna -u-|> IIngredient 
Sesame -l-|> IIngredient
Crisp -r-|> IIngredient
@enduml

Christophe · Answer 2 · 2023-08-04T18:36:35.013

There is not PlantUml feature that offers this layout. You can force horizontal layout, or vertical layout, but as soon as you want more creative positioning, you'll have to indicate explicit positioning hints, which will make the diagram difficult to maintain.

For the explicit positioning, forget the extends and implements syntax and use the arrow notation instead. You can then play with the number of dashes (one dash and more than one dash are about perpendicular positions) and the direction of the arrow. Example:

A -|> B
B <|- C
D --|> B
B <|-- E

results in:

Alternatively, you can also use the initial letter of up, down, left, right, keeping the same number of dashes in the arrow, or adding more dashes to leave more room. The following example gives indeed the same result as above:

A -l-|> B
C -r-|> B
D -d-|> B
E -u-|> B

The problem is that with more than one element per direction, plenum, just stacks them. If I would for example add the same arrows with AA, CC, DD, EE, I'd get:

Now the ultimate dirty tricks in plantUml advanced layout is to regroup several classes with a together clause and create -[hidden]- links between them to force horizontal or vertical alignment.

A -l-|> B
C -r-|> B
D --d-|> B
E --u-|> B
AA -l-|> B
CC -r-|> B
DD --d-|> B
EE --u-|> B
together {
  class C
  class CC
  C-[hidden]-CC
}
together {
  class A
  class AA
  A-[hidden]-AA
}
together {
  class D
  class DD
  D-[hidden]-DD
}
together {
  class E
  class EE
  E-[hidden]-EE
}

But this seems a lot of tedious non productive work to circumvent the limitation of a tool that does not provide advanced automatic graph layout such as directed force fields or similar algorithms, and with a lot of try and error. Moreover it neutralises the benefit of "model as code" and automatic documentation. Better go for a traditional UML modeling tool to save some time.

PlantUml: order classes around an interface

2 Answers2