Using Kroki.io to generate diagrams for hexo

Features

• Generate raw/base64/urlencoded svg at compile time, themes are also supported, no external css and js required.
• Support free kroki.io and self-managed service.

How Does it work

First find diagram types quote with ```<type> eg

```plantuml
your diagram
```

The plugin will parse the tag and send the diagram content to kroki.io. Finally, the generated images will be returned.

Install

npm install --save hexo-filter-kroki

Minimum configuration

By default, no configuration is required, the plugin will send your text to kroki.io for rendering, and the base64-encoded images will be inlined in the html.

Advanced configuration

Please keep in mind, if you want more about privacy/safety, please replace with your own self-managed render server.

kroki:

  # the kroki free service server, you may switch to your self-hosted sever.
  server: "https://kroki.io/"
  # Available values 
  # "inline": <svg>xxx<svg/>
  # "inlineUrlEncode": <img src='data:image/svg+xml;> 
  # "inlineBase64": <img src='data:image/svg+xml;base64> 
  # "localLink": <img src="/assert/puml/xxxx.svg">
  # "externalLink": <img src="https://kroki.io/plantuml/svg/xxx">
  link: "inline"

  # common options: svg/png
  outputFormat: "svg"
  # the generated img will have a default class name.
  className: 'kroki'

  # append some fragment per diagram, used for the theme or else config
  inserts:
    - diagram: plantuml
      after: 1
      # see https://plantuml.com/en/theme
      fragment: '!theme sketchy-outline'
    - diagram: mermaid
      after: 0
      # see https://mermaid-js.github.io/mermaid/#/theming
      fragment: "%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%"

How to use it?

eg for actdiag

Input the following text

​```actdiag
actdiag {
  write -> convert -> image

  lane user {
    label = "User"
    write [label = "Writing text"];
    image [label = "Get diagram image"];
  }
  lane Kroki {
    convert [label = "Convert text to image"];
  }
}
```

and will get

eg for wavedrom

Input the following text

```wavedrom
{ signal: [
  { name: "clk",         wave: "p.....|..." },
  { name: "Data",        wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
  { name: "Request",     wave: "0.1..0|1.0" },
  {},
  { name: "Acknowledge", wave: "1.....|01." }
]}
```

and will get

More

See supported types from api

• https://kroki.io/health

See more diagram examples at

• https://kroki.io/examples.html