Kroki

Kroki is a really cool diagramming tool that supports multiple diagram markup languages.

I used the Hugo Kroki Module to render them on this website.

The code sections are how the diagram is rendered by Hugo markdown.

A lot of the examples in here are taken directly from the respective projects’ site to see how they render in Hugo.

For example…

MainBasemain.viewsingletonbase.componentcomponentmodelmain.ts

…is rendered by this code.

```kroki {_type=plantuml}
skinparam ranksep 20
skinparam dpi 125
skinparam packageTitleAlignment left

rectangle "Main" {
  (main.view)
  (singleton)
}
rectangle "Base" {
  (base.component)
  (component)
  (model)
}
rectangle "<b>main.ts</b>" as main_ts

(component) ..> (base.component)
main_ts ==> (main.view)
(main.view) --> (component)
(main.view) ...> (singleton)
(singleton) ---> (model)
```