zuisong/docsify-kroki

A docsify plugin to render graph like plantuml, mermaid, ..etc

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