docsify-kroki

Install

1. Insert script into docsify document:

<script src="//unpkg.com/docsify-kroki"></script>

Usage

#Demo

## embedding it directly

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
```

## load from external files

![kroki-excalidraw](./docs/excalidraw.json)

Options

<script>
window.$docsify = {
  // default
  kroki: {
    langs: [
      "actdiag",
      "blockdiag",
      "bpmn",
      "bytefield",
      "c4plantuml",
      "d2",
      "dbml",
      "ditaa",
      "erd",
      "excalidraw",
      "graphviz",
      "mermaid",
      "nomnoml",
      "nwdiag",
      "packetdiag",
      "pikchr",
      "plantuml",
      "rackdiag",
      "seqdiag",
      "structurizr",
      "svgbob",
      "symbolator",
      "tikz",
      "vega",
      "vegalite",
      "wavedrom",
      "wireviz",
    ],
    // default
    serverPath: "//kroki.io/",
  },
}
</script>

langs

By default, those markdown language render by kroki:

| | | | | | | ---------- | ------------ | ---------- | ----------- | ------------- | | actdiag | blockdiag | bpmn | bytefield | c4plantuml | | d2 | dbml | ditaa | erd | excalidraw | | graphviz | mermaid | nomnoml | nwdiag | packetdiag | | pikchr | plantuml | rackdiag | seqdiag | structurizr | | svgbob | symbolator | tikz | vega | vegalite | | wavedrom | wireviz | | | |

you can add more to langs array.

serverPath

By default, the official Kroki server is used. If you have your own, configure it using the serverPath option:

Example

• index.html