Skip to main content

Diagram - kroki (Diagram Extensions)

Interoperable with type

Kroki uses alias.

```plantuml
A --> B
```
and
```kroki type=plantuml
A --> B
```
are same expression

AABB

and

AABB

are same expression

D2 architecture Type

D2 Diagrams with classname.

```d2
cloud: {
disks: {
shape: sql_table
id: int {constraint: primary_key}
}
blocks: {
shape: sql_table
id: int {constraint: primary_key}
disk: int {constraint: foreign_key}
blob: blob
}
blocks.disk -> disks.id

AWS S3 Vancouver -> disks
}
```

clouddisksidintPKblocksidintPKdiskintFKblobAWS S3 Vancouver

Diagram with Zoom Controls

<ControlButtons>

```kroki type=d2
x: I'm a Mac {
link: https://apple.com
}
y: And I'm a PC {
link: https://microsoft.com
}
x -> y: gazoontite
```

</ControlButtons>

I'm a MacAnd I'm a PC gazoontite

Blockdiag

blockdiag blockdiag admin { A -> B -> C -> D; A -> E; A -> H; // A and B belong to first group. group { A; B; } // E, F and G belong to second group. group second_group { // Set group-label label = "second group"; // Set background-color to this group. color = "#77FF77"; // Set textcolor to this group textcolor = "#FF0000"; E -> F -> G; // H and I belong to third "nested" group. group { label = "third group"; color = "#FF0000"; // Set group shape to 'line group' (default is box) shape = line; // Set line style (effects to 'line group' only) style = dashed; H -> I; } } // J belongs to second group J [group = second_group]; } A B C E F G H I J D second group third group