Diagrams¶

diagram { } embeds diagrams rendered by Kroki. It supports every Kroki backend — PlantUML, Mermaid, Graphviz, BlockDiag, Vega, and many more.

PlantUML¶

fun plantumlDiagram() {
  kslides {
    presentation {
      dslSlide {
        content {
          diagram("plantuml") {
            outputType = DiagramOutputType.SVG
            source =
              """
              @startuml
              Alice -> Bob: Hello
              Bob --> Alice: Hi back
              @enduml
              """.trimIndent()
          }
        }
      }
    }
  }
}

Mermaid¶

fun mermaidDiagram() {
  kslides {
    presentation {
      dslSlide {
        content {
          diagram("mermaid") {
            source =
              """
              graph LR
                A[Author] --> B(kslides)
                B --> C{Output}
                C -->|HTML| D[Static site]
                C -->|HTTP| E[Live server]
              """.trimIndent()
          }
        }
      }
    }
  }
}

Output type¶

Set outputType to DiagramOutputType.SVG (recommended), PNG, or PDF. SVG scales cleanly with reveal.js zoom transitions.

Output behavior¶

Static site mode — diagrams are pre-rendered and written to docs/kroki/.
HTTP mode — the Ktor server caches each rendered diagram in-memory.

Other backends¶

Anything Kroki understands works: c4plantuml, dot, ditaa, erd, nomnoml, nwdiag, seqdiag, wavedrom, … see the Kroki docs for the full list. Set type to the backend name.