zuisong/docsify-kroki

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

20

stars

219

commits

TypeScript

primary language

Jun 19, 2026

updated

zuisong.github.io/docsify-kroki/
docsify
docsify-plugin
kroki
markdown
text-visualization
visualization

README

docsify-kroki

npm codecov GitHub branch checks state npm bundle size npm bundle size(ziped) GitHub top language GitHub last commit npm download count

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:

actdiagblockdiagbpmnbytefieldc4plantuml
d2dbmlditaaerdexcalidraw
graphvizmermaidnomnomlnwdiagpacketdiag
pikchrplantumlrackdiagseqdiagstructurizr
svgbobsymbolatortikzvegavegalite
wavedromwireviz

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

Contributors

zuisong

208 commits

dependabot[bot]

11 commits

zuisong/docsify-kroki

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

20

stars

219

commits

TypeScript

primary language

Jun 19, 2026

updated

zuisong.github.io/docsify-kroki/
docsify
docsify-plugin
kroki
markdown
text-visualization
visualization

README

docsify-kroki

npm codecov GitHub branch checks state npm bundle size npm bundle size(ziped) GitHub top language GitHub last commit npm download count

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:

actdiagblockdiagbpmnbytefieldc4plantuml
d2dbmlditaaerdexcalidraw
graphvizmermaidnomnomlnwdiagpacketdiag
pikchrplantumlrackdiagseqdiagstructurizr
svgbobsymbolatortikzvegavegalite
wavedromwireviz

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

Contributors

zuisong

208 commits

dependabot[bot]

11 commits

Languages

TypeScript

100.0%